/* Hallmark · tokens — Teman Digital design system · theme: Cobalt (modern-minimal)
 * Locked by design.md at the project root. Every colour, font, space, size,
 * ease, and radius in page CSS references these names. */

:root {
  /* ── colour · Cobalt: cool engineered near-white, one electric signal ── */
  --color-paper:         oklch(98.5% 0.004 250);
  --color-paper-2:       oklch(96.5% 0.005 252);
  --color-paper-3:       oklch(94%   0.006 254);
  --color-rule:          oklch(91%   0.008 255);
  --color-rule-2:        oklch(83%   0.011 255);
  --color-rule-strong:   oklch(58%   0.013 255);  /* control boundaries — ≥3:1 on paper */
  --color-muted:         oklch(50%   0.013 255);
  --color-neutral:       oklch(46%   0.015 255);
  --color-ink-2:         oklch(34%   0.018 257);  /* body text */
  --color-ink:           oklch(24%   0.020 258);  /* cool charcoal — never black */
  --color-accent:        oklch(58%   0.20  256);  /* electric cobalt — the one signal */
  --color-accent-strong: oklch(50%   0.19  256);  /* hover state of the signal */
  --color-accent-ink:    oklch(99%   0.004 256);  /* text on cobalt fills */
  --color-focus:         oklch(58%   0.20  256);
  --color-error:         oklch(45%   0.150 27);
  --color-error-bg:      oklch(95%   0.015 27);

  /* dark surfaces — the page's single dark beat */
  --color-graphite:      oklch(24%   0.018 260);  /* code card / band ground */
  --color-graphite-2:    oklch(29%   0.018 260);  /* elevated on graphite */
  --color-rule-on-ink:   oklch(38%   0.018 260);  /* hairlines on graphite */
  --color-muted-on-ink:  oklch(72%   0.012 256);  /* meta text on graphite */
  --color-paper-on-ink:  oklch(96%   0.006 252);  /* primary text on graphite */
  --color-accent-on-ink: oklch(74%   0.140 256);  /* cobalt lifted for small text on graphite */
  --color-paper-glass:   oklch(98.5% 0.004 250 / 0.85);  /* frosted nav on scroll */
  --color-scrim:         oklch(24% 0.020 258 / 0.5);

  /* ── typography · Space Grotesk display + Inter body + JetBrains Mono ── */
  --font-display: "Space Grotesk", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --display-weight: 500;
  --tracking-display: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-label:   0.06em;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-display:   clamp(2.5rem, 4.5vw + 0.75rem, 4.5rem);
  --text-display-s: clamp(1.85rem, 3vw + 0.5rem, 2.75rem);
  --measure: 62ch;

  /* ── space · 4pt scale, named by role ── */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;
  --section-gap: 7rem;
  --page-gutter: clamp(1.25rem, 5vw, 4rem);
  --page-max: 72rem;

  /* ── motion ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;
  --dur-reveal: 600ms;

  /* ── depth · ruler-drawn ── */
  --radius-card:  10px;
  --radius-btn:   6px;
  --radius-input: 6px;
  --shadow-card:     0 1px 2px oklch(24% 0.02 258 / 0.05);
  --shadow-hairline: 0 0 0 1px oklch(30% 0.012 255 / 0.06);

  /* ── z · six named levels ── */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-sticky-nav: 300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;
}

/* ── dark mode · same Cobalt family, inverted lightness ──
   Applies automatically from OS/browser preference, unless the visitor has
   explicitly picked a theme (data-theme, set + persisted by theme.js), which
   always wins. Every page-level stylesheet already reads colour exclusively
   through these custom properties, so this block is the only place a dark
   palette needs to be defined. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper:         oklch(20%   0.014 258);
    --color-paper-2:       oklch(24%   0.016 259);
    --color-paper-3:       oklch(28%   0.017 259);
    --color-rule:          oklch(33%   0.018 259);
    --color-rule-2:        oklch(42%   0.019 258);
    --color-rule-strong:   oklch(64%   0.02  256);
    --color-muted:         oklch(66%   0.015 255);
    --color-neutral:       oklch(72%   0.014 255);
    --color-ink-2:         oklch(85%   0.010 254);
    --color-ink:           oklch(95%   0.006 252);
    --color-accent:        oklch(74%   0.140 256);
    --color-accent-strong: oklch(80%   0.135 256);
    --color-accent-ink:    oklch(15%   0.020 258);
    --color-focus:         oklch(74%   0.140 256);
    --color-error:         oklch(72%   0.150 27);
    --color-error-bg:      oklch(28%   0.05  27);
    --color-paper-glass:   oklch(20%   0.014 258 / 0.85);
    --color-scrim:         oklch(10%   0.010 258 / 0.6);
    --shadow-card:     0 1px 2px oklch(0% 0 0 / 0.35);
    --shadow-hairline: 0 0 0 1px oklch(100% 0 0 / 0.06);
  }
}
:root[data-theme="dark"] {
  --color-paper:         oklch(20%   0.014 258);
  --color-paper-2:       oklch(24%   0.016 259);
  --color-paper-3:       oklch(28%   0.017 259);
  --color-rule:          oklch(33%   0.018 259);
  --color-rule-2:        oklch(42%   0.019 258);
  --color-rule-strong:   oklch(64%   0.02  256);
  --color-muted:         oklch(66%   0.015 255);
  --color-neutral:       oklch(72%   0.014 255);
  --color-ink-2:         oklch(85%   0.010 254);
  --color-ink:           oklch(95%   0.006 252);
  --color-accent:        oklch(74%   0.140 256);
  --color-accent-strong: oklch(80%   0.135 256);
  --color-accent-ink:    oklch(15%   0.020 258);
  --color-focus:         oklch(74%   0.140 256);
  --color-error:         oklch(72%   0.150 27);
  --color-error-bg:      oklch(28%   0.05  27);
  --color-paper-glass:   oklch(20%   0.014 258 / 0.85);
  --color-scrim:         oklch(10%   0.010 258 / 0.6);
  --shadow-card:     0 1px 2px oklch(0% 0 0 / 0.35);
  --shadow-hairline: 0 0 0 1px oklch(100% 0 0 / 0.06);
}
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── shared theme toggle button (theme.js wires the click) ── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-rule-strong);
  border-radius: 999px;
  background: var(--color-paper);
  color: var(--color-neutral);
  cursor: pointer;
}
.theme-toggle-icon {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle-icon--moon { display: none; }
@media (hover: hover) {
  .theme-toggle:hover { border-color: var(--color-accent); color: var(--color-ink); }
}
.theme-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.theme-toggle--floating { position: fixed; top: var(--space-md); right: var(--space-md); z-index: var(--z-sticky); background: var(--color-paper); box-shadow: var(--shadow-card); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle-icon--sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle-icon--moon { display: block; }
}
:root[data-theme="dark"] .theme-toggle-icon--sun { display: none; }
:root[data-theme="dark"] .theme-toggle-icon--moon { display: block; }