/* ========================================
   DESIGN TOKENS — edit these to re-theme
   ======================================== */
:root {
  /* ---- Colors ---- */
  --color-primary:     #1a73e8;
  --color-primary-dark:#1558b0;
  --color-secondary:   #ff6f3c;
  --color-accent:      #ffc93c;

  --color-bg:          #ffffff;
  --color-bg-alt:      #f5f7fa;
  --color-surface:     #ffffff;

  --color-text:        #1e1e2f;
  --color-text-muted:  #6b7280;
  --color-text-invert: #ffffff;

  --color-border:      #e0e0e0;
  --color-border-focus:#1a73e8;

  --color-success:     #10b981;
  --color-error:       #ef4444;

  /* ---- Typography ---- */
  --font-body:    'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-heading: 'Segoe UI', system-ui, -apple-system, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  /* ---- Spacing ---- */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --header-height: 64px;

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

  /* ---- Shadows ---- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:  0 10px 30px rgba(0,0,0,0.12);

  /* ---- Transitions ---- */
  --transition: 0.25s ease;
}