/* ============================================================
   TOKENS — single source of truth for all design variables
   ============================================================ */
:root {
  /* Brand */
  --color-primary:        #0070d2;
  --color-primary-hover:  #005fb2;
  --color-primary-light:  #d8eaff;
  --color-accent:         #ff6b35;
  --color-success:        #2e844a;
  --color-warning:        #f59e0b;
  --color-error:          #c23934;

  /* Surfaces (light default) */
  --color-bg:             #f5f7fa;
  --color-surface:        #ffffff;
  --color-surface-2:      #f0f3f7;
  --color-border:         #dde2e8;
  --color-text:           #1a1f36;
  --color-text-muted:     #637082;
  --color-text-inverse:   #ffffff;

  /* Header */
  --color-header-bg:      #0a0e1a;
  --color-header-text:    #e8edf5;
  --color-header-muted:   #8a9bb0;

  /* Badges */
  --color-badge-sale:         #fee2e2;
  --color-badge-sale-text:    #c23934;
  --color-badge-new:          #d1fae5;
  --color-badge-new-text:     #065f46;
  --color-badge-bestseller:   #fef3c7;
  --color-badge-bestseller-text: #92400e;
  --color-badge-toprated:     #ede9fe;
  --color-badge-toprated-text: #5b21b6;

  /* Typography */
  --font-sans:    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-lg:    1.125rem;  /* 18px */
  --text-xl:    1.25rem;   /* 20px */
  --text-2xl:   1.5rem;    /* 24px */
  --text-3xl:   1.875rem;  /* 30px */
  --text-4xl:   2.25rem;   /* 36px */
  --text-5xl:   3rem;      /* 48px */

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

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

  /* Layout */
  --max-width:        1280px;
  --max-width-narrow: 900px;
  --header-height:    64px;
  --sidebar-width:    240px;

  /* Borders & Radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.08);
  --shadow-card-hover: 0 8px 24px rgba(0,112,210,.15), 0 2px 6px rgba(0,0,0,.06);

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

  /* Zone highlight (for p13n campaign zones) */
  --zone-outline-color: #0070d2;
  --zone-outline-active: 2px dashed var(--zone-outline-color);
}