/* Design tokens: colors, type scale, spacing, elevation. */

:root {
  color-scheme: light;

  /* Accent — overridden by [data-accent] below. */
  --accent: hsl(28 92% 52%);
  --accent-soft: hsl(28 92% 52% / 0.12);
  --accent-contrast: #fff;

  /* Surfaces */
  --bg: #f4f5fa;
  --surface: #fff;
  --surface-2: #eceef6;
  --border: #dfe2ee;

  /* Text */
  --text: #1b1c2b;
  --text-muted: #565a75;

  /* Type */
  --font-sans:
    "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Clicker Script", var(--font-sans);
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.2vw + 1.2rem, 2rem);
  --text-3xl: clamp(1.875rem, 2.4vw + 1.2rem, 2.75rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Shape & depth */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgb(16 18 40 / 0.06), 0 1px 3px rgb(16 18 40 / 0.08);
  --shadow: 0 4px 12px rgb(16 18 40 / 0.08), 0 2px 4px rgb(16 18 40 / 0.04);
  --shadow-lg: 0 18px 40px rgb(16 18 40 / 0.14);

  /* Layout */
  --sidebar-w: 270px;
  --content-max: 1100px;
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0e1016;
  --surface: #171a23;
  --surface-2: #212533;
  --border: #2b3040;
  --text: #f1f2f7;
  --text-muted: #a3a8be;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow: 0 4px 14px rgb(0 0 0 / 0.45);
  --shadow-lg: 0 18px 44px rgb(0 0 0 / 0.55);
}

[data-accent="amber"] {
  --accent: hsl(28 92% 52%);
  --accent-soft: hsl(28 92% 52% / 0.14);
}
[data-accent="violet"] {
  --accent: hsl(266 85% 62%);
  --accent-soft: hsl(266 85% 62% / 0.16);
}
[data-accent="emerald"] {
  --accent: hsl(158 70% 40%);
  --accent-soft: hsl(158 70% 40% / 0.14);
}
[data-accent="blue"] {
  --accent: hsl(217 88% 56%);
  --accent-soft: hsl(217 88% 56% / 0.14);
}
[data-accent="rose"] {
  --accent: hsl(345 80% 55%);
  --accent-soft: hsl(345 80% 55% / 0.14);
}