@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/auth-static/newsreader-latin.woff2") format("woff2");
  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 {
  color-scheme: light;

  --canvas: #f3f0e8;
  --canvas-subtle: #eae6dc;
  --paper: #fcfbf7;
  --paper-elevated: #ffffff;
  --paper-glass: rgba(252, 251, 247, 0.94);
  --paper-glass-hover: #ffffff;

  --ink: #171a19;
  --ink-secondary: #353936;
  --graphite: #626660;
  --graphite-dim: #7e817b;
  --rule: #d3cfc4;
  --rule-subtle: #e5e1d7;
  --rule-active: #8f918c;
  --rule-focus: #3157e7;

  --signal: #3157e7;
  --signal-hover: #2447ca;
  --signal-subtle: #e8edff;
  --signal-glow: rgba(49, 87, 231, 0.16);

  --positive: #287353;
  --positive-subtle: #e5f1ea;
  --attention: #8a5a12;
  --attention-subtle: #f7edda;
  --critical: #a13c35;
  --critical-subtle: #f8e9e5;
  --preview-frame: #171a19;

  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Segoe UI Variable Text", "Aptos", "Segoe UI", system-ui, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --type-display: 600 clamp(2.75rem, 7vw, 5.75rem) / 0.96 var(--font-display);
  --type-h1: 600 clamp(2.15rem, 5vw, 4.25rem) / 1 var(--font-display);
  --type-h2: 600 clamp(1.65rem, 3vw, 2.6rem) / 1.06 var(--font-display);
  --type-h3: 600 1.2rem / 1.25 var(--font-body);
  --type-body-lg: 400 1.125rem / 1.65 var(--font-body);
  --type-body: 400 1rem / 1.62 var(--font-body);
  --type-small: 400 0.875rem / 1.5 var(--font-body);
  --type-h4: 650 1rem / 1.35 var(--font-body);
  --type-label: 600 0.72rem / 1.2 var(--font-mono);
  --type-label-tracking: 0.09em;
  --type-eyebrow: 650 0.72rem / 1.2 var(--font-mono);
  --type-eyebrow-tracking: 0.12em;
  --type-caption: 400 0.78rem / 1.5 var(--font-body);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  --radius-field: 4px;
  --radius-control: 6px;
  --radius-pill: 999px;
  --radius-sheet: 8px;
  --radius-frame: 12px;
  --radius-inner: 8px;
  --border-width: 1px;
  --focus-ring-width: 3px;
  --focus-ring-offset: 3px;

  --control-height: 46px;
  --control-height-compact: 40px;
  --control-height-lg: 52px;

  /* Elevation — layered editorial shadows. Soft tiers read as lifted paper;
     the "edge" tiers are the deliberate hard-offset signature already used
     by the admin reset modal/buttons, formalized here as reusable tokens
     rather than one-off literals. Never a glow-only shadow. */
  --shadow-xs: 0 1px 2px rgba(23, 26, 25, 0.05);
  --shadow-sm: 0 2px 10px rgba(23, 26, 25, 0.05), 0 1px 2px rgba(23, 26, 25, 0.04);
  --shadow-md: 0 10px 28px rgba(23, 26, 25, 0.09), 0 2px 6px rgba(23, 26, 25, 0.05);
  --shadow-lg: 0 24px 56px rgba(23, 26, 25, 0.14), 0 4px 14px rgba(23, 26, 25, 0.07);
  --shadow-signal: 0 10px 28px rgba(49, 87, 231, 0.2), 0 2px 8px rgba(49, 87, 231, 0.12);
  --shadow-edge: 4px 4px 0 rgba(23, 26, 25, 0.92);
  --shadow-edge-signal: 4px 4px 0 var(--signal);

  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snappy: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-instant: 80ms;
  --duration-fast: 150ms;
  --duration-normal: 240ms;
  --duration-slow: 420ms;
  --duration-slower: 620ms;
  --motion-response: 120ms;
  --motion-open: 180ms;
  --motion-surface-change: 260ms;
  --motion-handoff-sweep: 420ms;
  --motion-wait-cycle: 1200ms;
  --motion-stagger-step: 55ms;

  /* Theater — the one deliberate tonal departure, reserved for the Generate
     & Preview stage so the generated portfolio (the actual artifact) reads
     as the brightest thing on screen. Cobalt is lightened for AA contrast
     against a near-black ground; everything else stays the same hue family
     as the paper surfaces so it never feels like a different product. */
  --theater-bg: #121110;
  --theater-surface: #1a1917;
  --theater-surface-raised: #221f1c;
  --theater-ink: #f3f0e8;
  --theater-ink-secondary: #c7c2b8;
  --theater-graphite: #8d887e;
  --theater-rule: #34312c;
  --theater-rule-subtle: #262420;
  --theater-signal: #6d8dff;
  --theater-signal-subtle: rgba(109, 141, 255, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 1ms;
    --duration-fast: 1ms;
    --duration-normal: 1ms;
    --duration-slow: 1ms;
    --duration-slower: 1ms;
    --motion-response: 1ms;
    --motion-open: 1ms;
    --motion-surface-change: 1ms;
    --motion-handoff-sweep: 1ms;
    --motion-wait-cycle: 1ms;
    --motion-stagger-step: 0ms;
  }
}