@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
  --font-main: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Space Grotesk", var(--font-main);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
}

body[data-theme="light"] {
  color-scheme: light;
  --bg-primary: #fffdf8;
  --bg-secondary: #f4f0e8;
  --bg-card: #ffffff;
  --text-primary: #182321;
  --text-secondary: #66716d;
  --border-color: #e5dfd4;
  --accent: #e35d45;
  --accent-hover: #c94a35;
  --success: #16a34a;
  --danger: #dc2626;
  --shadow: 0 16px 40px rgba(39, 34, 25, 0.09);
}

body[data-theme="dark"] {
  color-scheme: dark;
  --bg-primary: #08090a;
  --bg-secondary: #0f1011;
  --bg-card: #151719;
  --text-primary: #f7f8f8;
  --text-secondary: #8a8f98;
  --border-color: rgba(255, 255, 255, 0.12);
  --accent: #a6a8ff;
  --accent-hover: #c0c2ff;
  --success: #65d6a0;
  --danger: #ff8f87;
  --shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05) inset, 0 12px 32px rgba(0, 0, 0, 0.35);
}