/* ==========================================================================
   AtlasHive design tokens: Direction D "Hive Grid"
   Source of truth: design/DESIGN-NOTES.md and design/static/*.html.
   Change values here, never hard-code them in components.

   Breakpoints (custom properties cannot be used in media queries, so these
   are documented here and used as literal values, mobile first):
     --bp-sm  640px   two-column forms and grids
     --bp-md  960px   desktop header navigation replaces the menu button
     --bp-lg 1200px   full content width
   ========================================================================== */

@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-latin-wght.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-wght.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- Colour ---------------------------------------------------------- */
  --c-red: #d32f2f;            /* primary: buttons, accents (4.98:1 on white) */
  --c-red-dark: #c62828;       /* hover, links, red text on pink (4.92:1 on --c-pink) */
  --c-red-deep: #8e1b1b;       /* link hover */
  --c-red-ink: #7f1d1d;        /* text on pink callouts and quotes */
  --c-red-soft: #fca5a5;       /* red text on navy */
  --c-red-dot: #ef4444;        /* status dot in the header button */
  --c-pink: #fdecec;           /* tint backgrounds */
  --c-pink-border: #f5c9c9;
  --c-pink-border-strong: #f2a7a7;

  --c-navy: #0f172a;           /* headings, dark surfaces */
  --c-navy-2: #1e293b;         /* dark cards, dividers on navy */
  --c-navy-border: #334155;

  --c-bg: #fbfbfd;             /* page background */
  --c-surface: #ffffff;
  --c-surface-muted: #f4f5f8;
  --c-border: #e6e8ee;
  --c-border-2: #e2e8f0;
  /* Form field borders: darker than the design's #DDE1E8 so fields reach 3:1 (WCAG 1.4.11). */
  --c-border-input: #8b95a7;

  --c-text: #0f172a;
  --c-text-body: #475569;      /* 7.5:1 on white */
  --c-text-strong-body: #334155;
  --c-text-muted: #64748b;     /* 4.76:1 on white; use only on white/near-white */
  --c-text-muted-strong: #5b6779; /* muted text on --c-surface-muted (5.26:1; #64748b is 4.37:1 there) */
  --c-text-on-dark: #ffffff;
  --c-text-on-dark-muted: #cbd5e1;
  --c-text-on-dark-faint: #94a3b8; /* only on navy (6.9:1); fails on white, never use it there */
  --c-success: #16a34a;

  --c-focus: #d32f2f;
  --c-focus-on-dark: #ffffff;

  /* ---- Typography ------------------------------------------------------ */
  --font-sans: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Fluid scale: 390px mobile value -> 1440px desktop value from the design. */
  --fs-display: clamp(2.5rem, 1.989rem + 2.095vw, 3.875rem);   /* 40 -> 62  home hero */
  --fs-h1: clamp(2.375rem, 1.957rem + 1.714vw, 3.5rem);         /* 38 -> 56  page heroes */
  --fs-h1-sm: clamp(2.125rem, 1.846rem + 1.143vw, 2.875rem);   /* 34 -> 46  article, legal */
  --fs-h2: clamp(1.875rem, 1.55rem + 1.333vw, 2.75rem);       /* 30 -> 44  section titles */
  --fs-h2-sm: clamp(1.625rem, 1.393rem + 0.952vw, 2.25rem);    /* 26 -> 36 */
  --fs-h3-lg: clamp(1.375rem, 1.282rem + 0.381vw, 1.625rem);   /* 22 -> 26 */
  --fs-h3: 1.3125rem;          /* 21 card titles */
  --fs-h4: 1.125rem;           /* 18 small card titles */
  --fs-lead: clamp(1rem, 0.954rem + 0.19vw, 1.125rem);        /* 16 -> 18 */
  --fs-body: 1rem;             /* 16 */
  --fs-sm: 0.9375rem;          /* 15 */
  --fs-xs: 0.875rem;           /* 14 */
  --fs-2xs: 0.8125rem;         /* 13 */
  --fs-mono: 0.8125rem;        /* 13 section labels */
  --fs-mono-sm: 0.75rem;       /* 12 breadcrumbs, meta */
  --fs-mono-xs: 0.6875rem;     /* 11 tags, card codes */

  --lh-tight: 1.05;
  --lh-heading: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.6;
  --lh-relaxed: 1.7;
  --lh-article: 1.8;

  --ls-display: -0.035em;
  --ls-heading: -0.03em;
  --ls-tight: -0.02em;

  /* ---- Space (4px base) ------------------------------------------------ */
  --sp-1: 0.25rem;   /*  4 */
  --sp-2: 0.5rem;    /*  8 */
  --sp-3: 0.75rem;   /* 12 */
  --sp-4: 1rem;      /* 16 */
  --sp-5: 1.25rem;   /* 20 */
  --sp-6: 1.5rem;    /* 24 */
  --sp-7: 1.75rem;   /* 28 */
  --sp-8: 2rem;      /* 32 */
  --sp-10: 2.5rem;   /* 40 */
  --sp-12: 3rem;     /* 48 */
  --sp-14: 3.5rem;   /* 56 */
  --sp-16: 4rem;     /* 64 */
  --sp-20: 5rem;     /* 80 */
  --sp-section: clamp(3.5rem, 2.386rem + 4.571vw, 6.5rem);       /* 56 -> 104 vertical section padding */
  --sp-section-sm: clamp(3rem, 2.443rem + 2.286vw, 4.5rem);      /* 48 -> 72 */

  --container: 75rem;          /* 1200 content width */
  --container-narrow: 53.75rem;/* 860 FAQ, articles */
  --gutter: 1rem;              /* 16 mobile side padding, 24 from --bp-sm */

  --tap: 2.75rem;              /* 44px minimum touch target */

  /* ---- Radius ---------------------------------------------------------- */
  --r-xs: 8px;     /* tags, header badge */
  --r-sm: 10px;
  --r-md: 12px;    /* buttons, inputs */
  --r-lg: 16px;
  --r-xl: 18px;    /* header, FAQ items */
  --r-2xl: 20px;
  --r-3xl: 22px;   /* cards */
  --r-4xl: 26px;
  --r-5xl: 28px;   /* CTA band, form card */
  --r-pill: 999px;

  /* ---- Shadows --------------------------------------------------------- */
  --sh-red: 0 10px 30px rgba(211, 47, 47, 0.28);
  --sh-card-hover: 0 0 0 4px rgba(211, 47, 47, 0.06), 0 18px 40px rgba(15, 23, 42, 0.06);
  --sh-float: 0 20px 50px rgba(15, 23, 42, 0.06);
  --sh-hex-glow: 0 0 60px rgba(211, 47, 47, 0.35);

  /* ---- Effects --------------------------------------------------------- */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-blur: blur(14px);
  --grid-line: rgba(15, 23, 42, 0.05);
  --grid-size: 48px;
  --hex-clip: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 160ms;

  --z-header: 50;
  --z-menu: 100;
}

@media (min-width: 640px) {
  :root {
    --gutter: 1.5rem;
  }
}