/* Design tokens — Kraken Performance Gym
   Source of truth for color, type, spacing, motion, depth. */

:root {
  color-scheme: dark;

  /* ---------- Color (OKLCH) ---------- */
  --ink-1000: oklch(8% 0 0);            /* page bg, per operator #111111 */
  --ink-950:  oklch(11% 0 0);           /* between page and surface */
  --ink-900:  oklch(13% 0 0);           /* section surface */
  --ink-800:  oklch(17% 0.005 200);     /* card surface */
  --ink-700:  oklch(22% 0.005 200);     /* raised, hairline borders */
  --ink-500:  oklch(45% 0.005 200);     /* muted decorations */
  --ink-300:  oklch(70% 0.005 200);     /* secondary text */
  --ink-200:  oklch(82% 0.005 200);     /* tertiary text on surfaces */
  --ink-100:  oklch(95% 0.005 200);     /* primary text (off-white, never #FFF) */

  /* Accent — muted teal: kraken/aquatic semantic, brand-continuity nod */
  --accent-100: oklch(92% 0.04 195);
  --accent-300: oklch(82% 0.07 195);
  --accent-500: oklch(72% 0.10 195);    /* primary accent */
  --accent-600: oklch(64% 0.11 195);
  --accent-700: oklch(55% 0.11 195);    /* press / deep */

  /* Semantic */
  --color-bg: var(--ink-1000);
  --color-surface: var(--ink-900);
  --color-surface-raised: var(--ink-800);
  --color-text: var(--ink-100);
  --color-text-muted: var(--ink-300);
  --color-text-faint: var(--ink-500);
  --color-border: var(--ink-700);
  --color-border-strong: var(--ink-500);
  --color-action: var(--accent-500);
  --color-action-hover: var(--accent-300);
  --color-action-press: var(--accent-700);

  /* ---------- Typography ---------- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --weight-regular: 400;
  --weight-semi: 600;
  --weight-bold: 800;

  /* Fluid type — Major Third (1.250) scale, 320px → 1240px */
  --step--1: clamp(0.875rem, 0.85rem + 0.13vw, 0.9375rem);
  --step-0:  clamp(1.0625rem, 1.04rem + 0.13vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.20rem + 0.25vw, 1.375rem);
  --step-2:  clamp(1.5rem, 1.40rem + 0.50vw, 1.75rem);
  --step-3:  clamp(1.875rem, 1.65rem + 1.13vw, 2.5rem);
  --step-4:  clamp(2.375rem, 1.95rem + 2.13vw, 3.5rem);
  --step-5:  clamp(2.875rem, 2.20rem + 3.38vw, 4.75rem);
  --step-6:  clamp(3.5rem, 2.40rem + 5.50vw, 6.5rem);

  --leading-tight: 1.05;
  --leading-snug: 1.15;
  --leading-normal: 1.4;
  --leading-relaxed: 1.6;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.18em;

  /* ---------- Spacing — 4pt baseline ---------- */
  --space-3xs: 0.25rem;   /* 4 */
  --space-2xs: 0.5rem;    /* 8 */
  --space-xs:  0.75rem;   /* 12 */
  --space-s:   1rem;      /* 16 */
  --space-m:   1.5rem;    /* 24 */
  --space-l:   2rem;      /* 32 */
  --space-xl:  3rem;      /* 48 */
  --space-2xl: 4rem;      /* 64 */
  --space-3xl: clamp(4rem, 4rem + 4vw, 8rem);    /* 64 → 128 */
  --space-section: clamp(3.5rem, 3rem + 4vw, 7.5rem);

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --container-prose: 65ch;
  --gutter: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  --page-pad: clamp(1.25rem, 0.5rem + 3vw, 4rem);

  /* ---------- Radius — varied for hierarchy ---------- */
  --radius-xs: 4px;
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 20px;
  --radius-pill: 9999px;

  /* ---------- Shadows — layered, color-tinted ---------- */
  --shadow-1:
    0 1px 1px hsl(195 30% 4% / 0.40),
    0 2px 2px hsl(195 30% 4% / 0.30),
    0 4px 4px hsl(195 30% 4% / 0.20);
  --shadow-2:
    0 1px 1px hsl(195 30% 4% / 0.50),
    0 2px 2px hsl(195 30% 4% / 0.35),
    0 4px 4px hsl(195 30% 4% / 0.25),
    0 8px 8px hsl(195 30% 4% / 0.20),
    0 16px 16px hsl(195 30% 4% / 0.15);
  --shadow-glow:
    0 0 0 1px hsl(195 30% 60% / 0.25),
    0 6px 24px hsl(195 60% 50% / 0.18);
  --shadow-inset-light: inset 0 1px 0 hsl(0 0% 100% / 0.05);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);

  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;

  /* ---------- Z layers ---------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-overlay: 500;
  --z-modal: 800;
  --z-chat: 9998;
  --z-toast: 9999;
}