/* =====================================================================
   tokens.css — DESIGN TOKENS (the site's "paint box")
   ---------------------------------------------------------------------
   Every color, font, size, radius, shadow and spacing value used on the
   site lives here as a CSS custom property. Change a value here and it
   changes everywhere.

   ✏️ SAFE TO EDIT: any value in this file.
   Tip: keep the zone colors getting darker as the number goes up, and
   re-check text contrast (https://webaim.org/resources/contrastchecker/)
   if you change them.
   ===================================================================== */

:root {
  /* ---------- Ocean zones (purple → black, surface → abyss) ----------
     Sections pick their background from these by depth:
     0 m → zone-0, 40 m → zone-1, 150 m → zone-2, 300 m+ → zone-3 (dark),
     800 m → zone-4, 1200 m → zone-5, 2500 m → zone-6, 4000 m → zone-7. */
  /* Purple and black: deep violet at the surface, fading to near-black. */
  --zone-0: #2a1646;          /* violet surface */
  --zone-1: #231240;          /* dark plum */
  --zone-2: #1d0f37;          /* deep purple */
  --zone-light-end: #1d0f37;  /* (unused while every zone is dark) */
  --zone-3: #180c2e;          /* twilight purple */
  --zone-4: #130a25;          /* dusk black */
  --zone-5: #0f081d;          /* midnight */
  --zone-6: #0b0615;          /* deep midnight */
  --zone-7: #07040d;          /* abyss black */

  /* Light pearly tones, used only for the certificate card */
  --pearl-0: #f7f4fb;
  --pearl-1: #efe9f7;
  --pearl-2: #e2d9f1;

  /* ---------- Accents ---------- */
  --glow: #c9a8ff;            /* purple bioluminescence: main accent on dark */
  --glow-soft: rgb(201 168 255 / 0.16);
  --glow-line: rgb(201 168 255 / 0.24);
  --orchid: #cdb8f5;          /* soft lilac accent on dark */
  --violet: #54449a;          /* dusty violet: main accent on light (AA on all light zones) */
  --violet-soft: rgb(84 68 154 / 0.1);
  --chlorophyll: #c6e39a;     /* phytoplankton green (on dark) */
  --chlorophyll-deep: #4e6b1f;/* phytoplankton green readable on light */
  --coral: #b98cff;           /* bright purple for primary buttons */
  --coral-strong: #a574ff;
  --coral-soft: rgb(185 140 255 / 0.32);

  /* ---------- Text ---------- */
  --ink: #221d3a;             /* text on light */
  --ink-muted: #4f4868;       /* secondary text on light */
  --foam: #f3f0fa;            /* text on dark */
  --foam-muted: #c4bddc;      /* secondary text on dark */

  /* ---------- Surfaces ---------- */
  --white: #ffffff;
  --paper: #ffffff;                         /* CV mode / print background */
  --card-light: rgb(255 255 255 / 0.7);
  --card-light-border: rgb(84 68 154 / 0.14);
  --glass: rgb(243 240 250 / 0.06);
  --glass-strong: rgb(20 10 36 / 0.82);
  --glass-solid: rgb(44 26 74 / 0.62);      /* glass without blur, for small screens */
  --pop-bg: rgb(20 10 36 / 0.97);           /* map popovers & tooltips on dark */
  --glass-light-strong: rgb(247 244 251 / 0.86);
  --glass-border: rgb(201 168 255 / 0.22);
  --scrim: rgb(7 4 13 / 0.9);
  --todo: #ffd43b;                          /* dev-mode TODO badges */
  --todo-ink: #3d2e00;

  /* ---------- Canvas particle tones (ocean-canvas.js reads these) ---------- */
  --plankton-1: #7aa04a;      /* green diatoms */
  --plankton-2: #8a7bc8;      /* lilac dinoflagellates */
  --plankton-3: #5aa597;      /* sea-glass chains */
  --snow: #e9e4f7;            /* marine snow */

  /* ---------- Culture lab (mini-game) ---------- */
  --medium: #d9d2f0;          /* fresh culture medium */
  --bloom: #8cc56a;           /* a dense, happy diatom culture */

  /* ---------- Fonts (bubbly & round, still readable) ---------- */
  --font-display: "Baloo 2", "Fredoka", "Segoe UI Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body: "Fredoka", "Nunito", "Segoe UI Rounded", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  /* ---------- Fluid type scale ---------- */
  --step--1: clamp(0.85rem, 0.83rem + 0.1vw, 0.925rem);
  --step-0: clamp(1.05rem, 1rem + 0.2vw, 1.15rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
  --step-2: clamp(1.45rem, 1.25rem + 0.9vw, 2rem);
  --step-3: clamp(1.9rem, 1.5rem + 1.8vw, 3rem);
  --step-4: clamp(2.4rem, 1.8rem + 3vw, 4rem);
  --step-hero: clamp(3rem, 8vw, 6.75rem);
  --mono-size: 0.82rem;

  /* ---------- Spacing (8px scale) ---------- */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 1rem;     /* 16 */
  --space-4: 1.5rem;   /* 24 */
  --space-5: 2rem;     /* 32 */
  --space-6: 3rem;     /* 48 */
  --space-7: 4rem;     /* 64 */
  --space-8: 6rem;     /* 96 */
  --space-9: 8rem;     /* 128 */
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --max-width: 75rem;  /* 1200px */
  --nav-height: 4rem;

  /* ---------- Shape ---------- */
  --radius-sm: 0.75rem;  /* 12px */
  --radius-md: 1rem;     /* 16px */
  --radius-lg: 1.5rem;   /* 24px */
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 2px rgb(27 18 51 / 0.08), 0 2px 8px rgb(27 18 51 / 0.06);
  --shadow-md: 0 6px 24px rgb(27 18 51 / 0.12);
  --shadow-lg: 0 18px 48px rgb(27 18 51 / 0.2);
  --shadow-glow: 0 0 24px rgb(201 168 255 / 0.4);
  --shadow-coral: 0 6px 20px rgb(165 116 255 / 0.4);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur-med: 400ms;
  --dur-slow: 600ms;

  /* ---------- Layers ---------- */
  --z-canvas: 1;
  --z-content: 2;
  --z-float: 30;
  --z-nav: 40;
  --z-menu: 50;
  --z-toast: 60;
  --z-skip: 70;

  /* ---------- Semantic colors (light water by default) ----------
     Components use THESE, and [data-theme="dark"] swaps them. */
  --c-text: var(--ink);
  --c-muted: var(--ink-muted);
  --c-accent: var(--violet);
  --c-accent-soft: var(--violet-soft);
  --c-card: var(--card-light);
  --c-border: var(--card-light-border);
  --c-bar: var(--glass-light-strong);
  --c-green: var(--chlorophyll-deep);
  --c-focus: var(--violet);
  --c-on-accent: var(--foam);
}

/* Wider side margins on desktop, leaving room for the depth gauge */
@media (min-width: 1024px) {
  :root {
    --gutter: 5rem;
  }
}

[data-theme="dark"] {
  --c-text: var(--foam);
  --c-muted: var(--foam-muted);
  --c-accent: var(--glow);
  --c-accent-soft: var(--glow-soft);
  --c-card: var(--glass);
  --c-border: var(--glass-border);
  --c-bar: var(--glass-strong);
  --c-green: var(--chlorophyll);
  --c-focus: var(--glow);
  --c-on-accent: var(--zone-7);
}