/* src/css/tokens.css — Design System §2.1-2.3 token layers verbatim */

:root {
  /* ── Layer 1: Primitive Tokens ── */
  --primitive-blue-50: #EFF6FF;
  --primitive-blue-100: #DBEAFE;
  --primitive-blue-200: #BFDBFE;
  --primitive-blue-500: #3B82F6;
  --primitive-blue-600: #2563EB;
  --primitive-blue-700: #1D4ED8;
  --primitive-blue-800: #1E40AF;
  --primitive-blue-900: #1E3A8A;

  --primitive-amber-50: #FFFBEB;
  --primitive-amber-100: #FEF3C7;
  --primitive-amber-200: #FDE68A;
  --primitive-amber-300: #FCD34D;
  --primitive-amber-500: #F59E0B;
  --primitive-amber-600: #D97706;
  --primitive-amber-700: #B45309;
  --primitive-amber-900: #78350F;

  --primitive-pink-500: #EC4899;
  --primitive-pink-600: #DB2777;
  --primitive-pink-700: #BE185D;
  --primitive-pink-800: #9D174D;

  --primitive-emerald-50: #ECFDF5;
  --primitive-emerald-100: #D1FAE5;
  --primitive-emerald-200: #A7F3D0;
  --primitive-emerald-500: #10B981;
  --primitive-emerald-600: #059669;
  --primitive-emerald-700: #047857;
  --primitive-emerald-800: #065F46;

  --primitive-slate-50: #F8FAFC;
  --primitive-slate-100: #F1F5F9;
  --primitive-slate-200: #E2E8F0;
  --primitive-slate-300: #CBD5E1;
  --primitive-slate-400: #94A3B8;
  --primitive-slate-500: #64748B;
  --primitive-slate-600: #475569;
  --primitive-slate-700: #334155;
  --primitive-slate-800: #1E293B;
  --primitive-slate-900: #0F172A;

  --primitive-white: #FFFFFF;

  --primitive-space-1: 4px;
  --primitive-space-2: 8px;
  --primitive-space-3: 12px;
  --primitive-space-4: 16px;
  --primitive-space-5: 20px;
  --primitive-space-6: 24px;
  --primitive-space-8: 32px;
  --primitive-space-10: 40px;
  --primitive-space-12: 48px;
  --primitive-space-16: 64px;

  --primitive-radius-xs: 8px;
  --primitive-radius-sm: 14px;
  --primitive-radius-md: 20px;
  --primitive-radius-lg: 28px;
  --primitive-radius-full: 9999px;

  --primitive-font-baloo: 'Baloo 2', cursive, sans-serif;
  --primitive-font-comic: 'Comic Neue', cursive, sans-serif;

  /* ── Layer 2: Semantic Tokens ── */
  --color-primary: var(--primitive-blue-600);
  --color-primary-hover: var(--primitive-blue-700);
  --color-primary-shadow: var(--primitive-blue-800);
  --color-on-primary: var(--primitive-white);

  --color-secondary: var(--primitive-amber-500);
  --color-secondary-hover: var(--primitive-amber-600);
  --color-secondary-shadow: var(--primitive-amber-700);
  --color-on-secondary: var(--primitive-slate-900);

  --color-accent: var(--primitive-pink-600);
  --color-accent-hover: var(--primitive-pink-700);
  --color-accent-shadow: var(--primitive-pink-800);
  --color-on-accent: var(--primitive-white);

  --color-success: var(--primitive-emerald-700);
  --color-success-bg: var(--primitive-emerald-50);
  --color-success-border: var(--primitive-emerald-200);
  --color-on-success: var(--primitive-white);

  --color-warning-bg: var(--primitive-amber-100);
  --color-warning-border: var(--primitive-amber-300);
  --color-warning-text: var(--primitive-amber-900);

  --color-background: var(--primitive-blue-50);
  --color-foreground: var(--primitive-slate-900);
  --color-muted: var(--primitive-slate-600);
  --color-muted-bg: var(--primitive-slate-100);

  --color-card: var(--primitive-white);
  --color-card-border: var(--primitive-blue-100);
  --color-border: var(--primitive-blue-100);

  --font-heading: var(--primitive-font-baloo);
  --font-body: var(--primitive-font-comic);

  --font-size-xs: 13px;
  --font-size-sm: 15px;
  --font-size-base: 18px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 28px;
  --font-size-3xl: 36px;

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;

  --border-width-clay: 3.5px;
  --radius-sm: var(--primitive-radius-sm);
  --radius-md: var(--primitive-radius-md);
  --radius-lg: var(--primitive-radius-lg);
  --radius-full: var(--primitive-radius-full);

  --shadow-clay-card: 0 8px 0 var(--primitive-slate-300), 0 16px 24px rgba(37, 99, 235, 0.08);

  --touch-min: 48px;
  --touch-primary: 60px;

  /* ── Layer 3: Component Tokens ── */
  --button-height-primary: 60px;
  --button-height-standard: 48px;
  --button-padding-x: 24px;
  --button-border-width: var(--border-width-clay);
  --button-border-radius: var(--radius-sm);
  --button-font-family: var(--font-heading);
  --button-font-weight: 700;
  --button-font-size: 18px;

  --button-shadow-primary: 0 6px 0 var(--color-primary-shadow), 0 10px 16px rgba(37, 99, 235, 0.25);
  --button-shadow-secondary: 0 6px 0 var(--color-secondary-shadow), 0 10px 16px rgba(245, 158, 11, 0.3);
  --button-shadow-accent: 0 6px 0 var(--color-accent-shadow), 0 10px 16px rgba(219, 39, 119, 0.25);
  --button-shadow-audio: 0 4px 0 #CBD5E1;

  --topic-card-bg: var(--color-card);
  --topic-card-border: var(--border-width-clay) solid var(--color-card-border);
  --topic-card-radius: var(--radius-md);
  --topic-card-padding: 24px 18px;
  --topic-card-shadow: var(--shadow-clay-card);
  --topic-pod-size: 80px;

  --choice-card-bg: var(--primitive-white);
  --choice-card-border: var(--border-width-clay) solid var(--primitive-slate-300);
  --choice-card-radius: var(--radius-md);
  --choice-card-padding: 24px 16px;
  --choice-card-shadow: 0 6px 0 var(--primitive-slate-300);
  --choice-card-selected-border: var(--border-width-clay) solid var(--color-primary);
  --choice-card-selected-shadow: 0 6px 0 var(--color-primary-shadow);

  --feedback-radius: var(--radius-md);
  --feedback-padding: 16px 20px;
  --feedback-gentle-bg: var(--color-warning-bg);
  --feedback-gentle-border: 3px solid var(--color-warning-border);
  --feedback-gentle-text: var(--color-warning-text);
  --feedback-success-bg: var(--color-success-bg);
  --feedback-success-border: 3px solid var(--color-success-border);
  --feedback-success-text: var(--primitive-emerald-800);

  --star-gold-fill: var(--color-secondary);
  --star-empty-fill: var(--primitive-slate-200);
  --star-reward-size: 84px;
}