/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS — Drone Empire
   Source: design-tokens.json + drone-empire-brand.md
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ─── Colors: Sky Blues ─── */
  --sky-deep:     #0B1F3A;  /* Navbar, headings, body text, footer bg */
  --sky-mid:      #1A4480;  /* Hero sections, dark cards, gradient fills */
  --sky-bright:   #2D7DD2;  /* Links, accents on light bg, heading accent */
  --sky-electric: #4DA6FF;  /* Hover states, interactive highlights */
  --horizon:      #E8F1FB;  /* Section fills, card bg, secondary btn bg */
  --horizon-dark: #C8D4E3;  /* Dividers, card borders, table lines, input borders */

  /* ─── Colors: Signal Orange ─── */
  --signal:       #FD7D34;  /* CTA buttons, urgency badges, stat accents */
  --signal-dark:  #E8501A;  /* Tag text, button hover */
  --signal-pale:  #FFF0EB;  /* Tag backgrounds */

  /* ─── Colors: Neutrals ─── */
  --slate:        #6B7C93;  /* Body text, captions, placeholder */
  --slate-light:  #C8D4E3;  /* Alias of horizon-dark */
  --off-white:    #F4F7FB;  /* Page background, section fills */
  --white:        #FFFFFF;  /* Cards, modals, form inputs */

  /* ─── Colors: UI ─── */
  --mid-blue:     #3C6093;  /* Step bubbles, secondary indicators */

  /* ─── Colors: Star Rating ─── */
  --star-filled:  #F5A623;
  --star-empty:   var(--horizon-dark);

  /* ─── Spacing: 8px base grid ─── */
  --gap-xs:   4px;
  --gap-sm:   8px;
  --gap-sm2:  12px;
  --gap-md:   16px;
  --gap-lg:   24px;
  --gap-xl:   32px;
  --gap-2xl:  48px;
  --gap-3xl:  60px;
  --gap-4xl:  72px;
  --gap-5xl:  96px;
  --gap-6xl:  128px;
  --gap-7xl:  256px;

  /* ─── Border Radius ─── */
  --radius-tag:     4px;
  --radius-input:   8px;
  --radius-card-sm: 12px;
  --radius-card:    16px;
  --radius-pill:    999px;

  /* ─── Shadows ─── */
  --shadow-navbar:    0 3px 4px -2px rgba(0,0,0,0.15);
  --shadow-card-hover: 0 12px 32px rgba(11,31,58,0.1);
  --shadow-focus:     0 0 0 3px rgba(45,125,210,0.15);

  /* ─── Layout ─── */
  --max-width:        1440px;
  --page-padding-x:   64px;
  --section-padding-t: 48px;
  --section-padding-b: 40px;
  --navbar-height:    80px;
  --card-grid-gap:    16px;
  --card-padding:     24px;
  --footer-height:    420px;

  /* ─── Buttons: Add to Cart ─── */
  --btn-atc-bg:           var(--signal);
  --btn-atc-bg-hover:     var(--signal-dark);
  --btn-atc-color:        #fff;
  --btn-atc-font:         var(--font-body);
  --btn-atc-size:         16px;
  --btn-atc-weight:       600;
  --btn-atc-gap:          8px;
  --btn-atc-radius:       8px;
  --btn-atc-transition:   background 0.25s, transform 0.2s, box-shadow 0.25s;
  --btn-atc-hover-lift:   translateY(-2px);
  --btn-atc-hover-shadow: 0 4px 12px rgba(253,125,52,0.35);
  --btn-atc-success:      #27ae60;

  /* ─── Typography ─── */
  --font-display: 'DM Sans', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'DM Mono', monospace;

  /* ─── Responsive Breakpoints (for reference, used in media queries) ─── */
  /* Desktop:  1440px+ */
  /* Laptop:   1024-1439px */
  /* Tablet:   768-1023px */
  /* Mobile:   <768px */
}