/* tokens.css — Design Tokens (CSS Variables) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* =======================================================================
   1. DESIGN TOKENS
   ======================================================================= */

/* ---- Light Mode ---- */
:root {
  --bg: 210 20% 98%;
  --fg: 222 47% 11%;
  --card: 0 0% 100%;
  --card-fg: 222 47% 11%;
  --popover: 0 0% 100%;
  --popover-fg: 222 47% 11%;
  --primary: 152 76% 36%;
  --primary-fg: 0 0% 100%;
  --secondary: 214 20% 95%;
  --secondary-fg: 222 47% 11%;
  --muted: 214 20% 95%;
  --muted-fg: 215 16% 47%;
  --accent: 214 20% 95%;
  --accent-fg: 222 47% 11%;
  --destructive: 0 84% 60%;
  --destructive-fg: 0 0% 98%;
  --border: 214 20% 91%;
  --input: 214 20% 91%;
  --ring: 152 76% 36%;
  --radius: 0.75rem;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04), 0 1px 3px rgb(0 0 0 / 0.03);
  --shadow: 0 2px 8px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04);
  --shadow-md: 0 4px 16px rgb(0 0 0 / 0.08), 0 2px 4px rgb(0 0 0 / 0.04);
  --shadow-lg: 0 8px 32px rgb(0 0 0 / 0.1), 0 4px 8px rgb(0 0 0 / 0.05);
  --spring: cubic-bezier(0.16, 1, 0.3, 1);
  --glass: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.4);
}

/* ---- Dark Mode ---- */
.dark {
  --bg: 224 30% 7%;
  --fg: 210 40% 96%;
  --card: 224 25% 10%;
  --card-fg: 210 40% 96%;
  --popover: 224 25% 10%;
  --popover-fg: 210 40% 96%;
  --primary: 152 70% 48%;
  --primary-fg: 0 0% 100%;
  --secondary: 224 20% 14%;
  --secondary-fg: 210 40% 96%;
  --muted: 224 20% 14%;
  --muted-fg: 215 16% 57%;
  --accent: 224 20% 16%;
  --accent-fg: 210 40% 96%;
  --destructive: 0 63% 31%;
  --destructive-fg: 0 0% 98%;
  --border: 224 15% 16%;
  --input: 224 15% 16%;
  --ring: 152 72% 40%;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.2);
  --shadow: 0 2px 8px rgb(0 0 0 / 0.25);
  --shadow-md: 0 4px 16px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 8px 32px rgb(0 0 0 / 0.35);
  --glass: rgba(15, 20, 35, 0.7);
  --glass-border: rgba(255, 255, 255, 0.06);
}