/* ==========================================================================
   King Style — Design Tokens
   Single source of truth for color, type, spacing, radius, motion.
   No magic numbers in component CSS — everything traces back here.
   ========================================================================== */

/* Display face: one self-hosted file, no third-party request. Bebas Neue is
   caps-only by design — headings render uppercase in any fallback too. */
@font-face {
  font-family: 'Bebas Neue';
  src: url('../assets/fonts/bebas-neue-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Color: base (near-black, warm) ---- */
  --color-bg: #0e0d0c;
  --color-bg-alt: #121110;        /* alternating section surface — barely there on purpose */
  --color-bg-elevated: #181613;
  --color-bg-elevated-2: #201d19;
  --color-bg-elevated-3: #2a2621;
  --color-border: rgba(243, 237, 226, 0.1);
  --color-border-strong: rgba(243, 237, 226, 0.2);

  /* ---- Color: text ---- */
  --color-text: #f4efe4;
  --color-text-muted: #bcb2a1;
  --color-text-faint: #928776;

  /* ---- Color: accent (brass / gold — from King Style's own gold crest) ---- */
  --color-accent: #c9a24a;
  --color-accent-hover: #ddbb68;
  --color-accent-soft: rgba(201, 162, 74, 0.12);
  --color-accent-line: rgba(201, 162, 74, 0.32);
  --color-accent-ink: #171104;

  /* ---- Color: utility ---- */
  --color-focus-ring: #e7c877;
  --color-star: #d9ac3f;
  --color-scrim: rgba(8, 7, 6, 0.86);

  /* ---- Type: font stacks ---- */
  --font-display: 'Bebas Neue', 'Arial Narrow', 'Haettenschweiler', 'Franklin Gothic Medium', system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* ---- Type: fluid scale (clamp between 320px and ~1440px) ---- */
  --fs-100: 0.75rem;      /* 12px — eyebrow / fine print */
  --fs-200: 0.9375rem;    /* 15px — small body / meta */
  --fs-300: 1.0625rem;    /* 17px — body */
  --fs-lead: clamp(1.125rem, 1.03rem + 0.45vw, 1.375rem);   /* hero lead / section intro */
  --fs-h3: clamp(1.5rem, 1.28rem + 1.05vw, 2rem);           /* card / sub headings (display) */
  --fs-h2: clamp(2.25rem, 1.7rem + 2.7vw, 3.5rem);          /* section headings (display) */
  --fs-hero: clamp(3rem, 1.75rem + 6.1vw, 6rem);            /* hero H1 (display) */
  --fs-stat: clamp(2.5rem, 1.9rem + 3vw, 3.75rem);          /* big numerals (display) */

  --lh-tight: 0.94;       /* stacked display lines */
  --lh-snug: 1.15;
  --lh-normal: 1.6;

  --ls-display: 0.015em;  /* Bebas reads best with a hair of positive tracking */
  --ls-wide: 0.08em;
  --ls-wider: 0.18em;     /* eyebrow labels */

  /* ---- Spacing scale ---- */
  --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;

  /* ---- Rhythm: responsive, used everywhere so vertical space stays consistent
     and never leaves a big unexplained gap at small sizes ---- */
  --gutter: clamp(1.25rem, 0.85rem + 1.9vw, 2rem);              /* container inline padding */
  --section-pad-y: clamp(2.75rem, 1.9rem + 4vw, 5rem);          /* section block padding */
  --section-head-gap: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);      /* heading block -> content */
  --flow-gap: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);            /* between major blocks in a section */

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-full: 999px;

  /* ---- Shadow (restrained — no glow) ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);

  /* ---- Motion ---- */
  --duration-fast: 140ms;
  --duration-base: 240ms;
  --duration-slow: 460ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- Layout ---- */
  --content-max: 1200px;                             /* text-bearing sections */
  --content-wide: clamp(1200px, 92vw, 1680px);       /* photo sections on large screens */
  --nav-height: 72px;

  /* ---- Z-index scale ---- */
  --z-header: 100;
  --z-menu-backdrop: 190;
  --z-mobile-menu: 200;
  --z-skip-link: 1000;
}