/* ============================================================
   PRIME TIME INSURANCE — DESIGN TOKENS
   Luxury Editorial Brand System
   ============================================================ */

:root {

  /* ─── COLOR PALETTE ─── */
  --color-midnight:  #081120;
  --color-navy:      #0d1b2a;
  --color-gold:      #d4af37;
  --color-gold-light:#e8c96a;
  --color-gold-dark: #b8961e;
  --color-pearl:     #f8f8f6;
  --color-pearl-2:   #f2f2ef;
  --color-white:     #ffffff;
  --color-graphite:  #2a2a2a;
  --color-muted:     #6b7280;
  --color-border:    rgba(212, 175, 55, 0.18);
  --color-border-light: rgba(0,0,0,0.08);

  /* ─── TYPOGRAPHY ─── */
  --font-display:  'Playfair Display', Georgia, serif;
  --font-body:     'Inter', system-ui, sans-serif;

  /* ─── TYPE SCALE ─── */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-md:    1.125rem;   /* 18px */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   1.875rem;   /* 30px */
  --text-3xl:   2.25rem;    /* 36px */
  --text-4xl:   3rem;       /* 48px */
  --text-5xl:   3.75rem;    /* 60px */
  --text-6xl:   4.5rem;     /* 72px */
  --text-7xl:   5.5rem;     /* 88px */
  --text-8xl:   7rem;       /* 112px */

  /* ─── LINE HEIGHTS ─── */
  --leading-tight:  1.1;
  --leading-snug:   1.2;
  --leading-normal: 1.5;
  --leading-relaxed:1.7;
  --leading-loose:  1.9;

  /* ─── LETTER SPACING ─── */
  --tracking-tight:  -0.03em;
  --tracking-normal:  0em;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.14em;
  --tracking-widest:  0.22em;

  /* ─── 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;

  /* ─── SECTION RHYTHM ─── */
  --section-sm:   7.5rem;   /* 120px */
  --section-md:   10rem;    /* 160px */
  --section-lg:   11.25rem; /* 180px */

  /* ─── BORDER RADIUS ─── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full:9999px;

  /* ─── SHADOWS ─── */
  --shadow-sm:   0 2px 12px rgba(8,17,32,0.06);
  --shadow-md:   0 8px 40px rgba(8,17,32,0.10);
  --shadow-lg:   0 20px 80px rgba(8,17,32,0.14);
  --shadow-xl:   0 32px 120px rgba(8,17,32,0.20);
  --shadow-gold: 0 8px 40px rgba(212,175,55,0.20);

  /* ─── TRANSITIONS ─── */
  --ease-luxury:   cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-cinematic:cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   200ms;
  --dur-normal: 400ms;
  --dur-slow:   700ms;
  --dur-xslow:  1000ms;

  /* ─── HEADER ─── */
  --header-height: 70px;

  /* ─── CONTAINER ─── */
  --container-max:  1440px;
  --container-wide: 1280px;
  --container-mid:  1100px;
  --container-text:  760px;
  --container-pad:   clamp(1.5rem, 5vw, 5rem);
}