/* Design tokens — kevinhe.pro. Source: docs/brand/BRAND_GUIDE.md.
   Every colour, size, and spacing value used by site.css / admin.css lives here. */
:root {
  color-scheme: dark;

  /* Water */
  --abyss: #040914;
  --deep: #081a3a;
  --sea: #0f3470;

  /* Surfaces */
  --surface: rgba(8, 20, 44, 0.72);
  --surface-strong: rgba(10, 24, 52, 0.92);
  --surface-sunken: rgba(4, 9, 20, 0.55);
  --line: rgba(94, 218, 244, 0.18);
  --line-strong: rgba(94, 218, 244, 0.40);

  /* Accent */
  --cyan: #2ec8ea;
  --cyan-bright: #6eeaf8;
  --ice: #c8f6ff;
  --cyan-wash: rgba(46, 200, 234, 0.10);
  --cyan-wash-strong: rgba(46, 200, 234, 0.18);

  /* Text */
  --text: #e8eef7;
  --text-soft: #c9d6e8;
  --text-muted: #8a9bb5;

  /* Signal */
  --reload-blue: #0eb2f5; /* logo slab only */
  --crimson: #ff1f4b; /* selection text, current-page underline, liked state */
  /* Red glow under the nav (and above the footer); same red as the underline. */
  --crimson-glow: 0 6px 22px -6px rgba(255, 31, 75, 0.55);
  --crimson-glow-up: 0 -6px 22px -6px rgba(255, 31, 75, 0.55);
  --danger: #ff6b78;
  --danger-wash: rgba(255, 107, 120, 0.10);
  --danger-line: rgba(255, 107, 120, 0.45);
  --success: #3dcfb0;
  --success-wash: rgba(61, 207, 176, 0.10);
  --success-line: rgba(61, 207, 176, 0.45);

  /* Static water (CSS fallback + admin background) */
  --water-gradient:
    radial-gradient(120% 60% at 30% -10%, rgba(46, 200, 234, 0.10), transparent 60%),
    linear-gradient(180deg, var(--sea) 0%, var(--deep) 42%, var(--abyss) 100%);

  /* Type */
  --font-display: 'Zen Kaku Gothic New', 'IBM Plex Sans', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --step--2: 0.8125rem;
  --step--1: 0.9375rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.5rem;
  --step-3: 2rem;
  --step-4: 2.75rem;
  --step-hero: clamp(2.75rem, 6vw, 4.5rem);

  --leading: 1.65;
  --leading-tight: 1.2;
  --tracking-label: 0.06em;

  /* Space — 4px base */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --gutter: var(--space-6);
  --section-pad: var(--space-20);

  /* Measures */
  --measure-prose: 42rem;
  --measure-site: 72rem;
  --measure-form: 34rem;

  /* Shape */
  --radius: 6px;
  --radius-sm: 4px;
  --radius-lg: 18px;
  --radius-round: 999px;
  --skew: -10deg;
  --hairline: 1px;
  --rule: 2px;

  /* Chrome */
  --nav-h: 64px;
  --logo-h: 32px;
  --tap: 44px;
  --tap-sm: 36px;
  --blur: 14px;
  --focus-ring: 2px solid var(--cyan-bright);
  --focus-offset: 2px;
  --glow: 0 0 0 1px var(--line-strong), 0 0 28px -10px var(--cyan);
  --shadow-panel: 0 18px 48px -24px rgba(0, 0, 0, 0.65);

  /* Motion */
  --ease: 180ms ease-out;
  --fade: 480ms ease-out;
  --sel-glide: 240ms cubic-bezier(0.22, 1, 0.36, 1);
  --sel-snap: 180ms ease-out;

  /* Selection triangle (BRAND_GUIDE §6). The per-label fallback box is the label
     grown by 15% each side and 50% top/bottom; polygons are % of that box and
     match the JS shapes (the current page rests on the hover shape) in public/js/selection.js. */
  --sel-bleed: var(--space-2);
  /* Flat lines the triangle grows out of, in the label pseudo-element box (inset
     -50% / -15%: the label spans 11.5–88.5% across, 25–75% down): through the
     middle of the label, or along its bottom on the current page (the underline). */
  --sel-shape-hidden: polygon(11.5% 50%, 28.5% 50%, 88.5% 50%, 57.7% 50%);
  --sel-shape-hidden-active: polygon(11.5% 75%, 28.5% 75%, 88.5% 75%, 57.7% 75%);
  --sel-shape-hover: polygon(3.8% 80%, 28.5% 10%, 97.7% 37.5%, 57.7% 94%);
  --step-display: clamp(1.875rem, 1.1rem + 2.1vw, 2.75rem);
  --modal-w: 64rem;
  --z-modal: 200;

  /* Layers */
  --z-water: -1;
  --z-nav: 50;
  --z-skip: 100;
}

@media (max-width: 40rem) {
  :root {
    --gutter: var(--space-4);
    --section-pad: var(--space-12);
  }
}