/* Krysentis design tokens v2 — "light in crystal". Generated alongside tokens.json
   (keep both in sync). A bright, luminous turquoise field; deep-teal ink; white
   is the crystal; one small violet (core + h1 gradient word) and nowhere else.
   Every token here is read by styles.css / parallax.css / bg3d.js — nothing is
   declared that the page does not use.
   Legacy names (--bg-void, --crystal, --aqua, --text…) are kept as aliases so
   styles.css renders unchanged until it is remapped to the --field/--ink roles. */
:root {
  /* the field — light refracted inside a crystal */
  --field-0: #dffdf9;   /* lightest aqua, top of the hero */
  --field-1: #7ff0e4;   /* light turquoise */
  --field-2: #22d3c5;   /* vivid turquoise, mid-page */
  --field-3: #0fb5aa;   /* deep turquoise: depth only, never a bare text background */

  /* ink */
  --ink: #052b2c;
  --ink-muted: #185051;               /* 6.72:1 on field-1, 4.86:1 bare on field-2 — inside glass, or top/bottom of page */
  --ink-soft: #0c3d3e;                /* secondary copy on the BARE field anywhere: 4.68:1 on field-3, 6.4:1 on field-2 */
  --ink-faint: rgba(5, 43, 44, 0.55);
  --ink-inverse: #f4fffd;             /* on --ink fills only (2.5:1 on field-3 — never there) */

  /* accent ink — deep turquoise for eyebrows, labels, dots, tags */
  --accent: #05524e;                  /* 6.67:1 on field-1, 4.82:1 bare on field-2 */
  --accent-soft: rgba(5, 82, 78, 0.10);

  /* glass — the scrims that hold copy over the vivid field */
  --glass: rgba(255, 255, 255, 0.52);
  --glass-strong: rgba(255, 255, 255, 0.72);
  --glass-edge: rgba(255, 255, 255, 0.85);
  --glass-blur: 18px;

  /* the crystal */
  --crystal: #ffffff;                 /* glints, crystal edges, blooms */
  --crystal-core: #7c5cff;            /* the ONE violet: crystal core + h1 gradient word */
  --crystal-core-soft: rgba(124, 92, 255, 0.14);

  /* life accent — reserved by the brief for a sparse, decorative leaf-green
     signal (3.2:1 on field-1; never text). Nothing on the page draws it yet. */
  --bio: #0d8a5f;

  /* lines */
  --line: rgba(5, 43, 44, 0.14);
  --line-strong: rgba(5, 43, 44, 0.32);
  --line-neutral: rgba(5, 43, 44, 0.08);

  /* gradients */
  /* the field, painted once on <body>: the top stops are pinned in viewport
     lengths so the hero's lower half is already vivid turquoise on any page
     height; from there it deepens to field-3 mid-page and lifts again toward
     contact — light entering and leaving the crystal. */
  --grad-field: linear-gradient(180deg,
    var(--field-0) 0, var(--field-1) 36vh, var(--field-2) 92vh,
    var(--field-3) 56%, var(--field-2) 74%, var(--field-1) 90%, var(--field-0) 100%);
  /* h1 word: violet core -> deep teal. Both ends hold >= 3:1 on the hero field
     (violet 3.1:1 behind the h1 at 1440, 3.47:1 at 390; #087a72 3.66:1 / 4.16:1). */
  --grad-word-end: #087a72;
  --grad-word: linear-gradient(90deg, var(--crystal-core) 0%, var(--grad-word-end) 100%);
  --grad-field-fade: linear-gradient(180deg, rgba(223, 253, 249, 0) 0%, var(--field-0) 100%);

  /* state */
  --focus-ring: 0 0 0 2px var(--field-0), 0 0 0 4px var(--ink);
  --selection-bg: rgba(5, 43, 44, 0.18);

  /* ---- legacy aliases (styles.css v1 names) ---- */
  --bg-void: var(--field-1);          /* solid fallback; the page paints --grad-field */
  --bg-surface: var(--glass);
  --bg-elev: var(--glass-strong);
  --crystal-deep: var(--field-3);
  --crystal-soft: var(--accent-soft);
  --crystal-glow: rgba(255, 255, 255, 0.55);
  --aqua: var(--field-3);
  --aqua-soft: rgba(15, 181, 170, 0.16);
  --text: var(--ink);
  --text-muted: var(--ink-muted);
  --text-faint: var(--ink-faint);
  --text-on-accent: var(--ink-inverse);
  --grad-crystal: var(--grad-word);
  --grad-void-fade: var(--grad-field-fade);

  /* type */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.5rem;
  --fs-3xl: clamp(2.5rem, 6vw, 4.5rem);
  --fs-hero: clamp(2.75rem, 8vw, 6rem);
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.6;
  --ls-eyebrow: 0.14em;
  --ls-display: -0.02em;

  /* spacing (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --sp-11: 192px;
  --gutter: 16px;
  --gutter-desktop: 32px;
  --content-max: 1200px;
  --prose-max: 68ch;
  --section-y: clamp(96px, 14vh, 192px);

  /* radii */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* shadow */
  --shadow-elev: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 24px 56px -28px rgba(5, 43, 44, 0.35);
  --shadow-glow: 0 0 56px -12px rgba(255, 255, 255, 0.9);
  --shadow-glass: 0 0 0 1px rgba(255, 255, 255, 0.45) inset, 0 16px 40px -24px rgba(5, 43, 44, 0.30);

  /* motion */
  --d-instant: 120ms;
  --d-fast: 200ms;
  --d-base: 360ms;
  --d-slow: 700ms;
  --d-cinematic: 1400ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
  /* parallax depths and pointer amplitude live in parallax.js (COMPOSITIONS);
     parallax.css exposes the per-section --plx-* overrides. */

  /* layout */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --z-bg3d: 0;                        /* parallax stacks sit at z-index -1 inside each isolated section */
  --z-content: 1;
  --z-nav: 10;
  --z-overlay: 100;

  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-base: 120ms;
    --d-slow: 160ms;
    --d-cinematic: 200ms;
  }
}