/* =====================================================================
   Tiny Summits · Design tokens
   Direction: "Ink & Alpenglow" refined (v2)
   - Cool palette: violet · teal · pink (no oranges)
   - Editorial serif headings (Instrument Serif) + DM Sans UI
   - Sharp-ish corners, offset "print" shadows on cards
   - Illustrations: clean, geometric, mathematical minimalism
   ===================================================================== */

:root {
  /* ---------- Typography ---------- */
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-ui: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --text-xs: 0.75rem;    /* 12 */
  --text-sm: 0.875rem;   /* 14 */
  --text-base: 1rem;     /* 16 */
  --text-md: 1.125rem;   /* 18 */
  --text-lg: 1.375rem;   /* 22 */
  --text-xl: 1.75rem;    /* 28 */
  --text-2xl: 2.25rem;   /* 36 */
  --text-3xl: 3rem;      /* 48 */

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---------- Spacing (4px grid) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- Shape ---------- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --border-width: 1.5px;
  --offset: 4px;             /* print-shadow offset */

  /* ---------- Layout ---------- */
  --sidebar-width: 248px;
  --sidebar-collapsed: 72px;
  --panel-width: 380px;
  --content-max: 880px;
  --target-min: 40px;        /* min interactive size on desktop (WCAG 2.2 asks ≥24) */

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 420ms;

  /* ---------- Color · LIGHT ---------- */
  color-scheme: light;
  --bg: #F4F3F8;             /* cool lavender-grey paper */
  --surface: #FFFFFF;
  --surface-2: #ECEAF4;
  --surface-3: #E1DDEE;
  --line: #D9D5E6;
  --line-strong: #1C1830;

  --ink: #1C1830;            /* deep aubergine ink */
  --ink-2: #5B5670;
  --ink-3: #6E6984;          /* placeholders, disabled text (≥4.5 on surface) */

  --primary: #5A3E9E;        /* violet: main actions, focus */
  --primary-hover: #4B3189;
  --on-primary: #FFFFFF;
  --primary-soft: #EAE4FA;

  --teal: #0E7C78;           /* progress, success, "on pace" */
  --teal-soft: #DDF2EF;
  --pink: #D6467F;           /* celebration, highlights (decorative) */
  --pink-text: #B02A63;      /* pink usable for text */
  --pink-soft: #FBE3EE;
  --lavender: #B4A4EC;       /* print shadows, decoration */
  --mint: #8FD3C8;
  --blush: #F4B6CF;

  --ahead: #5A3E9E;
  --onpace: #0E6F6B;
  --behind: #855508;         /* muted gold: distinct, never alarming */
  --behind-soft: #F6ECD6;
  --danger: #A3244F;         /* destructive actions only */

  --focus-ring: #5A3E9E;
  --shadow-print: var(--offset) var(--offset) 0 var(--lavender);
  --shadow-print-accent: 3px 3px 0 var(--blush);
  --shadow-float: 0 8px 28px rgb(28 24 48 / .14), 0 1px 3px rgb(28 24 48 / .08);

  --sky-top: #CFC6F2;
  --sky-mid: #F0C6DA;
  --sky-bottom: #E3F1F0;
  --on-sky: #1C1830;
  --on-sky-2: #3E3852;

  /* Heatmap scale (intensity, empty days stay neutral) */
  --heat-0: #E6E3EF;
  --heat-1: #CFC3F3;
  --heat-2: #A792E6;
  --heat-3: #7A5FCB;
  --heat-4: #4E3391;
}

/* ---------- Color · DARK (explicit) ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #13111D;
  --surface: #1C1929;
  --surface-2: #262238;
  --surface-3: #312C47;
  --line: #36314D;
  --line-strong: #CFC9E6;
  --ink: #EEEBF7;
  --ink-2: #ABA5C2;
  --ink-3: #9590AE;
  --primary: #B9A3FF;
  --primary-hover: #CBB9FF;
  --on-primary: #13111D;
  --primary-soft: #2D2650;
  --teal: #5FD3C8;
  --teal-soft: #173634;
  --pink: #FF8FBF;
  --pink-text: #FF9DC6;
  --pink-soft: #3A1D2E;
  --lavender: #5E4EA6;
  --mint: #5FBFB3;
  --blush: #8C3D63;
  --ahead: #B9A3FF;
  --onpace: #6EDBD0;
  --behind: #F2CB6B;
  --behind-soft: #3A3018;
  --danger: #FF8FA8;
  --focus-ring: #CBB9FF;
  --shadow-float: 0 10px 32px rgb(0 0 0 / .45), 0 1px 3px rgb(0 0 0 / .4);
  --sky-top: #1B1838;
  --sky-mid: #3A2350;
  --sky-bottom: #182A33;
  --on-sky: #F3F0FB;
  --on-sky-2: #CFC8E3;
  --heat-0: #24203A;
  --heat-1: #3B3266;
  --heat-2: #5B4AA0;
  --heat-3: #8670D6;
  --heat-4: #B9A3FF;
}

/* ---------- Color · DARK (follow system unless user forced light) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #13111D;
    --surface: #1C1929;
    --surface-2: #262238;
    --surface-3: #312C47;
    --line: #36314D;
    --line-strong: #CFC9E6;
    --ink: #EEEBF7;
    --ink-2: #ABA5C2;
    --ink-3: #9590AE;
    --primary: #B9A3FF;
    --primary-hover: #CBB9FF;
    --on-primary: #13111D;
    --primary-soft: #2D2650;
    --teal: #5FD3C8;
    --teal-soft: #173634;
    --pink: #FF8FBF;
    --pink-text: #FF9DC6;
    --pink-soft: #3A1D2E;
    --lavender: #5E4EA6;
    --mint: #5FBFB3;
    --blush: #8C3D63;
    --ahead: #B9A3FF;
    --onpace: #6EDBD0;
    --behind: #F2CB6B;
    --behind-soft: #3A3018;
    --danger: #FF8FA8;
    --focus-ring: #CBB9FF;
    --shadow-float: 0 10px 32px rgb(0 0 0 / .45), 0 1px 3px rgb(0 0 0 / .4);
    --sky-top: #1B1838;
    --sky-mid: #3A2350;
    --sky-bottom: #182A33;
    --on-sky: #F3F0FB;
    --on-sky-2: #CFC8E3;
    --heat-0: #24203A;
    --heat-1: #3B3266;
    --heat-2: #5B4AA0;
    --heat-3: #8670D6;
    --heat-4: #B9A3FF;
  }
}

/* ---------- Accessibility preferences (set from Settings) ---------- */
:root[data-text-size="large"] { font-size: 112.5%; }
:root[data-text-size="xlarge"] { font-size: 125%; }
:root[data-font="hyperlegible"] {
  --font-ui: "Atkinson Hyperlegible", "DM Sans", system-ui, sans-serif;
  --font-display: "Atkinson Hyperlegible", "DM Sans", system-ui, sans-serif;
}
:root[data-contrast="high"] {
  --ink-2: var(--ink);
  --line: var(--line-strong);
  --border-width: 2px;
}
:root[data-motion="reduced"] {
  --dur-fast: 0ms;
  --dur-base: 0ms;
  --dur-slow: 0ms;
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}