/*
 * Design tokens: the only place colors, fonts, sizes, radii and shadows are defined.
 * Template: A - Crayon Pop. Change a value here and the whole site follows.
 */
:root {
  /* Color: light theme */
  --bg: #fffaf2;
  --surface: #ffffff;
  --surface-2: #fff1df;
  --text: #2b2118;
  --text-muted: #6f5d4c;
  --border: #f0dcc4;
  --primary: #e2552d;
  --primary-hover: #c9441f;
  --on-primary: #ffffff;
  --accent: #ffc43d;
  --success: #1f8a4c;
  --success-bg: #e3f5ea;
  --warning: #9a5b00;
  --warning-bg: #fff1d1;
  --danger: #c62f2f;
  --danger-bg: #fde4e2;
  --info: #1d63c2;
  --info-bg: #e2edfc;
  --focus: #1d63c2;
  --line-art: #2b2118;
  --paper: #ffffff;
  --overlay: rgba(43, 33, 24, 0.45);

  /* Typography */
  --font-display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 0.75rem;   /* 12 */
  --text-sm: 0.875rem;  /* 14 */
  --text-base: 1rem;    /* 16 */
  --text-lg: 1.125rem;  /* 18 */
  --text-xl: 1.375rem;  /* 22 */
  --text-2xl: 1.75rem;  /* 28 */
  --text-3xl: clamp(1.875rem, 4.5vw, 2.25rem); /* 30 -> 36 */
  --text-hero: clamp(2rem, 5.5vw, 3rem);
  --leading-body: 1.6;
  --leading-heading: 1.2;

  /* Spacing: multiples of 4px only */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Layout */
  --container: 1200px;
  --gutter: 16px;
  --header-h: 68px;
  --sidebar-w: 248px;

  /* Radius */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  /* Shadow */
  --shadow-sm: 0 2px 0 var(--border);
  --shadow-md: 0 8px 24px rgba(120, 60, 10, 0.12);

  /* Controls: fixed sizes used everywhere */
  --control-sm: 36px;
  --control-md: 44px;
  --control-lg: 52px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration: 180ms;

  color-scheme: light;
}

/* Light is the default. Dark only when the visitor picks it with the theme button (data-theme="dark"). */
:root[data-theme="dark"] {
  --bg: #1a1511;
  --surface: #241d17;
  --surface-2: #2e251d;
  --text: #f6ece0;
  --text-muted: #c2ae98;
  --border: #3e3227;
  --primary: #ff7a52;
  --primary-hover: #ff936f;
  --on-primary: #1a1511;
  --accent: #ffcf5c;
  --success: #5fd394;
  --success-bg: #16301f;
  --warning: #f2b84b;
  --warning-bg: #33270f;
  --danger: #ff8a80;
  --danger-bg: #3a1a18;
  --info: #7fb2ff;
  --info-bg: #172a45;
  --focus: #7fb2ff;
  --line-art: #f6ece0;
  --overlay: rgba(0, 0, 0, 0.6);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}