/* SMR Website v2 — Design Tokens
   Brand-locked (Hugo, Website Playbook SPEC): ink #040708, accent #E15825, paper #FFFFFF,
   Montserrat 700 display / 300 body. Everything else (scale, spacing, depth) is a real
   system built on top of those three locked values -- not invented brand colors.
   Breakpoints (documented, used directly in media queries -- no PostCSS/build step):
     mobile  375px  (mobile-first base)
     tablet  768px
     desktop 1440px
*/

:root {
  /* ---- Color: brand-locked base ---- */
  --ink: #040708;
  --accent: #E15825;
  --paper: #FFFFFF;

  /* ---- Color: derived depth (dark theme needs layering, not flat black) ---- */
  --ink-2: #0c1112;      /* card / raised surface on dark */
  --ink-3: #171d1f;      /* border / divider on dark */
  --accent-dim: #a8431a; /* hover/active state for accent */
  --accent-tint: #f2a074;/* accent on dark when a lighter touch is needed (rare) */

  /* ---- Color: text on dark (hierarchy, not pure white everywhere) ---- */
  --paper-100: rgba(255, 255, 255, 0.96);
  --paper-72: rgba(255, 255, 255, 0.74);
  --paper-45: rgba(255, 255, 255, 0.46);

  /* ---- Color: overlays (light enough that the real photo reads as photo-forward,
     dark enough at the bottom for white-text AA contrast behind the headline) ---- */
  --overlay-strong: linear-gradient(180deg, rgba(4,7,8,0.08) 0%, rgba(4,7,8,0.18) 45%, rgba(4,7,8,0.82) 100%);
  --overlay-soft: rgba(4, 7, 8, 0.5);

  /* ---- Typography ---- */
  --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fw-display: 700;
  --fw-medium: 500;
  --fw-body: 300;

  /* Modular type scale, clamp-based (fluid between mobile 375px and desktop 1440px) */
  --text-hero: clamp(2.375rem, 1.55rem + 4.1vw, 3.5rem);   /* 38px -> 56px */
  --text-h1: clamp(2rem, 1.5rem + 2.5vw, 2.75rem);
  --text-h2: clamp(1.5rem, 1.25rem + 1.25vw, 2.1rem);
  --text-h3: clamp(1.2rem, 1.05rem + 0.75vw, 1.5rem);
  --text-body-lg: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-xs: 0.75rem;

  --ls-tight: -0.02em;   /* headlines */
  --ls-normal: 0;
  --ls-wide: 0.14em;     /* uppercase eyebrow labels */

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.6;

  /* ---- Spacing: 8px base scale ---- */
  --space-1: 0.5rem;   /* 8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-5: 3rem;     /* 48px */
  --space-6: 4rem;     /* 64px */
  --space-7: 6rem;     /* 96px */
  --space-8: 8rem;     /* 128px */

  /* ---- Layout ---- */
  --maxw: 1280px;
  --pad: clamp(1.25rem, 5vw, 4rem);

  /* ---- Radius / shadow (card depth on dark) ---- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --shadow-card: 0 20px 60px -24px rgba(0, 0, 0, 0.65);
  --shadow-elevated: 0 32px 90px -20px rgba(0, 0, 0, 0.78);

  /* ---- Motion timing (used by motion.css + main.js) ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.18s;
  --dur-base: 0.6s;

  /* ---- z-index scale ---- */
  --z-sticky: 40;
  --z-header: 50;
  --z-overlay: 60;
}