/* variables.css — DESIGN TOKENS for the "WB Monogram" variant.
   Clean, timeless, high-end. Warm near-black, warm amber, restrained.
   This is the one file that carries the brand. Re-theme by editing below. */

:root {
  /* --- Brand colors: warm, refined, dimensional --- */
  --bg: #131210;            /* warm near-black — page background */
  --bg-2: #1a1814;          /* alt section base */
  --surface: #201d18;       /* raised panels / cards */
  --surface-2: #2c2820;     /* hover / nested surface */
  --border: #3a352b;        /* hairline borders */
  --text: #efece1;          /* primary warm cream-white text */
  --muted: #a8a395;         /* secondary / supporting text */
  --metal: #cfd0d2;         /* brushed silver */
  --metal-hi: #ffffff;      /* metal highlight */
  --metal-lo: #6a6c70;      /* metal shadow */
  --accent: #e3aa2e;        /* warm amber */
  --accent-2: #f4c45a;      /* light amber highlight */
  --accent-dark: #b8841a;   /* pressed / darker accent */
  --accent-soft: rgba(227, 170, 46, 0.12); /* tint backgrounds */

  /* --- Signature gradients --- */
  --grad-hero-sky:  radial-gradient(130% 90% at 50% 110%, #241f17 0%, #131210 75%);
  --grad-amber:     linear-gradient(135deg, #f4c45a 0%, #e3aa2e 60%, #b8841a 100%);
  --grad-silver:    linear-gradient(180deg, #ffffff 0%, #dadbdd 26%, #9a9c9f 52%, #cfd0d2 72%, #7e8084 100%);
  --grad-soft-band: linear-gradient(180deg, #1a1814 0%, #131210 100%);

  /* --- Typography --- */
  --font-display: 'Saira Condensed', 'Arial Narrow', sans-serif; /* headings + UI */
  --font-body: 'Inter', 'Segoe UI', sans-serif;                  /* body copy */

  --fw-body: 400;
  --fw-medium: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* fluid type scale — Saira Condensed, more breathing room than Industrial */
  --fs-hero: clamp(3.2rem, 6.5vw + 1rem, 6rem);
  --fs-h2: clamp(2rem, 3vw + 0.5rem, 3.2rem);
  --fs-h3: clamp(1.3rem, 1vw + 0.85rem, 1.7rem);
  --fs-body: 1.05rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8rem;

  /* --- Spacing + structure — airy, generous negative space (~15% more) --- */
  --space-section: clamp(4rem, 9vw, 8rem);
  --space-section-lg: clamp(5.5rem, 12vw, 11rem);
  --container: 1180px;
  --gutter: clamp(1.5rem, 4.6vw, 2.9rem);
  --radius: 10px;            /* soft, refined — counterpoint to Industrial's 4px */
  --radius-lg: 16px;

  /* --- Depth / elevation system --- */
  --elev-0: none;
  --elev-1: 0 2px 8px -2px rgba(0, 0, 0, 0.6);
  --elev-2: 0 12px 28px -10px rgba(0, 0, 0, 0.7);
  --elev-3: 0 30px 60px -22px rgba(0, 0, 0, 0.85);
  --bevel: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -2px 6px rgba(0, 0, 0, 0.5);
  --glow-accent: 0 0 32px -4px var(--accent);

  /* legacy single-shadow token kept as an alias so nothing breaks */
  --shadow: var(--elev-2);
  --transition: 220ms ease;

  /* logo skew angle for the road accent */
  --road-skew: -18deg;
}