/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5
 * genre: editorial social product
 * macrostructure: community broadsheet / focused workbench
 * design-system: DESIGN.md · designed-as-app
 * skin: morning light — warm, cozy, everyday (2026-09-19)
 */

:root {
  /* Soft accent wash for selected/active surfaces. Declared here because
   * nine refactor.css rules consume it; before 2026-09-27 it was never
   * declared and every active/selected state rendered transparent — users
   * reported the affected surfaces as "not loading". */
  --accent-soft: var(--color-accent-soft);
  --color-paper: oklch(99.1% 0.005 85);
  --color-paper-strong: oklch(99.4% 0.003 85);
  --color-ink: oklch(25% 0.012 55);
  --color-night: oklch(21% 0.008 60);
  --color-night-ink: oklch(92% 0.01 85);
  --color-accent: oklch(52% 0.1 45);
  --color-accent-ink: oklch(99% 0.006 85);
  --color-accent-soft: oklch(93% 0.025 60);
  --color-teal: oklch(48% 0.05 155);
  --color-teal-soft: oklch(94% 0.015 150);
  --color-signal: oklch(78% 0.09 85);
  --color-signal-ink: oklch(30% 0.035 70);
  --color-muted: oklch(95.5% 0.008 85);
  --color-muted-text: oklch(47% 0.014 60);
  --color-sheet-wash: oklch(94.5% 0.012 85);
  --color-sheet-surface: oklch(98.8% 0.008 87);
  --color-sheet-ink: oklch(46% 0.028 55);
  --color-danger: oklch(52% 0.14 25);
  /* The four topics are four lighter, less saturated exposures of the same
   * room — apricot coral for the self, rose for feeling, honey for relating,
   * mint for living. Fresh, never muddy. Dark-mode topics live in
   * tokens.css .dark, which this file does not redefine. */
  --color-topic-self: oklch(50% 0.08 45);
  --color-topic-emotion: oklch(51% 0.07 25);
  --color-topic-relationship: oklch(51% 0.055 70);
  --color-topic-life: oklch(49% 0.05 150);
  --header-height: 5rem;
  --radius-control: 0.875rem;
  --radius-panel: 1.375rem;
  --radius-media: 1.125rem;
  --tracking-display: -0.015em;
  --tracking-title: -0.01em;
}

.dark {
  --color-paper: var(--color-night);
  --color-paper-strong: oklch(27% 0.01 60);
  --color-ink: var(--color-night-ink);
  --color-accent: oklch(74% 0.075 65);
  --color-accent-ink: oklch(20% 0.02 55);
  --color-accent-soft: oklch(30% 0.03 60);
  --color-teal: oklch(72% 0.045 150);
  --color-teal-soft: oklch(30% 0.022 150);
  --color-signal: oklch(80% 0.09 82);
  --color-muted: oklch(29% 0.01 60);
  --color-muted-text: oklch(76% 0.012 85);
  --color-sheet-wash: oklch(29% 0.014 65);
  --color-sheet-surface: oklch(26% 0.01 62);
  --color-sheet-ink: oklch(80% 0.028 85);
  --color-danger: oklch(72% 0.12 25);
  --color-topic-self: oklch(75% 0.09 45);
  --color-topic-emotion: oklch(78% 0.08 25);
  --color-topic-relationship: oklch(80% 0.06 70);
  --color-topic-life: oklch(78% 0.05 150);
  /* The night-lamp elevation ladder (2026-09-30). The page stays at 21% so
   * the room stays dark, but cards used to sit only four points above it —
   * quiz, community, and assessment cards would not float off the page, and
   * the light-skin border mixes (18% / 11% ink) all but vanished. Cards now
   * lift to 26-27%, header/footer/panels to 30%, and dark draws its own
   * stronger borders instead of borrowing the light ones. */
  --surface-contrast: oklch(30% 0.012 60);
  --surface-contrast-ink: var(--color-night-ink);
  --line: color-mix(in oklab, var(--ink) 24%, transparent);
  --soft-line: color-mix(in oklab, var(--ink) 17%, transparent);
}

html { scrollbar-color: color-mix(in oklab, var(--accent) 55%, transparent) var(--paper); }

/* Autofill: Chrome paints filled fields with its own pale-blue canvas and
 * ink, which on paper reads as a rendering glitch. Pin both back to the
 * writing-field material — the inset shadow is the only reliable way to
 * repaint the autofill background, and it adapts to every skin via the
 * tokens. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  box-shadow: 0 0 0 1000px var(--paper-strong) inset;
  transition: background-color 99999s ease-in-out 0s;
}