/* The Clearway Collective design tokens.
   Light is canonical. Dark keeps the brand: deep tide as the base,
   cream as the ink, sun stays sun. Yellow surfaces always carry
   dark text via --on-sun, in both modes. */

:root {
  --ink: #23363d;
  --ink-soft: #5f7682;
  --sun: #ffe682;
  --sun-deep: #f3d35a;
  --sun-glow: #fff3c4;
  --tide: #518597;
  --tide-deep: #3c6675;
  --sky: #c5d8e6;
  --sky-soft: #dde9f1;
  --corn: #6f97c9;
  --corn-deep: #557fb6;
  --cream: #f7f4ec;
  --paper: #fcfbf6;
  --mist: #e8ecef;
  --sand: #eae5df;
  --line: rgba(35, 54, 61, .14);
  --line-strong: rgba(35, 54, 61, .28);

  /* text that sits on permanently dark surfaces (sidebar, teal cards) */
  --text-on-dark: rgba(247, 244, 236, .95);
  --text-on-dark-muted: rgba(247, 244, 236, .85);

  /* text that sits on sun yellow, identical in both modes */
  --on-sun: #23363d;

  /* status, warm and on-brand */
  --positive: #4f8a6d;
  --alert: #b4543a;

  /* chart series, validated for contrast and colour-vision separation
     order is fixed: 1 sleep, 2 energy, 3 mood, 4 skin */
  --chart-1: #0f7fa8;
  --chart-2: #b08828;
  --chart-3: #4a79c4;
  --chart-4: #358a58;
  --chart-grid: rgba(35, 54, 61, .12);

  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-script: 'Pinyon Script', 'Snell Roundhand', cursive;
  --font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 40px;
  --r-pill: 999px;
  --border: 3px solid var(--ink);
  --border-thin: 2px solid var(--ink);
  --shadow-soft: 0 18px 40px -26px rgba(35, 54, 61, .45);
  --shadow-soft-sm: 0 8px 20px -14px rgba(35, 54, 61, .4);
  --shadow-pop: 7px 7px 0 var(--ink);
  --shadow-pop-teal: 14px 14px 0 var(--tide);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* Dark set, applied when the OS asks for it and the user has not overridden,
   or when the user explicitly picks dark in Settings. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f2eee3;
    --ink-soft: #aabfc7;
    --sun-deep: #e3c34e;
    --sun-glow: #2c4149;
    --tide: #8db8c8;
    --tide-deep: #2c4750;
    --sky: #31505e;
    --sky-soft: #2a4550;
    --cream: #16262d;
    --paper: #20353d;
    --mist: #2c424b;
    --sand: #2a3e45;
    --line: rgba(242, 238, 227, .16);
    --line-strong: rgba(242, 238, 227, .32);
    --chart-1: #2b8fb8;
    --chart-2: #c08a20;
    --chart-3: #5b83d6;
    --chart-4: #3d9861;
    --chart-grid: rgba(242, 238, 227, .14);
    --shadow-soft: 0 18px 40px -26px rgba(0, 0, 0, .7);
    --shadow-soft-sm: 0 8px 20px -14px rgba(0, 0, 0, .6);
  }
}

:root[data-theme="dark"] {
  --ink: #f2eee3;
  --ink-soft: #aabfc7;
  --sun-deep: #e3c34e;
  --sun-glow: #2c4149;
  --tide: #8db8c8;
  --tide-deep: #2c4750;
  --sky: #31505e;
  --sky-soft: #2a4550;
  --cream: #16262d;
  --paper: #20353d;
  --mist: #2c424b;
  --sand: #2a3e45;
  --line: rgba(242, 238, 227, .16);
  --line-strong: rgba(242, 238, 227, .32);
  --chart-1: #2b8fb8;
  --chart-2: #c08a20;
  --chart-3: #5b83d6;
  --chart-4: #3d9861;
  --chart-grid: rgba(242, 238, 227, .14);
  --shadow-soft: 0 18px 40px -26px rgba(0, 0, 0, .7);
  --shadow-soft-sm: 0 8px 20px -14px rgba(0, 0, 0, .6);
}