/* ==========================================================================
   DESIGN TOKENS — Nexoss IA
   The single source of truth for the visual identity. Components never use
   raw values: they read the tokens below (or the section-theme variables at
   the end of this file).

   1. FONTS          5. RADIUS
   2. COLORS         6. SHADOWS
   3. TYPOGRAPHY     7. GRID + LAYOUT
   4. SPACING        8. MOTION
                     9. BREAKPOINTS (responsive overrides)
                    10. SECTION THEMES
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS — self-hosted, open licence (OFL).
   To change a typeface, replace the .woff2 in assets/fonts/, update its
   @font-face rule and the matching --font-* variable.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* ------------------------------------------------------------------------
     2. COLORS
     Primitives (ink scale = cool near-black greys, one yellow accent).
     Contrast (WCAG): accent is 11.8:1 with --ink-950 but only 1.6:1 on
     white → use yellow as a FILL (with ink text) or as text/lines on DARK
     backgrounds only. Never yellow text on a light background.
     ------------------------------------------------------------------------ */
  --ink-950: #0b0d10;   /* primary dark background, main text        */
  --ink-900: #14171c;   /* raised surface on dark                    */
  --ink-800: #1d2127;
  --ink-700: #2b3039;   /* borders on dark                           */
  --ink-600: #4a515c;   /* secondary text on light (7.3:1)           */
  --ink-500: #646b76;   /* muted text on light (4.9:1 on --ink-100)  */
  --ink-400: #8a8f98;   /* muted text on dark (6:1 on --ink-950)     */
  --ink-300: #c4c8ce;   /* strong borders on light                   */
  --ink-200: #e2e4e8;   /* hairlines on light                        */
  --ink-100: #f4f5f7;   /* alternative light background              */
  --white: #fff;

  --yellow-500: #f5c400; /* brand accent                             */
  --yellow-400: #ffd21f; /* accent hover                             */

  --red-600: #c4372c;
  --red-50: #fdecea;

  /* Semantic colours — what components should reach for */
  --color-bg: var(--white);
  --color-bg-alt: var(--ink-100);
  --color-bg-inverse: var(--ink-950);
  --color-surface-inverse: var(--ink-900);
  --color-text: var(--ink-950);
  --color-text-secondary: var(--ink-600);
  --color-text-muted: var(--ink-500);
  --color-text-inverse: var(--white);
  --color-text-inverse-muted: var(--ink-400);
  --color-border: var(--ink-200);
  --color-border-strong: var(--ink-300);
  --color-border-inverse: var(--ink-700);
  --color-accent: var(--yellow-500);
  --color-accent-hover: var(--yellow-400);
  --color-on-accent: var(--ink-950);
  --color-error: var(--red-600);
  --color-error-bg: var(--red-50);
  --color-overlay: rgba(11, 13, 16, .72);

  /* ------------------------------------------------------------------------
     3. TYPOGRAPHY
     Archivo → headings · Inter → text · IBM Plex Mono → small technical
     labels only (numbers, tags, legal). Never mono for paragraphs.
     Sizes are in rem (the rem scales with the viewport, see GRID).
     ------------------------------------------------------------------------ */
  --font-display: "Archivo", "Arial Narrow", ui-sans-serif, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --display-stretch: 88%;      /* Archivo width axis: slightly narrow, not condensed */
  --display-weight: 620;
  --display-tracking: -.028em;

  --fw-regular: 400;
  --fw-book: 500;
  --fw-medium: 560;
  --tracking-body: -.012em;
  --tracking-mono: .06em;

  /* Scale (desktop) */
  --text-display: 11.2rem;   /* hero title                    */
  --text-h1: 8.8rem;         /* statement titles, final CTA   */
  --text-h2: 6.4rem;         /* section titles                */
  --text-h3: 4.4rem;
  --text-h4: 3.2rem;         /* card titles                   */
  --text-h5: 2.4rem;
  --text-body-xl: 2.8rem;    /* lead paragraphs               */
  --text-body-lg: 2rem;
  --text-body: 1.7rem;
  --text-small: 1.5rem;
  --text-xs: 1.4rem;
  --text-mono: 1.2rem;

  --leading-display: .94;
  --leading-heading: 1;
  --leading-body: 1.45;
  --leading-tight: 1.25;

  /* ------------------------------------------------------------------------
     4. SPACING (8-point rhythm, in rem)
     ------------------------------------------------------------------------ */
  --space-1: .4rem;
  --space-2: .8rem;
  --space-3: 1.2rem;
  --space-4: 1.6rem;
  --space-5: 2.4rem;
  --space-6: 3.2rem;
  --space-7: 4.8rem;
  --space-8: 6.4rem;
  --space-9: 9.6rem;
  --space-10: 12.8rem;

  /* ------------------------------------------------------------------------
     5. RADIUS — tight, precise corners
     ------------------------------------------------------------------------ */
  --radius-xs: .4rem;
  --radius-sm: .8rem;     /* buttons, inputs   */
  --radius-md: 1.2rem;    /* small cards       */
  --radius-lg: 2rem;      /* large cards       */
  --radius-section: 3.2rem;
  --radius-pill: 999px;

  /* ------------------------------------------------------------------------
     6. SHADOWS
     ------------------------------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(11, 13, 16, .06);
  --shadow-md: 0 1.2rem 3.2rem -1.2rem rgba(11, 13, 16, .18);
  --shadow-lg: 0 3.2rem 8rem -3.2rem rgba(11, 13, 16, .35);

  /* ------------------------------------------------------------------------
     7. GRID + LAYOUT
     12-column grid measured against .page (a size container) so the
     scrollbar is never included.
     ------------------------------------------------------------------------ */
  --nav-height: 8rem;
  --section-margin: 12.8rem;
  --rounded-margin: 6.4rem;

  --grid-columns: 12;
  --grid-column-gap: 2.4rem;
  --grid-side-margin: 8rem;
  --grid-max-width: 2560px;
  --grid-width-input: calc(100cqw - var(--grid-side-margin) * 2);
  --grid-width: min(var(--grid-width-input), var(--grid-max-width));
  --grid-column-width: calc((var(--grid-width) - (var(--grid-columns) - 1) * var(--grid-column-gap)) / var(--grid-columns));

  /* Root size: the whole design is in rem and scales with the viewport
     (10px at 1440px wide). */
  --root-size: clamp(8.5px, .6944444vw, 17.7777778px);

  /* ------------------------------------------------------------------------
     8. MOTION — fast, smooth, intentional
     ------------------------------------------------------------------------ */
  --ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
  --ease-out-quad: cubic-bezier(.25, .46, .45, .94);
  --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
  --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
  --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);

  --duration-fast: .15s;
  --duration-base: .25s;
  --duration-slow: .5s;
  --duration-reveal: .8s;
}

/* --------------------------------------------------------------------------
   9. BREAKPOINTS
   ≥1024px desktop · 768–1023px tablet · ≤767px mobile.
   (Custom properties can't be used inside @media, so every file repeats
   these same three values.)
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  :root {
    --root-size: clamp(8px, 1.0417vw, 8.5px);
    --grid-side-margin: 4.8rem;
    --grid-column-gap: 1.9rem;
    --section-margin: 9.6rem;

    --text-display: 9.2rem;
    --text-h1: 7.2rem;
    --text-h2: 5.6rem;
    --text-h3: 4rem;
    --text-h4: 2.8rem;
  }
}

@media (max-width: 767px) {
  :root {
    --root-size: clamp(8.5333px, 2.6666667vw, 13px);
    --nav-height: 6.4rem;
    --section-margin: 7.2rem;
    --rounded-margin: 3.2rem;
    --radius-section: 2.4rem;
    --radius-lg: 1.6rem;
    --grid-columns: 6;
    --grid-column-gap: 1.6rem;
    --grid-side-margin: 2rem;

    --text-display: 5rem;
    --text-h1: 4.4rem;
    --text-h2: 3.6rem;
    --text-h3: 3rem;
    --text-h4: 2.4rem;
    --text-h5: 2rem;
    --text-body-xl: 2rem;
    --text-body-lg: 1.7rem;
    --text-body: 1.6rem;
    --text-small: 1.4rem;
    --text-xs: 1.3rem;
    --text-mono: 1.1rem;
  }
}

/* --------------------------------------------------------------------------
   10. SECTION THEMES
   Every section declares data-theme="white|grey|black|accent"; components
   read these variables instead of hard-coded colours. js/modules/nav.js
   copies the theme of the section under the header onto the header.
     --bg1 / --color1   section background / text
     --bg2 / --color2   surfaces inside the section (cards, pills)
     --muted            secondary text
     --line             hairlines and borders
     --focus            keyboard focus ring
     --accent-ink       accent usable as text/icons (yellow only on dark)
   -------------------------------------------------------------------------- */
:root,
[data-theme="white"] {
  --bg1: var(--white);
  --bg2: var(--ink-100);
  --color1: var(--ink-950);
  --color2: var(--ink-950);
  --muted: var(--ink-600);
  --line: var(--ink-200);
  --focus: var(--ink-950);
  --accent-ink: var(--ink-950);
}

[data-theme="grey"] {
  --bg1: var(--ink-100);
  --bg2: var(--white);
  --color1: var(--ink-950);
  --color2: var(--ink-950);
  --muted: var(--ink-600);
  --line: var(--ink-200);
  --focus: var(--ink-950);
  --accent-ink: var(--ink-950);
}

[data-theme="black"] {
  --bg1: var(--ink-950);
  --bg2: var(--ink-900);
  --color1: var(--white);
  --color2: var(--white);
  --muted: var(--ink-400);
  --line: var(--ink-700);
  --focus: var(--yellow-500);
  --accent-ink: var(--yellow-500);
}

[data-theme="accent"] {
  --bg1: var(--yellow-500);
  --bg2: var(--ink-950);
  --color1: var(--ink-950);
  --color2: var(--white);
  --muted: var(--ink-800);
  --line: rgba(11, 13, 16, .18);
  --focus: var(--ink-950);
  --accent-ink: var(--ink-950);
}