/* ==========================================================================
   Monster Airmars G10 — Design Tokens (CSS Custom Properties)
   Mobile-first | Dark Industrial Premium
   ========================================================================== */

:root {
  /* ── Colors ── */
  --color-bg:            #F4F7FA;
  --color-bg-secondary:  #E5EDF4;
  --color-bg-card:       #FFFFFF;
  --color-bg-form:       #EAEFF5;
  --color-primary:       #0066CC;
  --color-primary-light: #00B2FF;
  --color-text:          #0F172A;
  --color-text-muted:    #475569;
  --color-text-dim:      #64748B;
  --color-sale-red:      #E11D48;
  --color-success:       #16A34A;
  --color-border:        #CBD5E1;
  --color-border-subtle: #E2E8F0;

  /* ── Gradients ── */
  --gradient-cta:   linear-gradient(135deg, #0056B3 0%, #0099FF 100%);
  --gradient-dark:  linear-gradient(180deg, #F4F7FA 0%, #E5EDF4 100%);

  /* ── Shadows ── */
  --shadow-glow:    0 0 30px rgba(0, 102, 204, 0.15);
  --shadow-card:    0 10px 30px rgba(15, 23, 42, 0.06);
  --shadow-bottom:  0 -10px 30px rgba(15, 23, 42, 0.05);

  /* ── Typography ── */
  --font-heading: 'Be Vietnam Pro', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-price:   'Be Vietnam Pro', sans-serif;

  /* ── Spacing ── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  48px;
  --space-2xl: 64px;

  /* ── Layout ── */
  --gutter:          16px;
  --margin-mobile:   20px;
  --margin-desktop:  120px;
  --header-height:   64px;
  --bottom-bar-height: 80px;

  /* ── Radius ── */
  --radius:    2px;
  --radius-lg: 4px;
  --radius-xl: 6px;

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow:   500ms ease;

  /* ── Z-index layers ── */
  --z-grain:      9998;
  --z-header:     100;
  --z-bottom-bar: 9999;
  --z-modal:      10000;

  /* ── Light Section Colors ── */
  --color-bg-light:      #F5F5F5;
  --color-bg-light-card: #FFFFFF;
  --color-text-dark:       #111111;
  --color-text-dark-muted: #666666;
  --color-border-light:    #E0E0E0;
}