/* ============================================================
   CoatPro Innovations — design tokens
   Brand: metallic gold on deep charcoal, taken from the
   company identity. Gold never carries body text: at #C9972B
   it measures 3.4:1 on white, which is large-text only.
   ============================================================ */

:root {
  /* ── Brand: charcoal ───────────────────────────────────── */
  --ink-900: #0B0E14;
  --ink-800: #14181F;
  --ink-700: #232A36;
  --ink-600: #3A4453;
  --ink-500: #5A6472;

  /* ── Brand: gold ───────────────────────────────────────── */
  --gold-700: #8C6414;
  --gold-600: #A87B18;
  --gold-500: #C9972B;
  --gold-400: #DDB65A;
  --gold-300: #EDD597;
  --gold-200: #F6E9C4;
  --gold-050: #FCF6E7;
  --gold-grad: linear-gradient(135deg, #F3DFA6 0%, #C9972B 45%, #8C6414 100%);
  --gold-rule: linear-gradient(90deg, #C9972B 0%, #EDD597 50%, rgba(201,151,43,0) 100%);

  /* ── Surfaces ──────────────────────────────────────────── */
  --surface: #FFFFFF;
  --surface-alt: #F7F8FA;
  --surface-sunken: #EFF1F5;
  --ivory: #FCFAF4;
  --surface-dark: #14181F;
  --surface-darker: #0B0E14;

  /* ── Text ──────────────────────────────────────────────── */
  --text: #0B0E14;
  --text-muted: #5A6472;
  --text-subtle: #7A838F;
  --text-invert: #FFFFFF;
  --text-on-dark: #E7EAEF;
  --text-on-dark-muted: #AFB7C3;

  /* ── Lines & support ───────────────────────────────────── */
  --line: #E4E7EC;
  --line-strong: #CFD5DD;
  --line-dark: #2C3442;
  --tech: #0E7490;          /* technical/data accent, used sparingly */
  --tech-soft: #E0F2F7;
  --success: #15803D;
  --success-soft: #ECFDF3;
  --warning: #B45309;
  --warning-soft: #FEF6E7;
  --danger: #DC2626;
  --danger-soft: #FEF2F2;
  --focus: #C9972B;

  /* ── Typography ────────────────────────────────────────── */
  --font-head: 'Lexend', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Source Sans 3', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Fluid type scale — 375px to 1440px */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: clamp(1.125rem, 0.2vw + 1.08rem, 1.25rem);
  --fs-xl: clamp(1.3125rem, 0.5vw + 1.2rem, 1.5rem);
  --fs-2xl: clamp(1.375rem, 0.7vw + 1.2rem, 1.625rem);
  --fs-3xl: clamp(1.625rem, 1.1vw + 1.35rem, 2.125rem);
  --fs-4xl: clamp(1.875rem, 1.5vw + 1.5rem, 2.625rem);
  --fs-5xl: clamp(2.125rem, 2vw + 1.6rem, 3rem);

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;
  --ls-tight: -0.015em;
  --ls-wide: 0.02em;
  --ls-eyebrow: 0.14em;

  /* ── Spacing: 4/8 rhythm, density 4/10 ─────────────────── */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
  --s9: 6rem;     --s10: 8rem;

  --section-y: clamp(3.5rem, 6vw, 6rem);
  --section-y-lg: clamp(4.5rem, 8vw, 8rem);
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --container: 75rem;      /* 1200px */
  --container-wide: 85rem;
  --measure: 68ch;

  /* ── Radius & elevation ────────────────────────────────── */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

  --shadow-sm: 0 1px 2px rgba(11, 14, 20, 0.04), 0 1px 3px rgba(11, 14, 20, 0.06);
  --shadow-md: 0 2px 4px rgba(11, 14, 20, 0.04), 0 8px 20px rgba(11, 14, 20, 0.07);
  --shadow-lg: 0 4px 8px rgba(11, 14, 20, 0.05), 0 18px 44px rgba(11, 14, 20, 0.11);
  --shadow-gold: 0 8px 28px rgba(168, 123, 24, 0.22);

  /* ── Motion ────────────────────────────────────────────── */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur: 220ms;
  --dur-slow: 400ms;

  /* ── Layering ──────────────────────────────────────────── */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 100;
  --z-nav: 200;
  --z-dropdown: 300;
  --z-overlay: 800;
  --z-modal: 1000;
  --z-toast: 1100;

  /* ── Component tokens ──────────────────────────────────── */
  --header-h: 76px;
  --header-h-scrolled: 64px;
  --mobile-bar-h: 60px;
}

@media (max-width: 1023px) {
  :root {
    --header-h: 64px;
    --header-h-scrolled: 60px;
  }
}