/* ==========================================================================
   Design tokens — "Clearwater Deep"
   Evolution of Clearwater Minimal: same teal identity and structure, pushed
   for contrast and depth. Changes vs. the original set are marked NEW.
   ========================================================================== */

:root {
  /* Color — dark (site default; the topbar switch sets data-theme).
     color-scheme keeps native form controls/scrollbars in step.
     The page/surface pair is spread further apart than before so cards read
     as objects sitting on the page rather than tinted patches of it. */
  color-scheme: dark;
  --color-bg: #090C0E;
  --color-bg-alt: #10161A;
  --color-surface: #171F24;
  --color-surface-2: #1E272D;      /* NEW — raised surface for hover states */
  --color-text: #F4F7F6;
  --color-text-muted: #A2ADB1;
  --color-border: #2A343A;
  --color-border-strong: #3A464D;  /* NEW */
  --color-accent: #4FB6C9;
  --color-accent-strong: #7ED0DE;
  --color-accent-tint: #12262A;
  /* NEW — a single hue-shifted partner for the accent. Same lightness and
     chroma, hue rotated toward green, so gradients between the two read as
     one material catching the light rather than as two brand colors. */
  --color-accent-2: #63D0AE;
  /* Text/icon color for anything sitting ON an accent fill. The accent is
     light in dark mode and dark in light mode, so this has to flip with the
     theme — hard-coding either end fails one of them. */
  --color-on-accent: #052226;
  --color-header-bg: rgba(9, 12, 14, 0.72);
  --color-overlay: rgba(0, 0, 0, 0.6);

  --color-footer-bg: #10161A;
  --color-footer-text: #F4F7F6;
  --color-footer-muted: rgba(244, 247, 246, 0.68);
  --color-footer-rule: rgba(255, 255, 255, 0.10);
  /* The footer stays dark in both themes, so it needs an accent that does the
     same. --color-accent-strong flips to a deep teal under light and goes
     nearly invisible down here; this one is the dark-theme value, always. */
  --color-footer-accent: #7ED0DE;

  /* NEW — gradients and glows. Declared once so every accent surface in the
     site (icon tiles, rules, buttons, progress) is cut from the same cloth. */
  --grad-accent: linear-gradient(118deg, var(--color-accent) 0%, var(--color-accent-2) 100%);
  --grad-accent-fade: linear-gradient(90deg, transparent, var(--color-accent) 25%, var(--color-accent-2) 75%, transparent);
  --tint-accent-soft: linear-gradient(140deg, rgba(79, 182, 201, 0.20), rgba(99, 208, 174, 0.08));
  --glow-accent: 0 10px 34px -12px rgba(79, 182, 201, 0.55);
  --glow-accent-lg: 0 18px 50px -14px rgba(79, 182, 201, 0.62);
  --ring-accent: rgba(79, 182, 201, 0.34);
  /* Ambient wash painted behind the whole page (base.css) */
  --wash-1: rgba(79, 182, 201, 0.10);
  --wash-2: rgba(99, 208, 174, 0.075);
  --grain-o: 0.038;

  /* Type — display face is Archivo, a variable grotesk. The width axis is
     what makes the headings land: they are set slightly expanded, which
     reads as confident at large sizes without needing extra weight. */
  --font-body: "Open Sans", system-ui, -apple-system, sans-serif;
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --wdth-display: 108%;   /* NEW — section headings */
  --wdth-hero: 115%;      /* NEW — hero only */

  --fs-sm: clamp(0.83rem, 0.8rem + 0.15vw, 0.95rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-lg: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  --fs-xl: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);
  --fs-2xl: clamp(1.85rem, 1.45rem + 1.7vw, 2.7rem);
  --fs-3xl: clamp(2.1rem, 1.6rem + 2.5vw, 3.25rem);
  --fs-4xl: clamp(2.6rem, 1.55rem + 4.4vw, 4.75rem);  /* NEW — hero headline */

  --lh-tight: 1.15;
  --lh-hero: 1.02;  /* NEW */
  --lh-normal: 1.6;

  /* Spacing scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: clamp(2.5rem, 1.9rem + 1.6vw, 3.5rem);

  /* Vertical padding for content sections (its only consumer). Sized so a
     typical section fits inside (viewport − sticky header) on ~800px-tall
     laptop windows. */
  --section-pad: clamp(2.75rem, 1.9rem + 1.8vw, 3.75rem);

  --container-w: 1180px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);

  /* Radii & shadow */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.55);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* Symmetric sine-like curve — for looping ambient motion, where an
     ease-out would make every cycle visibly restart */
  --ease-soft: cubic-bezier(0.45, 0, 0.55, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;

  /* Scroll-reveal. --ease-back overshoots slightly, so it is applied to
     transform only — on opacity it would overshoot past 1 and just clamp. */
  --ease-back: cubic-bezier(0.22, 1.28, 0.36, 1);
  --reveal-dur: 700ms;
  --reveal-fade: 450ms;
  --reveal-step: 80ms;
  --reveal-y: 40px;
  /* Lateral travel for the data-reveal="left|right" variants (base.css) */
  --reveal-x: 48px;

  /* Decorative glass/water artwork. Alphas stay low enough that no shape
     can affect text contrast; dark mode needs higher values because
     low-alpha light tones read as grey haze on near-black. */
  --deco-tint: #4FB6C9;
  --deco-glass: #9FD9E4;
  --deco-o-front: 0.16;
  --deco-o-mid: 0.11;
  --deco-o-back: 0.08;
  --deco-stroke-o: 0.24;

  /* Rain-on-the-glass droplets (.droplet, components.css). Highlight has to
     shout a little against the near-black page; shade and cast stay gentle
     so the drops read as glass, not smudges. The interior tint is all but
     off in dark mode — the backdrop brightness does the separating. */
  --drop-hi: rgba(255, 255, 255, 0.5);
  --drop-shade: rgba(4, 10, 13, 0.26);
  --drop-cast: rgba(2, 6, 8, 0.3);
  --drop-tint: rgba(159, 217, 228, 0.04);
  --drop-edge: rgba(255, 255, 255, 0.07);
  --drop-glint: rgba(255, 255, 255, 0.9);
  --drop-backdrop: blur(0.6px) saturate(1.25) brightness(1.02) contrast(1.05);

  --header-h: 76px;
  /* Fixed so the hero can subtract exactly the chrome above it */
  --topbar-h: 42px;

  /* Device safe areas. Non-zero only where the viewport meta opts in with
     viewport-fit=cover and the device has a notch / Dynamic Island / home
     indicator (iPhone) or a floating URL pill (iOS 26 Safari). Everything
     that touches a screen edge — topbar, sticky header plate, drawer,
     floating discs, lightbox controls, container gutters — reads these so
     the page behaves like a native app: chrome material runs to the edge,
     content and controls stop at the inset. Desktop resolves to 0px. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* Written per-frame by initScrollProgress() — 0 at the top of the document,
     1 at the bottom. Drives the header rule and the back-to-top ring. */
  --scroll-progress: 0;
}

/* Light theme — opted into via the topbar switch (persisted in localStorage) */
:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: #F7F8F6;
  --color-bg-alt: #ECF0EF;
  --color-surface: #FFFFFF;
  --color-surface-2: #F4F7F7;
  --color-text: #10161A;
  --color-text-muted: #48535A;
  --color-border: #DDE4E4;
  --color-border-strong: #C6D1D1;
  --color-accent: #1E7A8C;
  --color-accent-strong: #145A68;
  --color-accent-tint: #E4F1F3;
  --color-accent-2: #1C8A72;
  --color-on-accent: #FFFFFF;
  --color-header-bg: rgba(247, 248, 246, 0.72);
  --color-overlay: rgba(17, 19, 21, 0.55);

  --color-footer-bg: #10161A;
  --color-footer-text: #F7F8F6;
  --color-footer-muted: rgba(247, 248, 246, 0.72);
  --color-footer-rule: rgba(255, 255, 255, 0.12);
  --color-footer-accent: #7ED0DE;   /* deliberately not flipped — see :root */

  --tint-accent-soft: linear-gradient(140deg, rgba(30, 122, 140, 0.14), rgba(28, 138, 114, 0.06));
  --glow-accent: 0 10px 30px -14px rgba(30, 122, 140, 0.55);
  --glow-accent-lg: 0 18px 44px -16px rgba(30, 122, 140, 0.5);
  --ring-accent: rgba(30, 122, 140, 0.28);
  --wash-1: rgba(30, 122, 140, 0.07);
  --wash-2: rgba(28, 138, 114, 0.05);
  --grain-o: 0.022;

  --deco-tint: #1E7A8C;
  --deco-glass: #FFFFFF;
  --deco-o-front: 0.10;
  --deco-o-mid: 0.07;
  --deco-o-back: 0.05;
  --deco-stroke-o: 0.18;

  /* Light page: a white specular is invisible on near-white unless the
     drop's body separates from the page first — so the backdrop darkens
     slightly under the drop and a cool interior tint gives the highlight
     and glint something to register against. */
  --drop-hi: rgba(255, 255, 255, 0.85);
  --drop-shade: rgba(10, 24, 28, 0.26);
  --drop-cast: rgba(10, 20, 24, 0.22);
  /* Body nearly empty — a filled gray disc reads as a button. The identity
     on white lives in the edge: the meniscus ring and this thin line. */
  --drop-tint: rgba(70, 95, 105, 0.04);
  --drop-edge: rgba(75, 100, 112, 0.3);
  /* A white glare is invisible on a white page — the moving reflection
     shows as the cool gray-blue of glass catching a window instead. */
  --drop-glint: rgba(110, 145, 160, 0.6);
  --drop-backdrop: blur(0.7px) saturate(1.08) brightness(0.96) contrast(1.06);

  --shadow-sm: 0 2px 10px rgba(17, 19, 21, 0.06);
  --shadow-md: 0 12px 32px rgba(17, 19, 21, 0.10);
  --shadow-lg: 0 24px 60px rgba(17, 19, 21, 0.16);
}