/* tokens.css — Aurevix Engineering design system
   ===========================================================================
   ⚠ GENERATED FILE — do not edit by hand.
     Source: _build/build_tokens.py     Rebuild: python _build/build_tokens.py

   NAMING RULE (load-bearing):
     --c-*     colour            --sp-*   space / length
     --fs-*    font size         --lh-*   line height
     --r-*     radius            --ls-*   letter spacing
     --dur-*   duration          --ease-* easing
     --z-*     z-index           --ms-*   measure (max text width)
   A colour token NEVER holds a length and a length token NEVER holds a colour.
   A sister project aliased three length tokens onto colours and the layout
   silently collapsed; these prefixes make that class of bug impossible.

   THEMING
     :root                     light ("paper"), always fully defined
     @media dark + :not(...)   dark ("model space") for the system preference
     [data-theme="dark"]        explicit toggle, wins over the media query
     [data-theme="light"]       explicit toggle, wins back

   BANDS — the important bit.
     A .band is a full-bleed section that inverts against the page. It does NOT
     override component colours one at a time; it is handed the OPPOSITE
     PALETTE WHOLESALE. So a component dropped into a band inverts correctly
     without knowing bands exist — including components written later.
     This is deliberate: patching per component is how a footer once ended up
     black-on-black in production.
   =========================================================================== */

:root {
  /* --- Type families ------------------------------------------------- */
  --ff-display: 'Space Grotesk', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
  --ff-body: 'IBM Plex Sans', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
  --ff-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;

  /* --- Fluid type scale ----------------------------------------------
     Fluid between 360px and 1440px viewports.                           */
  --fs-3xs: 0.6875rem;                                        /* 11px  micro labels   */
  --fs-2xs: 0.75rem;                                          /* 12px  mono captions  */
  --fs-xs:  clamp(0.8125rem, 0.79rem + 0.10vw, 0.875rem);     /* 13-14 fine print     */
  --fs-sm:  clamp(0.875rem,  0.85rem + 0.12vw, 0.9375rem);    /* 14-15 UI             */
  --fs-base:clamp(1rem,      0.97rem + 0.14vw, 1.0625rem);    /* 16-17 body           */
  --fs-md:  clamp(1.0625rem, 0.99rem + 0.32vw, 1.25rem);      /* 17-20 lede           */
  --fs-lg:  clamp(1.3125rem, 1.17rem + 0.63vw, 1.625rem);     /* 21-26 card heads     */
  --fs-xl:  clamp(1.625rem,  1.35rem + 1.22vw, 2.375rem);     /* 26-38 section heads  */
  --fs-2xl: clamp(2.125rem,  1.66rem + 2.07vw, 3.25rem);      /* 34-52 big statements */
  --fs-3xl: clamp(2.625rem,  1.72rem + 4.02vw, 4.5rem);       /* 42-72 hero           */

  --lh-tight: 1.06;
  --lh-head: 1.14;
  --lh-snug: 1.35;
  --lh-body: 1.62;
  --lh-loose: 1.75;

  --ls-tight: -0.022em;
  --ls-head: -0.014em;
  --ls-normal: 0;
  --ls-wide: 0.06em;
  --ls-caps: 0.14em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- Measure --------------------------------------------------------- */
  --ms-tight: 46ch;
  --ms-body: 64ch;
  --ms-wide: 78ch;

  /* --- Fluid space scale ----------------------------------------------- */
  --sp-0: 0;
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: clamp(2.25rem, 2rem + 1.1vw, 3rem);
  --sp-8: clamp(3rem, 2.6rem + 1.8vw, 4rem);
  --sp-9: clamp(4rem, 3.3rem + 3.1vw, 6rem);
  --sp-10: clamp(5rem, 3.9rem + 4.9vw, 8rem);
  --sp-11: clamp(6rem, 4.4rem + 7.1vw, 11rem);

  --sp-section: clamp(4.5rem, 3.4rem + 4.9vw, 7.5rem);
  --sp-gutter: clamp(1.25rem, 0.85rem + 1.8vw, 2.5rem);
  --sp-shell: 78rem;
  --sp-shell-wide: 90rem;

  /* --- Radii ------------------------------------------------------------ */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 14px;
  --r-5: 22px;
  --r-pill: 999px;

  /* --- Drafting geometry ------------------------------------------------ */
  --sp-grid: 32px;
  --sp-grid-fine: 8px;
  --sp-rule: 1px;

  /* --- Motion ------------------------------------------------------------
     "Snap" is the brand easing: fast travel, hard settle — a line locking
     onto a reference point, not a bounce.                                 */
  --dur-1: 120ms;    /* state change: hover, focus     */
  --dur-2: 220ms;    /* small transform, chip, tab     */
  --dur-3: 380ms;    /* panel, accordion, tooltip      */
  --dur-4: 600ms;    /* scroll reveal                  */
  --dur-5: 900ms;    /* setout line draw               */
  --dur-6: 1600ms;   /* discipline overlay sequence    */

  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-draft: cubic-bezier(0.65, 0, 0.35, 1);

  /* --- Layers ------------------------------------------------------------ */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 300;
  --z-modal: 400;

  /* ===================== COLOUR — LIGHT ("paper") ===================== */
  --c-paper: #f6f5f1;
  --c-surface: #ffffff;
  --c-surface-2: #fbfaf7;
  --c-sunken: #eceae3;
  --c-ink: #12161a;
  --c-ink-2: #39424c;
  --c-ink-3: #666f7a;
  --c-mark: #d9006b;
  --c-mark-ink: #b00057;
  --c-mark-soft: #ffe6f1;
  --c-rule: #dcd9d1;
  --c-rule-strong: #b9b5aa;
  --c-rule-faint: #e9e6df;
  --c-mech: #17b8ce;
  --c-mech-ink: #0a6c7c;
  --c-mech-soft: #e0f6fa;
  --c-elec: #e9a21b;
  --c-elec-ink: #8a5a00;
  --c-elec-soft: #fdf1d8;
  --c-hyd: #2fa35f;
  --c-hyd-ink: #1a6b3c;
  --c-hyd-soft: #e0f5e9;
  --c-fire: #e24a3a;
  --c-fire-ink: #a5281b;
  --c-fire-soft: #fde9e6;
  --c-ok: #1a6b3c;
  --c-warn: #8a5a00;
  --c-danger: #a5281b;
  --c-info: #0a6c7c;
  --c-focus: #d9006b;
  --c-focus-halo: rgba(217, 0, 107, 0.24);
  --c-btn: #12161a;
  --c-btn-ink: #f6f5f1;
  --c-btn-hover: #232b33;
  --c-selection: rgba(217, 0, 107, 0.18);
  --c-scrim: rgba(18, 22, 26, 0.55);
  --shadow-1: 0 1px 2px rgba(18, 22, 26, 0.06);
  --shadow-2: 0 2px 4px rgba(18, 22, 26, 0.05), 0 8px 24px -12px rgba(18, 22, 26, 0.16);
  --shadow-3: 0 4px 8px rgba(18, 22, 26, 0.06), 0 24px 48px -20px rgba(18, 22, 26, 0.22);
}

/* ===================== COLOUR — DARK ("model space") ===================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --c-paper: #0b0f14;
    --c-surface: #131a22;
    --c-surface-2: #182029;
    --c-sunken: #080b0f;
    --c-ink: #e9eef4;
    --c-ink-2: #b0bcc8;
    --c-ink-3: #8695a3;
    --c-mark: #ff2f8a;
    --c-mark-ink: #ff6ba6;
    --c-mark-soft: #2a0d1c;
    --c-rule: #242d38;
    --c-rule-strong: #3a4653;
    --c-rule-faint: #182029;
    --c-mech: #22c9df;
    --c-mech-ink: #4adbee;
    --c-mech-soft: #06272d;
    --c-elec: #f2ae2c;
    --c-elec-ink: #ffc94d;
    --c-elec-soft: #2c2005;
    --c-hyd: #35b86c;
    --c-hyd-ink: #56d68c;
    --c-hyd-soft: #062616;
    --c-fire: #f05a48;
    --c-fire-ink: #ff8574;
    --c-fire-soft: #2c0d08;
    --c-ok: #56d68c;
    --c-warn: #ffc94d;
    --c-danger: #ff8574;
    --c-info: #4adbee;
    --c-focus: #ff2f8a;
    --c-focus-halo: rgba(255, 47, 138, 0.32);
    --c-btn: #f6f5f1;
    --c-btn-ink: #0b0f14;
    --c-btn-hover: #ffffff;
    --c-selection: rgba(255, 47, 138, 0.26);
    --c-scrim: rgba(4, 6, 9, 0.68);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.35), 0 8px 24px -12px rgba(0, 0, 0, 0.7);
    --shadow-3: 0 4px 8px rgba(0, 0, 0, 0.4), 0 24px 48px -20px rgba(0, 0, 0, 0.8);
  }
}

/* Explicit toggle repeats the set so it wins in BOTH directions. */
:root[data-theme='dark'] {
  --c-paper: #0b0f14;
  --c-surface: #131a22;
  --c-surface-2: #182029;
  --c-sunken: #080b0f;
  --c-ink: #e9eef4;
  --c-ink-2: #b0bcc8;
  --c-ink-3: #8695a3;
  --c-mark: #ff2f8a;
  --c-mark-ink: #ff6ba6;
  --c-mark-soft: #2a0d1c;
  --c-rule: #242d38;
  --c-rule-strong: #3a4653;
  --c-rule-faint: #182029;
  --c-mech: #22c9df;
  --c-mech-ink: #4adbee;
  --c-mech-soft: #06272d;
  --c-elec: #f2ae2c;
  --c-elec-ink: #ffc94d;
  --c-elec-soft: #2c2005;
  --c-hyd: #35b86c;
  --c-hyd-ink: #56d68c;
  --c-hyd-soft: #062616;
  --c-fire: #f05a48;
  --c-fire-ink: #ff8574;
  --c-fire-soft: #2c0d08;
  --c-ok: #56d68c;
  --c-warn: #ffc94d;
  --c-danger: #ff8574;
  --c-info: #4adbee;
  --c-focus: #ff2f8a;
  --c-focus-halo: rgba(255, 47, 138, 0.32);
  --c-btn: #f6f5f1;
  --c-btn-ink: #0b0f14;
  --c-btn-hover: #ffffff;
  --c-selection: rgba(255, 47, 138, 0.26);
  --c-scrim: rgba(4, 6, 9, 0.68);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.35), 0 8px 24px -12px rgba(0, 0, 0, 0.7);
  --shadow-3: 0 4px 8px rgba(0, 0, 0, 0.4), 0 24px 48px -20px rgba(0, 0, 0, 0.8);
}

/* =========================================================================
   BANDS — the opposite palette, applied wholesale.
   Order matters: the explicit-toggle rules come last so they beat the media
   query at equal specificity.
   ========================================================================= */

/* Light page -> dark band */
:root .band {
  --c-paper: #0b0f14;
  --c-surface: #131a22;
  --c-surface-2: #182029;
  --c-sunken: #080b0f;
  --c-ink: #e9eef4;
  --c-ink-2: #b0bcc8;
  --c-ink-3: #8695a3;
  --c-mark: #ff2f8a;
  --c-mark-ink: #ff6ba6;
  --c-mark-soft: #2a0d1c;
  --c-rule: #242d38;
  --c-rule-strong: #3a4653;
  --c-rule-faint: #182029;
  --c-mech: #22c9df;
  --c-mech-ink: #4adbee;
  --c-mech-soft: #06272d;
  --c-elec: #f2ae2c;
  --c-elec-ink: #ffc94d;
  --c-elec-soft: #2c2005;
  --c-hyd: #35b86c;
  --c-hyd-ink: #56d68c;
  --c-hyd-soft: #062616;
  --c-fire: #f05a48;
  --c-fire-ink: #ff8574;
  --c-fire-soft: #2c0d08;
  --c-ok: #56d68c;
  --c-warn: #ffc94d;
  --c-danger: #ff8574;
  --c-info: #4adbee;
  --c-focus: #ff2f8a;
  --c-focus-halo: rgba(255, 47, 138, 0.32);
  --c-btn: #f6f5f1;
  --c-btn-ink: #0b0f14;
  --c-btn-hover: #ffffff;
  --c-selection: rgba(255, 47, 138, 0.26);
  --c-scrim: rgba(4, 6, 9, 0.68);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.35), 0 8px 24px -12px rgba(0, 0, 0, 0.7);
  --shadow-3: 0 4px 8px rgba(0, 0, 0, 0.4), 0 24px 48px -20px rgba(0, 0, 0, 0.8);
}

/* Dark page -> light band */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .band {
    --c-paper: #f6f5f1;
    --c-surface: #ffffff;
    --c-surface-2: #fbfaf7;
    --c-sunken: #eceae3;
    --c-ink: #12161a;
    --c-ink-2: #39424c;
    --c-ink-3: #666f7a;
    --c-mark: #d9006b;
    --c-mark-ink: #b00057;
    --c-mark-soft: #ffe6f1;
    --c-rule: #dcd9d1;
    --c-rule-strong: #b9b5aa;
    --c-rule-faint: #e9e6df;
    --c-mech: #17b8ce;
    --c-mech-ink: #0a6c7c;
    --c-mech-soft: #e0f6fa;
    --c-elec: #e9a21b;
    --c-elec-ink: #8a5a00;
    --c-elec-soft: #fdf1d8;
    --c-hyd: #2fa35f;
    --c-hyd-ink: #1a6b3c;
    --c-hyd-soft: #e0f5e9;
    --c-fire: #e24a3a;
    --c-fire-ink: #a5281b;
    --c-fire-soft: #fde9e6;
    --c-ok: #1a6b3c;
    --c-warn: #8a5a00;
    --c-danger: #a5281b;
    --c-info: #0a6c7c;
    --c-focus: #d9006b;
    --c-focus-halo: rgba(217, 0, 107, 0.24);
    --c-btn: #12161a;
    --c-btn-ink: #f6f5f1;
    --c-btn-hover: #232b33;
    --c-selection: rgba(217, 0, 107, 0.18);
    --c-scrim: rgba(18, 22, 26, 0.55);
    --shadow-1: 0 1px 2px rgba(18, 22, 26, 0.06);
    --shadow-2: 0 2px 4px rgba(18, 22, 26, 0.05), 0 8px 24px -12px rgba(18, 22, 26, 0.16);
    --shadow-3: 0 4px 8px rgba(18, 22, 26, 0.06), 0 24px 48px -20px rgba(18, 22, 26, 0.22);
  }
}

:root[data-theme='dark'] .band {
  --c-paper: #f6f5f1;
  --c-surface: #ffffff;
  --c-surface-2: #fbfaf7;
  --c-sunken: #eceae3;
  --c-ink: #12161a;
  --c-ink-2: #39424c;
  --c-ink-3: #666f7a;
  --c-mark: #d9006b;
  --c-mark-ink: #b00057;
  --c-mark-soft: #ffe6f1;
  --c-rule: #dcd9d1;
  --c-rule-strong: #b9b5aa;
  --c-rule-faint: #e9e6df;
  --c-mech: #17b8ce;
  --c-mech-ink: #0a6c7c;
  --c-mech-soft: #e0f6fa;
  --c-elec: #e9a21b;
  --c-elec-ink: #8a5a00;
  --c-elec-soft: #fdf1d8;
  --c-hyd: #2fa35f;
  --c-hyd-ink: #1a6b3c;
  --c-hyd-soft: #e0f5e9;
  --c-fire: #e24a3a;
  --c-fire-ink: #a5281b;
  --c-fire-soft: #fde9e6;
  --c-ok: #1a6b3c;
  --c-warn: #8a5a00;
  --c-danger: #a5281b;
  --c-info: #0a6c7c;
  --c-focus: #d9006b;
  --c-focus-halo: rgba(217, 0, 107, 0.24);
  --c-btn: #12161a;
  --c-btn-ink: #f6f5f1;
  --c-btn-hover: #232b33;
  --c-selection: rgba(217, 0, 107, 0.18);
  --c-scrim: rgba(18, 22, 26, 0.55);
  --shadow-1: 0 1px 2px rgba(18, 22, 26, 0.06);
  --shadow-2: 0 2px 4px rgba(18, 22, 26, 0.05), 0 8px 24px -12px rgba(18, 22, 26, 0.16);
  --shadow-3: 0 4px 8px rgba(18, 22, 26, 0.06), 0 24px 48px -20px rgba(18, 22, 26, 0.22);
}

:root[data-theme='light'] .band {
  --c-paper: #0b0f14;
  --c-surface: #131a22;
  --c-surface-2: #182029;
  --c-sunken: #080b0f;
  --c-ink: #e9eef4;
  --c-ink-2: #b0bcc8;
  --c-ink-3: #8695a3;
  --c-mark: #ff2f8a;
  --c-mark-ink: #ff6ba6;
  --c-mark-soft: #2a0d1c;
  --c-rule: #242d38;
  --c-rule-strong: #3a4653;
  --c-rule-faint: #182029;
  --c-mech: #22c9df;
  --c-mech-ink: #4adbee;
  --c-mech-soft: #06272d;
  --c-elec: #f2ae2c;
  --c-elec-ink: #ffc94d;
  --c-elec-soft: #2c2005;
  --c-hyd: #35b86c;
  --c-hyd-ink: #56d68c;
  --c-hyd-soft: #062616;
  --c-fire: #f05a48;
  --c-fire-ink: #ff8574;
  --c-fire-soft: #2c0d08;
  --c-ok: #56d68c;
  --c-warn: #ffc94d;
  --c-danger: #ff8574;
  --c-info: #4adbee;
  --c-focus: #ff2f8a;
  --c-focus-halo: rgba(255, 47, 138, 0.32);
  --c-btn: #f6f5f1;
  --c-btn-ink: #0b0f14;
  --c-btn-hover: #ffffff;
  --c-selection: rgba(255, 47, 138, 0.26);
  --c-scrim: rgba(4, 6, 9, 0.68);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.35), 0 8px 24px -12px rgba(0, 0, 0, 0.7);
  --shadow-3: 0 4px 8px rgba(0, 0, 0, 0.4), 0 24px 48px -20px rgba(0, 0, 0, 0.8);
}

/* =========================================================================
   DISCIPLINE SCOPING
   Put data-discipline on any container and its children read --c-accent /
   --c-accent-ink / --c-accent-soft. This is how discipline coding stays
   systematic instead of being hand-applied per component.
   ========================================================================= */
:root {
  --c-accent: var(--c-mark);
  --c-accent-ink: var(--c-mark-ink);
  --c-accent-soft: var(--c-mark-soft);
}
[data-discipline='mechanical'] {
  --c-accent: var(--c-mech);
  --c-accent-ink: var(--c-mech-ink);
  --c-accent-soft: var(--c-mech-soft);
}
[data-discipline='electrical'] {
  --c-accent: var(--c-elec);
  --c-accent-ink: var(--c-elec-ink);
  --c-accent-soft: var(--c-elec-soft);
}
[data-discipline='hydraulic'] {
  --c-accent: var(--c-hyd);
  --c-accent-ink: var(--c-hyd-ink);
  --c-accent-soft: var(--c-hyd-soft);
}
[data-discipline='fire'] {
  --c-accent: var(--c-fire);
  --c-accent-ink: var(--c-fire-ink);
  --c-accent-soft: var(--c-fire-soft);
}