/*
 * DealsFortune — Design Tokens
 * Phase 3 (Brand Foundation). Single source of truth for the child theme.
 * Per CLAUDE_CODE_BRIEF.md Design System.
 */
:root {
  /* Brand */
  --df-brand:        #00C26F;  /* DealsFortune emerald */
  --df-brand-dark:   #00A65A;

  /* Surfaces (dark UI) */
  --df-bg:           #0A0E0C;
  --df-surface:      #0F1714;
  --df-card:         #141D19;
  --df-card-hover:   #182521;

  /* Text — no opacity tokens exist; brightness is controlled by these colours.
     Primary is pure white so headings/body read crisp on the dark UI (was #F5F7F5). */
  --df-text:         #FFFFFF;
  --df-text-muted:   #A3B2A9;  /* lifted from #94A39A so secondary text is less washed out */
  --df-text-dim:     #5E6C63;

  /* Lines & accents */
  --df-border:       #1E2B26;
  --df-gold:         #D4AF37;  /* premium tags */
  --df-danger:       #FF4757;

  /* Typography */
  --df-font-head: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --df-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --df-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --df-weight-head: 800;
  --df-weight-head-2: 700;
  --df-weight-body: 400;
  --df-weight-body-medium: 500;

  /* Spacing — 4px base scale */
  --df-s1: 4px;  --df-s2: 8px;  --df-s3: 12px; --df-s4: 16px;
  --df-s6: 24px; --df-s8: 32px; --df-s12: 48px; --df-s16: 64px; --df-s24: 96px;

  /* Radius */
  --df-r-card:  12px;
  --df-r-btn:   8px;
  --df-r-input: 8px;
  --df-r-badge: 999px;

  /* Elevation — max blur 24px, opacity 0.12, never harsh */
  --df-shadow-sm: 0 2px 8px rgba(0,0,0,0.10);
  --df-shadow:    0 6px 24px rgba(0,0,0,0.12);

  /* Motion */
  --df-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --df-dur:  0.18s;
}