/* MaverickMade Product Finder — Design Tokens */
/* Extracted from: outputs/pencil/product-finder/welcome.pen */
/* DO NOT hardcode colors, spacing, or typography — always use these tokens */

:root {
  /* ─── Colors ─────────────────────────────────────────── */
  --accent-primary:       #D4916E;  /* Warm terracotta — buttons, highlights */
  --accent-secondary:     #C4CFDE;  /* Soft blue-grey — secondary accents */
  --surface-primary:      #F3EBE2;  /* Warm cream/linen — main background */
  --surface-secondary:    #C5BEB6;  /* Warm grey — cards, dividers */
  --border-subtle:        #C5BEB6;  /* Subtle borders */
  --foreground-primary:   #1A1A1A;  /* Main text */
  --foreground-secondary: #3D3D3D;  /* Secondary text */
  --foreground-muted:     #6B6B6B;  /* Muted/caption text */
  --foreground-on-accent: #FFFFFF;  /* Text on accent buttons */

  /* ─── Overlay gradient (hero screens) ───────────────── */
  --hero-gradient: linear-gradient(
    180deg,
    #1A1A1A00 0%,
    #1A1A1A20 40%,
    #1A1A1A90 75%,
    #1A1A1ACC 100%
  );

  /* ─── Accent shadow ──────────────────────────────────── */
  --shadow-accent: 0 4px 16px #D4916E40;
  --shadow-card:   0 2px 12px rgba(26, 26, 26, 0.08);

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

  --text-logo:      13px;
  --text-caption:   12px;
  --text-body-sm:   14px;
  --text-body:      15px;
  --text-button:    16px;
  --text-h3:        20px;
  --text-h2:        26px;
  --text-h1:        34px;

  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  --leading-tight:  1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.55;

  --tracking-wide:  0.5px;
  --tracking-wider: 4px;

  /* ─── Spacing ─────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-15:  60px;

  /* ─── Border radius ───────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   40px;
  --radius-pill: 9999px;

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