/**
 * Design tokens.
 *
 * The whole visual language resolves from this file. Sections never hard-code a colour,
 * a duration or an easing curve — they reference a token, so the theme can be re-skinned
 * from WordPress Customizer values that override these custom properties on :root.
 */

:root {
  /* ---- Material palette -------------------------------------------------
     Named after what they are, not where they are used, so a token can move
     between sections without its name going stale. */
  --c-paper: #f2f1ee;        /* off-white — primary light ground */
  --c-paper-warm: #e9e7e2;   /* recessed light panels */
  --c-concrete: #c9c6c0;     /* raw concrete — hairlines, muted fills */
  --c-steel: #8a8a87;        /* steel — secondary text on light */
  --c-graphite: #464643;     /* tertiary text on light */
  --c-charcoal: #1c1c1a;     /* primary dark ground */
  --c-black: #0a0a09;        /* deepest ground — engineering section */
  --c-glass: rgba(242, 241, 238, 0.06);

  /* One electric accent. Blueprint blue — engineering, not hi-vis cliché. */
  --c-accent: #0038ff;
  --c-accent-bright: #3a63ff;

  /* ---- Semantic roles --------------------------------------------------- */
  --bg: var(--c-paper);
  --bg-alt: var(--c-paper-warm);
  --fg: var(--c-charcoal);
  --fg-muted: var(--c-graphite);
  --fg-faint: var(--c-steel);
  --rule: rgba(28, 28, 26, 0.14);
  --rule-strong: rgba(28, 28, 26, 0.28);

  /* Dark-section role overrides are applied via .is-dark, not a media query,
     because these sections are dark by design intent at every colour scheme. */

  /* ---- Type ------------------------------------------------------------- */
  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Fluid scale, 375px -> 1440px. Display sizes are deliberately oversized:
     the largest step crosses 10rem so headlines behave as architecture, not text. */
  --t-display-xl: clamp(3.25rem, 1.2rem + 11.4vw, 11.5rem);
  --t-display-l: clamp(2.75rem, 1.4rem + 7.2vw, 7.5rem);
  --t-display-m: clamp(2.25rem, 1.4rem + 4.4vw, 5rem);
  --t-display-s: clamp(1.75rem, 1.2rem + 2.6vw, 3.25rem);
  --t-heading: clamp(1.375rem, 1.05rem + 1.5vw, 2.125rem);
  --t-body-l: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);
  --t-body: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --t-small: 0.8125rem;
  --t-label: 0.6875rem;   /* technical annotations */

  --lh-display: 0.86;
  --lh-heading: 1.04;
  --lh-body: 1.55;

  --tracking-display: -0.035em;  /* oversized type needs negative tracking to read as one mass */
  --tracking-heading: -0.02em;
  --tracking-label: 0.16em;      /* technical labels are wide and small */

  /* ---- Space ------------------------------------------------------------
     A 4px-derived scale. Section rhythm is fluid so vertical whitespace stays
     extreme on desktop without crushing mobile. */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --s-11: 12rem;
  --section-y: clamp(5rem, 3rem + 9vw, 11rem);
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem);
  --grid-gap: clamp(1rem, 0.5rem + 1.6vw, 2rem);

  /* ---- Grid -------------------------------------------------------------
     12 columns, asymmetric by usage rather than by a separate token set. */
  --grid-cols: 12;
  --max-w: 1680px;
  --measure: 62ch;

  /* ---- Motion -----------------------------------------------------------
     Fast, precise, physical. Nothing floats. Durations stay inside 0.35s-0.8s;
     the overshoot lives in the easing curve, not in extra time. */
  --d-fast: 0.35s;
  --d-base: 0.5s;
  --d-slow: 0.8s;
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);            /* decisive settle */
  --e-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);  /* slight overshoot */
  --e-snap: cubic-bezier(0.5, 0, 0, 1);              /* hard in, hard out */

  /* ---- Depth ------------------------------------------------------------ */
  --z-base: 0;
  --z-raise: 10;
  --z-sticky: 100;
  --z-header: 500;
  --z-menu: 600;
  --z-cursor: 9999;

  --border-hair: 1px;
  --radius: 0px; /* hard edges — deliberately zero, kept as a token so it stays intentional */
}

/* Dark ground. Applied as a class so a section owns its own contrast contract. */
.is-dark {
  --bg: var(--c-black);
  --bg-alt: var(--c-charcoal);
  --fg: var(--c-paper);
  --fg-muted: rgba(242, 241, 238, 0.62);
  --fg-faint: rgba(242, 241, 238, 0.38);
  --rule: rgba(242, 241, 238, 0.14);
  --rule-strong: rgba(242, 241, 238, 0.3);
}

/* Respect the OS preference for reduced motion at the token level so every
   consumer inherits it, including inline styles written by GSAP fallbacks. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 0.01s;
    --d-base: 0.01s;
    --d-slow: 0.01s;
  }
}