/* The Clearway Collective design tokens, editorial reskin.
   Same brand palette, new type system (Newsreader, Parisienne,
   Space Grotesk), 1.5px ink outlines, warm radial page field.
   Yellow surfaces always carry dark text via --on-sun, both modes. */

:root {
  --ink: #23363d;
  --ink-soft: #5e7178;
  --sun: #ffe682;
  --sun-deep: #f2ca3f;
  --sun-glow: #fff3c4;
  --tide: #3c6675;
  --tide-deep: #23363d;
  --sky: #dcecf3;
  --sky-soft: #eaf3f7;
  --corn: #6f97c9;
  --corn-deep: #557fb6;
  --cream: #f7f3e9;
  --paper: #fffdf6;
  --mist: #e8ecef;
  --sand: #eae5df;
  --line: rgba(35, 54, 61, .14);
  --line-strong: rgba(35, 54, 61, .28);

  /* the warm radial page field */
  --bg-warm: #fff9e6;
  --bg-edge: #eef0e4;

  /* 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: 'Newsreader', 'Georgia', serif;
  --font-script: 'Parisienne', 'Snell Roundhand', cursive;
  --font-body: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 26px;
  --r-xl: 40px;
  --r-pill: 999px;
  --border: 1.5px solid var(--ink);
  --border-thin: 1.5px 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: #22343c;
    --sky: #2e4653;
    --sky-soft: #2a4550;
    --cream: #16262d;
    --paper: #20353d;
    --mist: #2c424b;
    --sand: #2a3e45;
    --line: rgba(242, 238, 227, .16);
    --line-strong: rgba(242, 238, 227, .32);
    --bg-warm: #16262d;
    --bg-edge: #16262d;
    --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: #22343c;
  --sky: #2e4653;
  --sky-soft: #2a4550;
  --cream: #16262d;
  --paper: #20353d;
  --mist: #2c424b;
  --sand: #2a3e45;
  --line: rgba(242, 238, 227, .16);
  --line-strong: rgba(242, 238, 227, .32);
  --bg-warm: #16262d;
  --bg-edge: #16262d;
  --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);
}