/* DesignAChip tokens, version 0.2. As of 26 Oct 2026. Provisional, the name is not cleared.
   Dark by default. Add data-theme="light" on the html element for the light theme.
   Add data-theme="auto" to follow the visitor's system setting.
   Glows are tokens and appear only in the dark theme. In the light theme the same names hold soft shadows.
   Never put a glow on body text. Never animate a glow faster than the motion tokens allow.
   Generated by src/build_brand.py, edit the build script and not this file. */

/* Safe contrast set. WCAG 2.x ratios computed in src/cz_core.py and all pass. Text needs 4.5, borders and icons need 3.0.
   DARK THEME, ratio then the pair
    16.69  Body text on page  (text on bg)
    14.99  Body text on panel  (text on surface)
    17.58  Body text on sunken surface  (text on surface-sunken)
     8.96  Muted text on page  (text-muted on bg)
     8.04  Muted text on panel  (text-muted on surface)
    13.05  Link and primary text on page  (primary on bg)
    11.72  Link on panel  (primary on surface)
    11.88  Button label on primary  (on-primary on primary)
    13.88  Button label on primary hover  (on-primary on primary-hover)
     8.28  Primary text on primary tint  (primary on primary-tint)
     4.82  Input border and icons on page  (border-strong on bg)
    15.24  Focus ring on page  (focus on bg)
     7.62  Pass text on pass tint  (pass on pass-bg)
     7.75  Caution text on caution tint  (caution on caution-bg)
     5.14  Fail text on fail tint  (fail on fail-bg)
     6.28  M26-DASH text on page  (realm-dash on bg)
     5.64  M26-DASH text on panel  (realm-dash on surface)
     4.72  M26-DASH text on its tint  (realm-dash on realm-dash-tint)
     7.17  M26-HAYDN text on page  (realm-haydn on bg)
     6.44  M26-HAYDN text on panel  (realm-haydn on surface)
     5.45  M26-HAYDN text on its tint  (realm-haydn on realm-haydn-tint)
    13.77  M26-LIAM text on page  (realm-liam on bg)
    12.37  M26-LIAM text on panel  (realm-liam on surface)
     9.28  M26-LIAM text on its tint  (realm-liam on realm-liam-tint)
    16.69  Logo ink on page  (brand-ink on bg)
    13.05  Logo accent on page  (brand-accent on bg)
   LIGHT THEME, ratio then the pair
    16.00  Body text on page  (text on bg)
    17.62  Body text on panel  (text on surface)
    14.49  Body text on sunken surface  (text on surface-sunken)
     7.35  Muted text on page  (text-muted on bg)
     8.09  Muted text on panel  (text-muted on surface)
     5.81  Link and primary text on page  (primary on bg)
     6.40  Link on panel  (primary on surface)
     5.81  Button label on primary  (on-primary on primary)
     8.23  Button label on primary hover  (on-primary on primary-hover)
     5.35  Primary text on primary tint  (primary on primary-tint)
     3.95  Input border and icons on page  (border-strong on bg)
     5.81  Focus ring on page  (focus on bg)
     5.47  Pass text on pass tint  (pass on pass-bg)
     5.72  Caution text on caution tint  (caution on caution-bg)
     6.10  Fail text on fail tint  (fail on fail-bg)
     5.05  M26-DASH text on page  (realm-dash on bg)
     5.56  M26-DASH text on panel  (realm-dash on surface)
     4.80  M26-DASH text on its tint  (realm-dash on realm-dash-tint)
     5.93  M26-HAYDN text on page  (realm-haydn on bg)
     6.53  M26-HAYDN text on panel  (realm-haydn on surface)
     5.58  M26-HAYDN text on its tint  (realm-haydn on realm-haydn-tint)
     5.22  M26-LIAM text on page  (realm-liam on bg)
     5.75  M26-LIAM text on panel  (realm-liam on surface)
     5.02  M26-LIAM text on its tint  (realm-liam on realm-liam-tint)
    16.00  Logo ink on page  (brand-ink on bg)
     5.81  Logo accent on page  (brand-accent on bg)
   AVOID, these pairs fail
     1.31  Dark theme pulse on light paper
     1.44  Dark theme pulse on white
     2.94  Light theme verdigris on night
     1.24  Dark theme LIAM lime on paper
     2.62  Dark theme HAYDN rose on white
     3.38  Light theme DASH blue on night
     1.06  Pulse on LIAM lime, neon on neon
     1.46  Muted text on pulse button
   Colour is never the only cue. Pair each realm colour with its name and marker shape. */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --cz-color-bg: #07131A;
  --cz-color-surface: #0D1F28;
  --cz-color-surface-sunken: #040B10;
  --cz-color-text: #E8F4F1;
  --cz-color-text-muted: #9FB8B6;
  --cz-color-border: #1D3A47;
  --cz-color-border-strong: #5F8794;
  --cz-color-primary: #2EF2C0;
  --cz-color-primary-hover: #8CFBE3;
  --cz-color-on-primary: #04201A;
  --cz-color-focus: #8CFBE3;
  --cz-color-link: #2EF2C0;
  --cz-color-pass: #6BE38A;
  --cz-color-caution: #FFC24A;
  --cz-color-fail: #FF6F5E;
  --cz-color-brand-ink: #E8F4F1;
  --cz-color-brand-accent: #2EF2C0;
  --cz-color-brand-glow: #2EF2C0;
  --cz-color-grid-line: rgb(46 242 192 / 0.16);
  --cz-color-grid-line-strong: rgb(46 242 192 / 0.38);
  --cz-color-hud-edge: rgb(46 242 192 / 0.55);
  --cz-color-trace: #2EF2C0;
  --cz-color-realm-dash: #4F94FF;
  --cz-color-realm-dash-tint: #152D42;
  --cz-color-realm-haydn: #FF6F9C;
  --cz-color-realm-haydn-tint: #2A2936;
  --cz-color-realm-liam: #A6F23C;
  --cz-color-realm-liam-tint: #1F382A;
  --cz-color-pass-bg: #1A3A36;
  --cz-color-caution-bg: #2F362D;
  --cz-color-fail-bg: #2F2A30;
  --cz-color-primary-tint: #123D3D;
  --cz-glow-pulse: 0 0 6px rgb(46 242 192 / 0.55), 0 0 18px rgb(46 242 192 / 0.35);
  --cz-glow-pulse-strong: 0 0 4px rgb(46 242 192 / 0.9), 0 0 14px rgb(46 242 192 / 0.6), 0 0 36px rgb(46 242 192 / 0.3);
  --cz-glow-dash: 0 0 6px rgb(79 148 255 / 0.55), 0 0 18px rgb(79 148 255 / 0.35);
  --cz-glow-haydn: 0 0 6px rgb(255 111 156 / 0.55), 0 0 18px rgb(255 111 156 / 0.35);
  --cz-glow-liam: 0 0 6px rgb(166 242 60 / 0.55), 0 0 18px rgb(166 242 60 / 0.35);
  --cz-glow-text: 0 0 10px rgb(46 242 192 / 0.55);
  --cz-glow-edge: inset 0 0 0 1px rgb(46 242 192 / 0.55), 0 0 16px rgb(46 242 192 / 0.25);
  --cz-gradient-horizon: linear-gradient(to top, rgb(46 242 192 / 0.20), transparent 65%);
}

:root[data-theme="light"] {
  color-scheme: light;
  --cz-color-bg: #F6F4EC;
  --cz-color-surface: #FFFFFF;
  --cz-color-surface-sunken: #ECE9DD;
  --cz-color-text: #0F1B1A;
  --cz-color-text-muted: #44534F;
  --cz-color-border: #D3D0C2;
  --cz-color-border-strong: #6F7C77;
  --cz-color-primary: #0B6B5F;
  --cz-color-primary-hover: #08524A;
  --cz-color-on-primary: #F6F4EC;
  --cz-color-focus: #0B6B5F;
  --cz-color-link: #0B6B5F;
  --cz-color-pass: #1B6B3A;
  --cz-color-caution: #7A5300;
  --cz-color-fail: #A3231B;
  --cz-color-brand-ink: #0F1B1A;
  --cz-color-brand-accent: #0B6B5F;
  --cz-color-brand-glow: #0B6B5F;
  --cz-color-grid-line: rgb(11 107 95 / 0.12);
  --cz-color-grid-line-strong: rgb(11 107 95 / 0.28);
  --cz-color-hud-edge: rgb(11 107 95 / 0.55);
  --cz-color-trace: #0B6B5F;
  --cz-color-realm-dash: #005DEC;
  --cz-color-realm-dash-tint: #E6EFFD;
  --cz-color-realm-haydn: #A9296B;
  --cz-color-realm-haydn-tint: #F6EAF0;
  --cz-color-realm-liam: #4F7006;
  --cz-color-realm-liam-tint: #EDF1E6;
  --cz-color-pass-bg: #E4EDE7;
  --cz-color-caution-bg: #EFEAE0;
  --cz-color-fail-bg: #F4E5E4;
  --cz-color-primary-tint: #E2EDEC;
  --cz-glow-pulse: 0 1px 2px rgb(15 27 26 / 0.12), 0 4px 12px rgb(11 107 95 / 0.14);
  --cz-glow-pulse-strong: 0 2px 4px rgb(15 27 26 / 0.16), 0 8px 20px rgb(11 107 95 / 0.2);
  --cz-glow-dash: 0 1px 2px rgb(15 27 26 / 0.12), 0 4px 12px rgb(0 93 236 / 0.14);
  --cz-glow-haydn: 0 1px 2px rgb(15 27 26 / 0.12), 0 4px 12px rgb(169 41 107 / 0.14);
  --cz-glow-liam: 0 1px 2px rgb(15 27 26 / 0.12), 0 4px 12px rgb(79 112 6 / 0.14);
  --cz-glow-text: none;
  --cz-glow-edge: inset 0 0 0 1px rgb(11 107 95 / 0.55);
  --cz-gradient-horizon: linear-gradient(to top, rgb(11 107 95 / 0.10), transparent 65%);
}

@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    color-scheme: light;
    --cz-color-bg: #F6F4EC;
    --cz-color-surface: #FFFFFF;
    --cz-color-surface-sunken: #ECE9DD;
    --cz-color-text: #0F1B1A;
    --cz-color-text-muted: #44534F;
    --cz-color-border: #D3D0C2;
    --cz-color-border-strong: #6F7C77;
    --cz-color-primary: #0B6B5F;
    --cz-color-primary-hover: #08524A;
    --cz-color-on-primary: #F6F4EC;
    --cz-color-focus: #0B6B5F;
    --cz-color-link: #0B6B5F;
    --cz-color-pass: #1B6B3A;
    --cz-color-caution: #7A5300;
    --cz-color-fail: #A3231B;
    --cz-color-brand-ink: #0F1B1A;
    --cz-color-brand-accent: #0B6B5F;
    --cz-color-brand-glow: #0B6B5F;
    --cz-color-grid-line: rgb(11 107 95 / 0.12);
    --cz-color-grid-line-strong: rgb(11 107 95 / 0.28);
    --cz-color-hud-edge: rgb(11 107 95 / 0.55);
    --cz-color-trace: #0B6B5F;
    --cz-color-realm-dash: #005DEC;
    --cz-color-realm-dash-tint: #E6EFFD;
    --cz-color-realm-haydn: #A9296B;
    --cz-color-realm-haydn-tint: #F6EAF0;
    --cz-color-realm-liam: #4F7006;
    --cz-color-realm-liam-tint: #EDF1E6;
    --cz-color-pass-bg: #E4EDE7;
    --cz-color-caution-bg: #EFEAE0;
    --cz-color-fail-bg: #F4E5E4;
    --cz-color-primary-tint: #E2EDEC;
    --cz-glow-pulse: 0 1px 2px rgb(15 27 26 / 0.12), 0 4px 12px rgb(11 107 95 / 0.14);
    --cz-glow-pulse-strong: 0 2px 4px rgb(15 27 26 / 0.16), 0 8px 20px rgb(11 107 95 / 0.2);
    --cz-glow-dash: 0 1px 2px rgb(15 27 26 / 0.12), 0 4px 12px rgb(0 93 236 / 0.14);
    --cz-glow-haydn: 0 1px 2px rgb(15 27 26 / 0.12), 0 4px 12px rgb(169 41 107 / 0.14);
    --cz-glow-liam: 0 1px 2px rgb(15 27 26 / 0.12), 0 4px 12px rgb(79 112 6 / 0.14);
    --cz-glow-text: none;
    --cz-glow-edge: inset 0 0 0 1px rgb(11 107 95 / 0.55);
    --cz-gradient-horizon: linear-gradient(to top, rgb(11 107 95 / 0.10), transparent 65%);
  }
}

/* Tokens that do not change with the theme */
:root {
  --cz-font-display: "Chakra Petch", "Bahnschrift", "Segoe UI", system-ui, sans-serif;
  --cz-font-body: "Schibsted Grotesk", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --cz-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --cz-weight-display: 600;
  --cz-weight-body: 400;
  --cz-weight-strong: 600;
  --cz-weight-mono: 500;
  --cz-leading-body: 1.6;
  --cz-leading-heading: 1.15;
  --cz-leading-mono: 1.5;
  --cz-tracking-display: 0.01em;
  --cz-tracking-label: 0.08em;
  --cz-measure: 68ch;
  --cz-text-xs: 0.8rem;
  --cz-text-base: 1.0rem;
  --cz-text-md: 1.25rem;
  --cz-text-lg: 1.563rem;
  --cz-text-xl: 1.953rem;
  --cz-text-2xl: 2.441rem;
  --cz-text-3xl: 3.052rem;
  --cz-space-1: 4px;
  --cz-space-2: 8px;
  --cz-space-3: 12px;
  --cz-space-4: 16px;
  --cz-space-6: 24px;
  --cz-space-8: 32px;
  --cz-space-12: 48px;
  --cz-space-16: 64px;
  --cz-radius-none: 0px;
  --cz-radius-sm: 2px;
  --cz-radius-md: 4px;
  --cz-radius-pill: 999px;
  --cz-hud-cut: 10px;
  --cz-hud-bracket: 14px;
  --cz-trace-width: 2px;
  --cz-grid-size: 48px;
  --cz-motion-fast: 120ms;
  --cz-motion-base: 200ms;
  --cz-motion-slow: 400ms;
  --cz-motion-breathe: 6s;
  --cz-motion-trace: 3.2s;
  --cz-motion-drift: 4s;
  --cz-motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --cz-motion-ok: 1;
  --cz-motion-max-flash-hz: 1;
  --cz-focus-width: 2px;
  --cz-focus-offset: 2px;
}

/* Visitors who ask for more contrast get no glow and a stronger border */
@media (prefers-contrast: more) {
  :root {
  --cz-glow-pulse: none;
  --cz-glow-pulse-strong: none;
  --cz-glow-dash: none;
  --cz-glow-haydn: none;
  --cz-glow-liam: none;
  --cz-glow-text: none;
  --cz-glow-edge: none;
    --cz-color-border: var(--cz-color-border-strong);
  }
}

@media (forced-colors: active) {
  :root {
  --cz-glow-pulse: none;
  --cz-glow-pulse-strong: none;
  --cz-glow-dash: none;
  --cz-glow-haydn: none;
  --cz-glow-liam: none;
  --cz-glow-text: none;
  --cz-glow-edge: none;
  }
}

/* Reduced motion. Every animation duration collapses and the glow stays static at full strength */
@media (prefers-reduced-motion: reduce) {
  :root {
    --cz-motion-fast: 0.01ms;
    --cz-motion-base: 0.01ms;
    --cz-motion-slow: 0.01ms;
    --cz-motion-breathe: 0.01ms;
    --cz-motion-trace: 0.01ms;
    --cz-motion-drift: 0.01ms;
    --cz-motion-ok: 0;
  }
}

/* Optional aliases so a provisional site stylesheet can adopt the tokens with no rename.
   Delete this block if the site uses the --cz names directly. */
:root {
  --bg: var(--cz-color-bg);
  --surface: var(--cz-color-surface);
  --text: var(--cz-color-text);
  --text-muted: var(--cz-color-text-muted);
  --border: var(--cz-color-border);
  --accent: var(--cz-color-primary);
  --accent-hover: var(--cz-color-primary-hover);
  --on-accent: var(--cz-color-on-primary);
  --focus: var(--cz-color-focus);
  --font-display: var(--cz-font-display);
  --font-body: var(--cz-font-body);
  --font-mono: var(--cz-font-mono);
}