/* ThatOne.App tokens and base styles. Decisions: docs/REDESIGN-PLAN.md section 3.
   Dark values live twice on purpose: once for the system preference, once for the explicit toggle.
   The font files and their face declarations come from the build (/css/fonts.css); none belong here. */

:root {
  --bg-0: #F4F3EE; --bg-1: #FBFAF7; --bg-2: #EAE8E2; --bg-3: #E0DED7;
  --text-1: #1A1916; --text-2: #57554E; --text-3: #6E6C64;
  --border: #E1DFD8; --border-strong: #8C8A82;
  --accent: #0B7A75; --accent-hover: #09615D; --accent-soft: #E6F5F3;
  --success: #2B7A3B; --success-soft: #E6F4E9;
  --warn: #8F5F00; --warn-soft: #FBF1DC;
  --danger: #C0303A; --danger-soft: #FBE7E8;
  --btn-bg: #1A1916; --btn-fg: #FBFAF7;
  --shadow-pop: 0 8px 24px -8px rgb(26 25 21 / .18), 0 1px 2px rgb(26 25 21 / .06);
  --font: "Instrument Sans", "Instrument Sans Fallback", Arial, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: .75rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem; --fs-3xl: 2.25rem; --fs-4xl: 3rem;
  --fs-num-md: 1.5rem; --fs-num-lg: clamp(2.25rem, 12cqi, 3.5rem); --fs-num-xl: clamp(3.5rem, 22cqi, 7rem);
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem;
  --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem;
  --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 20px; --r-pill: 999px;
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --ease: cubic-bezier(.2, .7, .2, 1);
  --control: 2.75rem; --control-sm: 2.25rem; --control-lg: 4rem;
  --nav-h: 3.5rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-0: #141413; --bg-1: #1C1C1A; --bg-2: #262624; --bg-3: #30302D;
    --text-1: #F2F1EC; --text-2: #B4B2AA; --text-3: #8A8982;
    --border: #2E2E2B; --border-strong: #75746D;
    --accent: #5CD6CB; --accent-hover: #7FE2D9; --accent-soft: #10302E;
    --success: #6BCB82; --success-soft: #17301D;
    --warn: #E3B341; --warn-soft: #33290F;
    --danger: #F2746F; --danger-soft: #3A1A1C;
    --btn-bg: #F2F1EC; --btn-fg: #141413;
    --shadow-pop: 0 0 0 1px var(--border-strong);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg-0: #141413; --bg-1: #1C1C1A; --bg-2: #262624; --bg-3: #30302D;
  --text-1: #F2F1EC; --text-2: #B4B2AA; --text-3: #8A8982;
  --border: #2E2E2B; --border-strong: #75746D;
  --accent: #5CD6CB; --accent-hover: #7FE2D9; --accent-soft: #10302E;
  --success: #6BCB82; --success-soft: #17301D;
  --warn: #E3B341; --warn-soft: #33290F;
  --danger: #F2746F; --danger-soft: #3A1A1C;
  --btn-bg: #F2F1EC; --btn-fg: #141413;
  --shadow-pop: 0 0 0 1px var(--border-strong);
  color-scheme: dark;
}

/* base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; background: var(--bg-0); color: var(--text-1); accent-color: var(--accent);
  font: 400 var(--fs-md)/1.5 var(--font); font-feature-settings: "ss01";
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 600; text-wrap: balance; }
h1 { font-size: var(--fs-2xl); letter-spacing: -.01em; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
@media (min-width: 64em) { h1 { font-size: var(--fs-3xl); letter-spacing: -.02em; } }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
textarea { resize: vertical; }
::placeholder { color: var(--text-3); opacity: 1; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums lining-nums; }
/* The ring is the box-shadow; the transparent outline is what forced-colors mode paints instead. */
:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 4px var(--accent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 1.25rem; height: 1.25rem; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -.2em; }
.icon-16 { width: 1rem; height: 1rem; stroke-width: 2; }
.icon-24 { width: 1.5rem; height: 1.5rem; }
.icon-32 { width: 2rem; height: 2rem; stroke-width: 1.5; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; scroll-behavior: auto !important; }
}