/* ADT Funnel — Design Tokens
   Brand: American Dream Trading
   System: CSS Custom Properties
   Typography: System font stack only (no web font load)
*/

:root {
  /* ── Brand Colors ── */
  --adt-navy:  #0d2144;
  --adt-gold:  #f5c842;
  --adt-teal:  #5bbccc;
  --adt-white: #ffffff;

  /* ── Backgrounds ── */
  --bg-primary:      #ffffff;
  --bg-dark:         #0d2144;
  --bg-muted:        #f4f7fa;
  --bg-card:         #ffffff;
  --bg-card-vip:     #fff9e6;
  --bg-overlay:      rgba(13, 33, 68, 0.55);

  /* ── Text ── */
  --text-primary:    #0d2144;
  --text-on-dark:    #ffffff;
  --text-muted:      #5a6b82;
  --text-muted-dark: rgba(255, 255, 255, 0.65);
  --text-gold-onlight: #c49d0f;   /* darkened for WCAG AA on white */
  --text-teal-onlight: #3a9aaa;   /* darkened for WCAG AA on white */

  /* ── Borders ── */
  --border-default:  #dde3ec;
  --border-vip:      #f5c842;
  --border-focus:    #5bbccc;

  /* ── Status ── */
  --success: #2d8a4e;
  --error:   #c53030;

  /* ── Savings / Highlight ── */
  --savings-bg:   #fff3cd;
  --savings-text: #7d5a00;

  /* ── Typography ── */
  --font-body:    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Mobile type scale (base) */
  --text-h1:       2rem;       /* 32px */
  --text-h2:       1.625rem;   /* 26px */
  --text-h3:       1.25rem;    /* 20px */
  --text-body-lg:  1.125rem;   /* 18px */
  --text-body:     1rem;       /* 16px */
  --text-body-sm:  0.875rem;   /* 14px */
  --text-caption:  0.75rem;    /* 12px */
  --text-cta:      1rem;       /* 16px */
  --text-badge:    0.75rem;    /* 12px */

  /* Line heights */
  --lh-heading: 1.2;
  --lh-body:    1.6;
  --lh-tight:   1.1;

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

  /* ── Radii ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-pill: 100px;

  /* ── Shadows ── */
  --shadow-card:    0 2px 8px rgba(13, 33, 68, 0.06);
  --shadow-vip:     0 4px 16px rgba(245, 200, 66, 0.2);
  --shadow-sticky: 0 -2px 12px rgba(0, 0, 0, 0.15);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   400ms ease;

  /* ── Layout ── */
  --container-max: 1200px;
  --sticky-bar-h:  64px;
}

/* Desktop type scale overrides */
@media (min-width: 768px) {
  :root {
    --text-h1:      3rem;       /* 48px */
    --text-h2:      2.25rem;    /* 36px */
    --text-h3:      1.5rem;     /* 24px */
    --text-body-lg: 1.25rem;    /* 20px */
    --text-cta:     1.125rem;   /* 18px */
    --text-badge:   0.8125rem;  /* 13px */
  }
}