/* ============================================================================
   tokens.css — the design system's single source of truth.

   Colors are stored as space-separated RGB channels so any token can be used
   at any opacity via rgb(var(--x) / <alpha>). Themes swap the neutral + accent
   channels; the six life-area hues are tuned per theme for contrast.
   ============================================================================ */

:root {
  /* Typography ------------------------------------------------------------ */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
          Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  --font-num: var(--font);

  /* Radius ---------------------------------------------------------------- */
  --r-xs: 7px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-full: 999px;

  /* Spacing --------------------------------------------------------------- */
  --gap: 20px;
  --pad-card: 20px;

  /* Layout ---------------------------------------------------------------- */
  --sidebar-w: 244px;
  --topbar-h: 64px;
  --content-max: 1200px;

  /* Motion ---------------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  /* Life-area hues (shared base; overridden per theme below) -------------- */
  --career: 59 130 246;
  --health: 16 185 129;
  --family: 244 63 94;
  --home: 245 158 11;
  --learning: 139 92 246;
  --reading: 20 184 166;
}

/* ---- Light theme (default) ---------------------------------------------- */
:root,
:root[data-theme='light'] {
  color-scheme: light;

  --bg: 246 246 244;
  --bg-grad-a: 244 245 248;
  --bg-grad-b: 247 246 243;
  --surface: 255 255 255;
  --surface-2: 244 244 241;
  --surface-hover: 238 238 234;

  --border: 231 231 226;
  --border-strong: 218 218 212;

  --text: 26 26 30;
  --text-2: 92 92 102;
  --text-3: 141 141 151;

  --primary: 88 86 214;         /* iris */
  --primary-strong: 74 72 196;
  --on-primary: 255 255 255;

  --shadow-sm: 0 1px 2px rgb(24 24 27 / 0.05), 0 1px 3px rgb(24 24 27 / 0.05);
  --shadow: 0 1px 2px rgb(24 24 27 / 0.04), 0 6px 18px rgb(24 24 27 / 0.06);
  --shadow-lg: 0 10px 30px rgb(24 24 27 / 0.10), 0 4px 10px rgb(24 24 27 / 0.05);

  --ring-track: 235 235 231;
}

/* ---- Dark theme --------------------------------------------------------- */
:root[data-theme='dark'] {
  color-scheme: dark;

  --bg: 15 16 19;
  --bg-grad-a: 18 19 24;
  --bg-grad-b: 14 15 18;
  --surface: 24 25 30;
  --surface-2: 30 31 37;
  --surface-hover: 37 38 45;

  --border: 40 41 48;
  --border-strong: 54 55 63;

  --text: 236 236 240;
  --text-2: 162 162 173;
  --text-3: 110 110 121;

  --primary: 132 132 244;
  --primary-strong: 150 150 250;
  --on-primary: 255 255 255;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35);
  --shadow: 0 2px 6px rgb(0 0 0 / 0.35), 0 12px 30px rgb(0 0 0 / 0.30);
  --shadow-lg: 0 16px 40px rgb(0 0 0 / 0.50);

  --ring-track: 46 47 55;

  /* Brighten area hues for dark surfaces. */
  --career: 96 165 250;
  --health: 52 211 153;
  --family: 251 113 133;
  --home: 251 191 36;
  --learning: 167 139 250;
  --reading: 45 212 191;
}

/* ---- area → local --area mapping ---------------------------------------- */
[data-area='career']   { --area: var(--career); }
[data-area='health']   { --area: var(--health); }
[data-area='family']   { --area: var(--family); }
[data-area='home']     { --area: var(--home); }
[data-area='learning'] { --area: var(--learning); }
[data-area='reading']  { --area: var(--reading); }