/* ═══════════════════════════════════════════════════════════════════════
   FILE / ROOT:  assets/css/tokens.css  (mYa Solutions website)
   DESCRIPTION:  The one place colour, type and spacing live — the "Windows"
                 visual language. White sand is most of the page, warm sand
                 for surfaces, water only where you act or where Jean points.
                 Sunlight lives only inside the windows. Two times of day:
                 Daylight (default) and Dusk ([data-theme="dusk"]).
                 Every text pair meets WCAG AA in both.
   ═══════════════════════════════════════════════════════════════════════ */
@import url('fonts.css');

:root {
  /* Ground and ink */
  --bg: oklch(98.8% 0.007 85);          /* white sand — the page */
  --bg-2: oklch(95.5% 0.018 85);        /* warm sand — surfaces, bands */
  --ink: oklch(24% 0.035 240);          /* deep water — body text */
  --ink-soft: oklch(40% 0.04 235);
  --line: oklch(40% 0.03 75 / 0.16);
  --frame: oklch(99.6% 0.004 85);       /* the window frame */
  --shadow: oklch(55% 0.05 75 / 0.18);

  /* Water — only where you act */
  --accent: oklch(46% 0.09 215);        /* reef — labels, links */
  --sea: oklch(80% 0.12 192);           /* turquoise — the one action per screen */
  --sea-ink: oklch(22% 0.04 230);
  --halo: oklch(82% 0.12 192 / 0.55);   /* Jean's highlight */

  /* Inside the windows */
  --interior: oklch(28% 0.04 230);
  --night-1: oklch(20% 0.04 240);
  --night-2: oklch(30% 0.07 220);
  --glow: oklch(88% 0.1 80 / 0.34);     /* sunlight */
  --on-window: oklch(98% 0.008 85);
  --on-window-soft: oklch(90% 0.02 200);
  --on-window-accent: oklch(84% 0.11 190);

  /* Type */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Rhythm (rem, so the Aa control scales everything) */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --max: 85rem;
  --band-pad: clamp(4.5rem, 10vw, 8rem);
  --radius-window: 1.5rem;
  --radius-pane: 1rem;
  --radius-card: 1.125rem;
  --frame-pad: clamp(0.5rem, 1.2vw, 0.875rem);
  --py: 0;
}

:root[data-theme="dusk"] {
  --bg: oklch(20% 0.04 240);
  --bg-2: oklch(25% 0.05 230);
  --ink: oklch(97% 0.01 90);
  --ink-soft: oklch(84% 0.03 200);
  --line: oklch(97% 0.01 90 / 0.16);
  --frame: oklch(27% 0.05 232);
  --shadow: oklch(10% 0.04 240 / 0.6);
  --accent: oklch(84% 0.11 190);
  --sea: oklch(82% 0.12 190);
  --sea-ink: oklch(20% 0.04 235);
  --halo: oklch(82% 0.12 190 / 0.6);
  --interior: oklch(30% 0.05 230);
  --glow: oklch(86% 0.12 78 / 0.45);
}