/* ═══════════════════════════════════════════════════════
   DESTROLA — DESIGN TOKENS
   Medieval Electronic / Sovereign Noir
═══════════════════════════════════════════════════════ */
:root {

  /* FONTS */
  --font-display: "Sekerith", "Palatino Linotype", serif;
  --font-ui:      "Pixelify Sans", "Courier New", monospace;

  /* BACKGROUNDS */
  --bg-primary:   #112615;
  --bg-secondary: #163019;
  --bg-surface:   #151915;
  --bg-card:      rgba(22,48,25,0.55);
  --bg-overlay:   rgba(17,38,21,0.85);

  /* FOREGROUND */
  --fg-primary:   #F2E5E1;
  --fg-secondary: #C8B8B3;
  --fg-muted:     #7A6E6B;

  /* ACCENT */
  --accent:       #CE4427;
  --accent-hover: #9E3319;
  --accent-dim:   rgba(206,68,39,0.15);
  --accent-glow:  rgba(206,68,39,0.45);

  /* BORDERS */
  --border-subtle: rgba(242,229,225,0.08);
  --border-mid:    rgba(242,229,225,0.15);
  --border-strong: rgba(242,229,225,0.30);
  --border-orange: rgba(206,68,39,0.30);

  /* SHADOWS */
  --shadow-sm:          0 1px 4px rgba(0,0,0,0.6);
  --shadow-md:          0 4px 16px rgba(0,0,0,0.7);
  --shadow-lg:          0 8px 40px rgba(0,0,0,0.8);
  --shadow-glow-orange: 0 0 20px rgba(206,68,39,0.45);
  --shadow-glow-green:  0 0 20px rgba(22,48,21,0.8);
  --shadow-inset:       inset 0 1px 0 rgba(242,229,225,0.05);

  /* EASINGS */
  --ease-smooth: cubic-bezier(0.25,1,0.5,1);
  --ease-inout:  ease-in-out;

  /* TYPE SCALE */
  --text-hero: clamp(2.25rem, 5vw, 4.5rem);
  --text-3xl:  clamp(1.75rem, 3.5vw, 3rem);
  --text-2xl:  clamp(1.5rem, 3vw, 2.5rem);
  --text-xl:   clamp(1.25rem, 2vw, 1.75rem);
  --text-lg:   clamp(1rem, 1.5vw, 1.25rem);
  --text-md:   1rem;
  --text-base: 0.875rem;
  --text-sm:   0.75rem;
  --text-xs:   0.625rem;

  /* SPACING (4px grid) */
  --sp-1:  4px;  --sp-2:  8px;  --sp-3:  12px;
  --sp-4:  16px; --sp-5:  20px; --sp-6:  24px;
  --sp-8:  32px; --sp-10: 40px; --sp-12: 48px;
  --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* RADIUS */
  --radius-none: 0px;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 9999px;

  /* LAYOUT */
  --nav-h:     64px;
  --max-w:     1240px;
  --gutter:    clamp(20px, 5vw, 80px);
  --col-gap:   clamp(16px, 2.5vw, 32px);
}