/* Design tokens. 8px spacing scale; colors chosen for WCAG AA on their surfaces. */
:root {
  color-scheme: light;
  --c-bg: #FAF8F4;            /* warm ivory */
  --c-surface: #FFFFFF;
  --c-surface-2: #F3F0EA;
  --c-text: #1F2B42;          /* deep navy */
  --c-text-muted: #4D586B;
  --c-border: #E4DED3;
  --c-lavender: #EDE9FA;
  --c-lavender-strong: #D9D1F5;
  --c-lavender-text: #4B3F8A;
  --c-teal: #2F7A71;          /* AA-safe teal for text and buttons */
  --c-teal-soft: #3C8F85;     /* brand teal, decorative */
  --c-teal-tint: #E2F1EE;
  --c-amber: #E0A33B;
  --c-amber-tint: #FCF1DC;
  --c-amber-text: #7A4E00;
  --c-danger: #A33A3A;
  --c-danger-tint: #FBE9E7;
  --c-success: #2F7A4F;
  --c-success-tint: #E3F2E8;
  --c-on-primary: #FFFFFF;
  --c-primary: #1F2B42;
  --c-primary-hover: #2D3D5C;
  --c-focus: #6A55D8;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-serif: Georgia, "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --lh: 1.6;

  --s-1: 4px;
  --s0: 8px;
  --s1: 16px;
  --s2: 24px;
  --s3: 32px;
  --s4: 48px;
  --s5: 64px;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(31, 43, 66, 0.06);
  --shadow: 0 1px 2px rgba(31, 43, 66, 0.05), 0 4px 16px rgba(31, 43, 66, 0.06);

  --reading-width: 720px;
  --sidebar-width: 264px;
  --bottom-nav-h: 64px;
  --tap: 44px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 180ms;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --c-bg: #151C2B;
  --c-surface: #1D2638;
  --c-surface-2: #232D41;
  --c-text: #EEEAE3;
  --c-text-muted: #B4BBC8;
  --c-border: #333F57;
  --c-lavender: #2A2846;
  --c-lavender-strong: #3A3762;
  --c-lavender-text: #CFC6FF;
  --c-teal: #6CC4B8;
  --c-teal-soft: #4FA79B;
  --c-teal-tint: #1D3B3A;
  --c-amber: #E8B04F;
  --c-amber-tint: #3A2F1C;
  --c-amber-text: #F2CB82;
  --c-danger: #F08C84;
  --c-danger-tint: #3C2329;
  --c-success: #7FD1A0;
  --c-success-tint: #1F3A2C;
  --c-on-primary: #151C2B;
  --c-primary: #EEEAE3;
  --c-primary-hover: #FFFFFF;
  --c-focus: #A99BFF;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 4px 16px rgba(0, 0, 0, 0.25);
}