/* ===================================================================
   PriceLantern Design Tokens
   Single source of truth for colors, typography, spacing, radii,
   shadows, and transitions across the entire application.
   =================================================================== */

:root {
  /* ── Brand Colors ── */
  --pl-orange:       #ec641d;
  --pl-orange-hover: #d85a18;
  --pl-orange-light: rgba(236, 100, 29, 0.12);
  --pl-orange-glow:  rgba(236, 100, 29, 0.35);

  /* ── Core Palette ── */
  --pl-dark:         #0a1e2c;
  --pl-mid:          #132f40;
  --pl-carbon:       #2f4958;
  --pl-teal:         #1b3a4c;
  --pl-slate:        #405f71;

  /* ── Accent Colors ── */
  --pl-blue:         #6faddb;
  --pl-blue-light:   rgba(111, 173, 219, 0.12);
  --pl-green:        #73c485;
  --pl-green-light:  rgba(115, 196, 133, 0.12);
  --pl-red:          #ff4d4f;
  --pl-red-light:    rgba(255, 77, 79, 0.12);

  /* ── Neutral Tones ── */
  --pl-ghost:        #c9dbe5;
  --pl-ghost-light:  #f0f2f4;
  --pl-grey:         #868e97;
  --pl-white:        #ffffff;

  /* ── Surface Colors (dark theme) ── */
  --pl-surface-dark:   rgba(16, 36, 50, 0.92);
  --pl-surface-card:   rgba(255, 255, 255, 0.03);
  --pl-surface-hover:  rgba(255, 255, 255, 0.06);
  --pl-border-subtle:  rgba(255, 255, 255, 0.08);
  --pl-border-light:   rgba(255, 255, 255, 0.15);

  /* ── Surface Colors (light theme) ── */
  --pl-surface-white:      #ffffff;
  --pl-surface-cream:      #fff7f0;
  --pl-surface-light:      #f7f9fb;
  --pl-border-light-solid: rgba(0, 0, 0, 0.06);
  --pl-text-dark:          #0a1e2c;
  --pl-text-body:          #2f4958;
  --pl-text-muted:         #868e97;
  --pl-text-muted-dark:    rgba(255, 255, 255, 0.45);

  /* ── Typography ── */
  --pl-font:         'Poppins', sans-serif;
  --pl-font-weight-regular: 400;
  --pl-font-weight-medium:  500;
  --pl-font-weight-semi:    600;
  --pl-font-weight-bold:    700;

  --pl-text-display: clamp(2.4rem, 5.5vw, 3.8rem);
  --pl-text-h1:      clamp(1.8rem, 4vw, 2.75rem);
  --pl-text-h2:      clamp(1.6rem, 3vw, 2.4rem);
  --pl-text-h3:      clamp(1.3rem, 2.5vw, 1.8rem);
  --pl-text-h4:      1.1rem;
  --pl-text-body:    0.95rem;
  --pl-text-sm:      0.85rem;
  --pl-text-xs:      0.78rem;
  --pl-text-xxs:     0.7rem;

  --pl-leading-tight:  1.15;
  --pl-leading-snug:   1.35;
  --pl-leading-normal: 1.55;
  --pl-leading-relaxed: 1.7;

  /* ── Spacing (4px base) ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-9:  36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Border Radius ── */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-2xl:  40px;
  --radius-pill:  9999px;

  /* ── Shadows ── */
  --shadow-xs:   0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-sm:   0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 8px 32px rgba(31, 38, 135, 0.10);
  --shadow-lg:   0 20px 60px rgba(0, 0, 0, 0.35);
  --shadow-glow-orange: 0 6px 28px rgba(236, 100, 29, 0.35);
  --shadow-glow-orange-hover: 0 12px 40px rgba(236, 100, 29, 0.42);

  /* ── Transitions ── */
  --ease-default:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   0.15s;
  --duration-normal: 0.25s;
  --duration-slow:   0.4s;

  /* ── Z-Index Scale ── */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-fixed:     900;
  --z-navbar:    1000;
  --z-modal:     1050;
  --z-toast:     1080;
  --z-overlay:   9999;

  /* ── Container ── */
  --container-max: 1200px;

  /* Fixed navbar: reserve space so page content clears the pill + gap */
  --pl-main-offset: 6.5rem; /* ~104px */
}