:root {
  --color-bg: #fff4e0;
  --color-surface: #fffdf9;
  --color-surface-soft: #ffe7c6;
  --color-text: #2f211b;
  --color-text-muted: #6d5748;
  --color-primary: #ef4e2f;
  --color-primary-hover: #d13e22;
  --color-secondary: #2ea35f;
  --color-secondary-hover: #22814a;
  --color-accent: #ffbd3d;
  --color-border: #e8b981;
  --color-focus: #6a5cff;
  --color-outline: #8b5a2b;
  --color-ink-soft: #5a3927;

  --font-display: 'Baloo 2', 'Fredoka One', 'Trebuchet MS', 'Verdana', sans-serif;
  --font-body: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

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

  --shadow-soft: 0 8px 0 rgba(139, 90, 43, 0.2);
  --shadow-card: 0 14px 28px rgba(99, 56, 19, 0.16);
  --shadow-pop: 0 6px 0 rgba(99, 56, 19, 0.35);
  --shadow-lift: 0 10px 0 rgba(99, 56, 19, 0.28);
  --gradient-warm: linear-gradient(180deg, #fff7e9 0%, #ffe5bb 100%);
  --gradient-sun: linear-gradient(140deg, #ffcf67 0%, #ff8d43 100%);

  --container-max: 1120px;
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
}