/* ═══════════════════════════════════════════════════════════════
   BRASAS — Design tokens
   Single source of truth. Don't hardcode colors/type elsewhere.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Color — charcoal ladder */
  --charcoal-900: #1C1917;
  --charcoal-800: #2C2C2A;
  --charcoal-700: #44403C;
  --charcoal-600: #57534E;

  /* Color — fire & gold */
  --fire:         #C0392B;
  --fire-bright:  #E74C3C;
  --fire-deep:    #8B2616;
  --ember:        #FF6B00;
  --gold:         #B7860B;
  --gold-light:   #CA8A04;
  --gold-soft:    rgba(183, 134, 11, 0.15);

  /* Color — warm neutrals */
  --warm-white:   #FAFAF9;
  --warm-mid:     #A8A29E;
  --warm-dim:     #78716C;

  /* Semantic aliases */
  --bg:           var(--charcoal-900);
  --bg-alt:       var(--charcoal-800);
  --surface:      var(--charcoal-700);
  --text:         var(--warm-white);
  --text-muted:   var(--warm-mid);
  --accent:       var(--gold);
  --accent-warm:  var(--fire);

  /* Type — families */
  --ff-display:   "Playfair Display", "Times New Roman", serif;
  --ff-body:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Type — scale */
  --fs-xs:        11px;
  --fs-sm:        13px;
  --fs-body:      16px;
  --fs-lg:        18px;
  --fs-xl:        clamp(22px, 2.2vw, 28px);
  --fs-h3:        clamp(28px, 3.2vw, 40px);
  --fs-h2:        clamp(36px, 5vw, 68px);
  --fs-h1:        clamp(56px, 8vw, 112px);
  --fs-mega:      clamp(80px, 18vw, 280px);

  /* Spacing scale */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;
  --sp-11: 160px;

  /* Layout */
  --container:      1240px;
  --container-pad:  clamp(20px, 5vw, 64px);
  --radius-sm:      4px;
  --radius:         8px;
  --radius-lg:      16px;

  /* Motion */
  --dur-fast:   180ms;
  --dur:        320ms;
  --dur-slow:   600ms;
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);

  /* Elevation */
  --shadow-card:   0 20px 60px -20px rgba(0, 0, 0, 0.6);
  --shadow-glow:   0 0 60px rgba(183, 134, 11, 0.25), 0 20px 60px -10px rgba(0, 0, 0, 0.5);

  /* Z-layers */
  --z-base:    1;
  --z-grain:   10;
  --z-section: 20;
  --z-nav:     100;
  --z-drawer:  200;
  --z-modal:   300;
}