/* ============================================================
   Snake River Hydraulics — Design Tokens
   Steel-blue + charcoal + safety-yellow · Archivo + Inter
   ============================================================ */
:root {
  /* ---- Charcoal / ink ---- */
  --ink-900: #080b10;
  --ink-800: #0d1219;
  --ink-700: #131b26;
  --ink-600: #1c2733;
  --ink-500: #293644;

  /* ---- Steel blue ---- */
  --steel-900: #0e2a45;
  --steel-800: #123a5e;
  --steel-700: #17507f;
  --steel-600: #1c69a3;
  --steel-500: #2b83c6;
  --steel-400: #4f9fd8;
  --steel-300: #8fc2e8;
  --steel-100: #dcebf7;
  --steel-50:  #eef5fc;

  /* ---- Safety yellow (accent) ---- */
  --safety-700: #b87d00;
  --safety-600: #dd9a00;
  --safety-500: #ffc61a;
  --safety-400: #ffd451;
  --safety-100: #fff2cc;

  /* ---- Neutrals ---- */
  --paper: #ffffff;
  --mist:  #f3f6fa;
  --mist-2:#e8eef5;
  --line:  #dbe3ec;
  --line-strong: #c3cfdb;
  --body:  #33414f;
  --muted: #5c6b7a;
  --on-dark: #eaf1f8;
  --on-dark-muted: #a4b4c4;
  --on-dark-line: rgba(255,255,255,.12);

  /* ---- Semantic ---- */
  --bg: var(--paper);
  --text: var(--body);
  --heading: var(--ink-800);
  --brand: var(--steel-700);
  --brand-deep: var(--steel-900);
  --brand-bright: var(--steel-500);
  --accent: var(--safety-500);
  --accent-hover: var(--safety-400);
  --accent-ink: var(--ink-900);      /* text on yellow */

  /* ---- Typography ---- */
  --font-head: 'Archivo', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --fs-hero:    clamp(2.6rem, 5.6vw, 4.9rem);
  --fs-h1:      clamp(2.1rem, 4.4vw, 3.4rem);
  --fs-h2:      clamp(1.7rem, 3.1vw, 2.5rem);
  --fs-h3:      clamp(1.24rem, 1.9vw, 1.55rem);
  --fs-lead:    clamp(1.06rem, 1.4vw, 1.28rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9rem;
  --fs-xs:      0.8rem;
  --fs-eyebrow: 0.78rem;

  --lh-tight: 1.05;
  --lh-head: 1.12;
  --lh-body: 1.65;
  --tracking-eyebrow: 0.16em;

  /* ---- Spacing (8pt) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-y: clamp(3.75rem, 7vw, 7rem);

  /* ---- Layout ---- */
  --maxw: 1200px;
  --maxw-wide: 1320px;
  --maxw-narrow: 820px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --header-h: 66px;
  --topbar-h: 38px;

  /* ---- Radius ---- */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---- Shadows (steel-tinted) ---- */
  --shadow-sm: 0 1px 2px rgba(14,42,69,.06), 0 1px 3px rgba(14,42,69,.09);
  --shadow: 0 6px 18px -6px rgba(14,42,69,.16), 0 3px 8px -4px rgba(14,42,69,.10);
  --shadow-lg: 0 24px 48px -18px rgba(14,42,69,.28), 0 10px 22px -14px rgba(14,42,69,.18);
  --shadow-accent: 0 12px 26px -8px rgba(221,154,0,.45);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: .18s;
  --dur: .32s;
  --dur-slow: .6s;

  color-scheme: light;
}