/* ============================================================
   variables.css — Design tokens (single source of truth)
   14 Peaks Foundation — "Peak Authority" design system
   ============================================================ */
:root {
  /* ---- Brand colours ---- */
  --charcoal: #18181b;
  --charcoal-soft: #2e3132;
  --ink: #191c1d;
  --ink-muted: #47464b;
  --ink-faint: #77767b;

  --orange: #f58220;
  --orange-deep: #e06a00;
  --gold: #ffb347;
  --peak-gradient: linear-gradient(120deg, #f58220 0%, #ffb347 100%);

  /* ---- Surfaces ---- */
  --white: #ffffff;
  --surface: #f8f9fa;
  --surface-2: #f3f4f5;
  --surface-3: #edeeef;
  --line: #e5e7eb;
  --line-soft: #eef0f1;

  /* ---- On-dark ---- */
  --on-dark: #e7e8e9;
  --on-dark-muted: #b4b6b9;
  --on-dark-faint: #87898c;

  /* ---- Glass ---- */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(24, 24, 27, 0.06);
  --white-10: rgba(255, 255, 255, 0.10);
  --white-14: rgba(255, 255, 255, 0.14);
  --white-38: rgba(255, 255, 255, 0.38);
  --white-82: rgba(255, 255, 255, 0.82);

  /* ---- Typography ---- */
  --font-head: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-data: "Space Grotesk", system-ui, sans-serif;

  --fs-eyebrow: 0.72rem;
  --fs-body: 17px;
  --fs-small: 0.92rem;
  --lh-body: 1.65;

  /* ---- Radius ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow: 0 4px 20px rgba(0,0,0,.04);
  --shadow-md: 0 12px 32px rgba(0,0,0,.07);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.10);
  --shadow-accent: 0 10px 24px rgba(245,130,32,.28);
  --shadow-accent-hover: 0 16px 36px rgba(245,130,32,.40);
  --focus-ring: 0 0 0 4px rgba(245,130,32,.16);

  /* ---- Spacing (8px system) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 44px;
  --sp-8: 64px;

  /* ---- Layout ---- */
  --container: 1320px;
  --container-wide: 1320px;
  --container-narrow: 860px;
  --measure: 68ch;
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(72px, 9vw, 128px);
  --section-y-tight: clamp(48px, 6vw, 80px);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: .25s;
  --t-base: .35s;
  --t-slow: .8s;
}