/* ============================================================
   King Of The Wings — Design Tokens
   Source of truth: branding.md §2 + plan §3
   ============================================================ */

:root {
  /* ---------- Brand colours (from logo, branding.md §2.1) ---------- */
  --color-sunburst-orange: #F39124;
  --color-wing-red:        #E8392B;
  --color-sunburst-yellow: #FCD933;
  --color-deep-orange:     #D8421A;
  --color-burnt-edge:      #9E1B1B;

  /* ---------- Neutrals ---------- */
  --color-royal-black:  #0E0E10;
  --color-off-black:    #1C1C1F;
  --color-cream:        #FFEFD0;
  --color-cream-soft:   #F5E2BD;
  --color-smoke-grey:   #6B6B70;
  --color-line:         rgba(255, 239, 208, 0.08);
  --color-line-strong:  rgba(255, 239, 208, 0.16);

  /* ---------- Semantic ---------- */
  --color-success: #2BA84A;
  --color-warning: #E58A1A;
  --color-danger:  #9E1B1B;

  /* ---------- RGB triples (for rgba()) ---------- */
  --rgb-wing-red:        232, 57, 43;
  --rgb-sunburst-orange: 243, 145, 36;
  --rgb-sunburst-yellow: 252, 217, 51;
  --rgb-cream:           255, 239, 208;
  --rgb-royal-black:     14, 14, 16;

  /* ---------- Mapped roles (dark mode default) ---------- */
  --bg-page:          var(--color-royal-black);
  --bg-surface:       var(--color-off-black);
  --bg-surface-2:     #25252A;
  --bg-cta-primary:   var(--color-wing-red);
  --bg-cta-secondary: var(--color-sunburst-orange);
  --bg-cta-tertiary:  transparent;

  --text-primary:     var(--color-cream);
  --text-secondary:   #B5B5BA;
  --text-muted:       var(--color-smoke-grey);
  --text-on-cta:      #FFFFFF;
  --text-accent:      var(--color-sunburst-orange);

  --border-default:   var(--color-line);
  --border-strong:    var(--color-line-strong);
  --border-cta:       var(--color-sunburst-orange);

  /* ---------- Typography ---------- */
  --font-display:  'Bangers', 'Bebas Neue', 'Anton', Impact, sans-serif;
  --font-heading:  'Bebas Neue', 'Archivo Black', 'Inter', system-ui, sans-serif;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-accent:   'Playfair Display', Georgia, serif;
  --font-mono:     'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Type scale (clamp = min, preferred, max) */
  --fs-display-xl: clamp(3rem, 8vw + 1rem, 6.5rem);   /* 48 – 104px */
  --fs-display-lg: clamp(2.25rem, 5vw + 1rem, 4.5rem);
  --fs-h1:         clamp(2rem, 3vw + 1rem, 3rem);
  --fs-h2:         clamp(1.5rem, 2vw + 0.5rem, 2.25rem);
  --fs-h3:         1.5rem;
  --fs-body-lg:    1.125rem;
  --fs-body:       1rem;
  --fs-caption:    0.875rem;
  --fs-eyebrow:    0.75rem;

  --lh-display: 0.95;
  --lh-heading: 1.1;
  --lh-body:    1.6;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.18em;

  /* ---------- Spacing scale (4/8pt) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-8:  48px;
  --space-10: 64px;
  --space-12: 96px;
  --space-16: 128px;
  --space-20: 160px;

  --container-max: 1200px;
  --container-gutter: clamp(20px, 5vw, 32px);
  /* Tighter vertical rhythm — sections used to be 64–128px; cut to 40–80px
     so the page reads denser and scrolls faster.                          */
  --section-pad-y:       clamp(40px, 6vw, 80px);
  --section-pad-y-tight: clamp(24px, 4vw, 48px);

  /* ---------- Radii ---------- */
  --radius-sm:   4px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-1: 0 2px 6px rgba(0, 0, 0, 0.20);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.30);
  --shadow-3: 0 20px 60px rgba(0, 0, 0, 0.45);

  /* CTA glow — ORDER NOW signature effect */
  --glow-cta:       0 0 24px rgba(var(--rgb-wing-red), 0.45);
  --glow-cta-hover: 0 0 40px rgba(var(--rgb-wing-red), 0.65);
  --glow-orange:    0 0 24px rgba(var(--rgb-sunburst-orange), 0.40);
  --glow-yellow:    0 0 32px rgba(var(--rgb-sunburst-yellow), 0.45);

  /* ---------- Motion ---------- */
  --dur-micro:  150ms;
  --dur-base:   240ms;
  --dur-medium: 360ms;
  --dur-long:   600ms;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.7, 0, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- Layered z-index scale ---------- */
  --z-base:        0;
  --z-rise:        10;
  --z-sticky:      100;
  --z-navbar:     1000;
  --z-bottom-bar: 1100;
  --z-overlay:    8000;
  --z-loader:     9999;
  --z-progress:  10000;

  /* ---------- Brand gradients ---------- */
  --gradient-sunburst: radial-gradient(
    circle at 50% 35%,
    var(--color-sunburst-yellow) 0%,
    var(--color-sunburst-orange) 35%,
    var(--color-deep-orange) 75%,
    var(--color-burnt-edge) 100%
  );

  --gradient-sunburst-soft: radial-gradient(
    circle at 50% 35%,
    rgba(var(--rgb-sunburst-yellow), 0.4) 0%,
    rgba(var(--rgb-sunburst-orange), 0.3) 35%,
    rgba(var(--rgb-royal-black), 0.0) 75%
  );

  --gradient-cta-band: linear-gradient(
    135deg,
    var(--color-deep-orange) 0%,
    var(--color-wing-red) 60%,
    var(--color-burnt-edge) 100%
  );
}

/* ---------- Light mode override ---------- */
:root.theme-light,
.theme-light {
  --bg-page:        var(--color-cream);
  --bg-surface:     #FFFFFF;
  --bg-surface-2:   var(--color-cream-soft);

  --text-primary:   var(--color-royal-black);
  --text-secondary: #3A3A40;
  --text-muted:     #5A5A60;
  --text-accent:    var(--color-deep-orange);

  --border-default: rgba(14, 14, 16, 0.10);
  --border-strong:  rgba(14, 14, 16, 0.20);
}