/* =============================================================
   VARIABLES.CSS — Design Tokens & CSS Custom Properties
   Edit these to retheme the entire website in one place.
   ============================================================= */

:root {
  /* ─── BRAND COLORS ─── */
  --color-black:        #0a0a0a;
  --color-dark:         #111111;
  --color-dark-2:       #1a1a1a;
  --color-dark-3:       #222222;
  --color-white:        #ffffff;
  --color-off-white:    #f5f5f0;
  --color-gray-light:   #c8c8c8;
  --color-gray:         #888888;
  --color-gray-dark:    #444444;

  /* Accent — change this to rebrand the accent color */
  --color-accent:       #e85d04;        /* Orange / fire */
  --color-accent-dark:  #bf4b00;
  --color-accent-glow:  rgba(232, 93, 4, 0.35);

  --color-neon:         #00f5d4;        /* Galaxy neon teal (secondary accent) */
  --color-neon-glow:    rgba(0, 245, 212, 0.3);

  /* ─── BACKGROUNDS ─── */
  --bg-primary:         var(--color-black);
  --bg-secondary:       var(--color-dark);
  --bg-card:            var(--color-dark-2);
  --bg-overlay:         rgba(0, 0, 0, 0.55);

  /* ─── TYPOGRAPHY ─── */
  --font-display:       'Bebas Neue', sans-serif;        /* Big headlines */
  --font-condensed:     'Barlow Condensed', sans-serif;  /* Labels, nav */
  --font-body:          'Barlow', sans-serif;            /* Body text */

  --text-primary:       var(--color-white);
  --text-secondary:     var(--color-gray-light);
  --text-muted:         var(--color-gray);
  --text-accent:        var(--color-accent);

  /* Font sizes — fluid scale */
  --fs-xs:    0.75rem;    /* 12px */
  --fs-sm:    0.875rem;   /* 14px */
  --fs-base:  1rem;       /* 16px */
  --fs-md:    1.125rem;   /* 18px */
  --fs-lg:    1.375rem;   /* 22px */
  --fs-xl:    1.75rem;    /* 28px */
  --fs-2xl:   2.25rem;    /* 36px */
  --fs-3xl:   3rem;       /* 48px */
  --fs-4xl:   4rem;       /* 64px */
  --fs-hero:  clamp(4rem, 15vw, 10rem);  /* Hero name – fluid */

  --fw-light:   300;
  --fw-regular: 400;
  --fw-semi:    600;
  --fw-bold:    700;

  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.6;
  --lh-loose:   1.8;

  --ls-tight:   -0.02em;
  --ls-wide:    0.1em;
  --ls-wider:   0.2em;

  /* ─── SPACING ─── */
  --space-1:    0.25rem;
  --space-2:    0.5rem;
  --space-3:    0.75rem;
  --space-4:    1rem;
  --space-5:    1.25rem;
  --space-6:    1.5rem;
  --space-8:    2rem;
  --space-10:   2.5rem;
  --space-12:   3rem;
  --space-16:   4rem;
  --space-20:   5rem;
  --space-24:   6rem;
  --space-32:   8rem;

  /* ─── LAYOUT ─── */
  --container-max:    1200px;
  --container-px:     clamp(1rem, 5vw, 3rem);
  --section-py:       clamp(4rem, 8vw, 8rem);

  /* ─── BORDERS & RADIUS ─── */
  --border-color:     rgba(255, 255, 255, 0.1);
  --border-accent:    rgba(232, 93, 4, 0.5);
  --radius-sm:        4px;
  --radius-md:        8px;
  --radius-lg:        16px;
  --radius-xl:        24px;
  --radius-full:      9999px;

  /* ─── SHADOWS ─── */
  --shadow-sm:        0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md:        0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-lg:        0 20px 60px rgba(0, 0, 0, 0.8);
  --shadow-accent:    0 0 30px var(--color-accent-glow);
  --shadow-neon:      0 0 20px var(--color-neon-glow);

  /* ─── TRANSITIONS ─── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   450ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-spring: 600ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── Z-INDEX SCALE ─── */
  --z-base:     1;
  --z-raised:   10;
  --z-overlay:  100;
  --z-sticky:   200;
  --z-modal:    1000;
}