/* Shuffle Works design tokens — single source of truth for the product family.
   Published from shuffle-works-site and injected into every downstream product
   page at build time (see scripts/sync-static-sites.sh), alongside
   shuffle-works-product-bar.css.

   The values follow Trace, the SparkForensics design system (docs/DESIGN.md in
   that repo): panels on a gray canvas, one indigo accent, Instrument Sans for
   prose and JetBrains Mono for data, flat surfaces with a 1px rule. Dark is
   slate, never pure black.

   Subprojects should ALIAS their local variables to these canonical names
   (e.g. `--accent: var(--color-accent)`) rather than redefining the palette,
   so the family stays coherent from one shared source. Token names are a
   contract with those builds: add new ones freely, never rename or remove.

   --color-signal is Trace's "clean" status green: confirmation only, never
   decoration or emphasis. Trace has no second brand accent.

   Theming: dark is the default (dark-first); the OS light preference overrides
   it; the manual [data-theme] attribute (set per page) always wins over both. */
/* Self-hosted Trace fonts (see /fonts/ for the OFL licenses). Declared here so
   every page that loads the shared tokens gets the families without a third-party
   font request. Upright latin + latin-ext only; the unicode-range split means the
   latin-ext file downloads only when a page actually uses those characters. */
@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  src: url('/fonts/instrument-sans-latin-ext-wdth-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  src: url('/fonts/instrument-sans-latin-wdth-normal.woff2') format('woff2-variations');
  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 Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('/fonts/jetbrains-mono-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
  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 {
  /* Palette — dark (default) */
  --color-bg: #14161b;
  --color-bg-elevated: #1b1e25;
  --color-surface-2: #21252d;
  --color-text: #e6e8ee;
  --color-text-muted: #9097a3;
  --color-accent: #9d97ff;
  --color-accent-hover: #b6b1ff;
  --color-accent-soft: #25234a;
  --color-signal: #5fcc8c;
  --color-on-accent: #14161b;
  --color-border: #2b2f38;
  --color-border-soft: #23262e;
  /* Alias for downstream surfaces that expect a "surface" token; tracks
     --color-bg-elevated automatically across theme changes. */
  --color-surface: var(--color-bg-elevated);

  /* Type. The families are self-hosted via the @font-face rules above. */
  --font-sans: 'Instrument Sans Variable', 'Instrument Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
  /* Headings (h1-h3) run the width axis at 85% for the compact instrument look. */
  --font-stretch-heading: 85%;

  /* Space + shape: panels 6px, buttons and inputs 4px, tag chips 3px. */
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --radius-panel: 6px;
  --radius-button: 4px;
  --radius-tag: 3px;
  --radius: var(--radius-panel);
}

@media (prefers-color-scheme: light) {
  :root {
    --color-bg: #f3f4f6;
    --color-bg-elevated: #ffffff;
    --color-surface-2: #f7f8fa;
    --color-text: #16181d;
    --color-text-muted: #5f6672;
    --color-accent: #4f46e5;
    --color-accent-hover: #4338ca;
    --color-accent-soft: #eceafd;
    --color-signal: #1a7541;
    --color-on-accent: #ffffff;
    --color-border: #e1e3e8;
    --color-border-soft: #eceef1;
  }
}

:root[data-theme="dark"] {
  --color-bg: #14161b;
  --color-bg-elevated: #1b1e25;
  --color-surface-2: #21252d;
  --color-text: #e6e8ee;
  --color-text-muted: #9097a3;
  --color-accent: #9d97ff;
  --color-accent-hover: #b6b1ff;
  --color-accent-soft: #25234a;
  --color-signal: #5fcc8c;
  --color-on-accent: #14161b;
  --color-border: #2b2f38;
  --color-border-soft: #23262e;
}

:root[data-theme="light"] {
  --color-bg: #f3f4f6;
  --color-bg-elevated: #ffffff;
  --color-surface-2: #f7f8fa;
  --color-text: #16181d;
  --color-text-muted: #5f6672;
  --color-accent: #4f46e5;
  --color-accent-hover: #4338ca;
  --color-accent-soft: #eceafd;
  --color-signal: #1a7541;
  --color-on-accent: #ffffff;
  --color-border: #e1e3e8;
  --color-border-soft: #eceef1;
}

/* Visually hidden but announced by screen readers (clip-based, not display:none) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}