/* ===== CPAR Design Tokens ===== */

:root {
  /* Fonts */
  --font-heading: 'Sora', system-ui, -apple-system, sans-serif;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;

  /* Spacing */
  --space-xs: 0.375rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
  --shadow-xl: 0 12px 48px rgba(0,0,0,0.18);

  /* Transitions */
  --transition-fast: 0.18s ease;
  --transition-base: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slower: 0.8s cubic-bezier(0.16, 1, 0.3, 1);

  /* Max width */
  --max-width: 1100px;
}

/* ===== Light Theme ===== */
html[data-theme="light"] {
  --bg: #f5f0e8;
  --bg-page: #faf6ef;
  --bg-card: #ffffff;
  --bg-card-hover: #fffcf5;
  --bg-tag: #f5efe3;
  --bg-tag-hover: #ebe3d3;
  --bg-input: #f8f4ec;
  --bg-header: rgba(250, 246, 239, 0.92);
  --bg-hero: linear-gradient(135deg, #1a0f00 0%, #3d2008 30%, #5c3310 60%, #8b5a2b 100%);
  --bg-hero-overlay: rgba(26, 15, 0, 0.55);

  --text-primary: #2c1810;
  --text-secondary: #5a4235;
  --text-muted: #8a7565;
  --text-faint: #b8a898;

  --border: #e8ddd0;
  --border-light: #f0e8db;
  --border-hover: #d4c4b0;

  --accent: #b8860b;
  --accent-hover: #9a7009;
  --accent-soft: rgba(184, 134, 11, 0.1);
  --accent-glow: rgba(184, 134, 11, 0.25);
  --accent-red: #a0522d;
  --accent-red-soft: rgba(160, 82, 45, 0.1);

  --luzon-color: #c17817;
  --visayas-color: #2e7d5b;
  --mindanao-color: #8b3a62;
  --any-color: #4a6fa5;

  --dot-active: #b8860b;
  --dot-inactive: #d4c4b0;
  --scrollbar-track: #f0e8db;
  --scrollbar-thumb: #d4c4b0;

  --chatbot-bg: #ffffff;
  --chatbot-msg-bot: #f5efe3;
  --chatbot-msg-bot-text: #2c1810;
  --chatbot-msg-user: #b8860b;
  --chatbot-msg-user-text: #ffffff;
}

/* ===== Dark Theme ===== */
html[data-theme="dark"] {
  --bg: #0f0c08;
  --bg-page: #141008;
  --bg-card: #1c1710;
  --bg-card-hover: #252015;
  --bg-tag: #28221a;
  --bg-tag-hover: #342c22;
  --bg-input: #201a12;
  --bg-header: rgba(20, 16, 8, 0.92);
  --bg-hero: linear-gradient(135deg, #0a0500 0%, #1a0f00 30%, #2d1a08 60%, #4a2f14 100%);
  --bg-hero-overlay: rgba(10, 5, 0, 0.6);

  --text-primary: #f0e6d8;
  --text-secondary: #bfad98;
  --text-muted: #8a7565;
  --text-faint: #5a4a3a;

  --border: #2e261c;
  --border-light: #231d14;
  --border-hover: #4a3d2e;

  --accent: #d4a017;
  --accent-hover: #e8b41e;
  --accent-soft: rgba(212, 160, 23, 0.12);
  --accent-glow: rgba(212, 160, 23, 0.2);
  --accent-red: #d2691e;
  --accent-red-soft: rgba(210, 105, 30, 0.12);

  --luzon-color: #e8a832;
  --visayas-color: #3dba80;
  --mindanao-color: #c76497;
  --any-color: #6b9fd4;

  --dot-active: #d4a017;
  --dot-inactive: #4a3d2e;
  --scrollbar-track: #141008;
  --scrollbar-thumb: #3a3028;

  --chatbot-bg: #1c1710;
  --chatbot-msg-bot: #28221a;
  --chatbot-msg-bot-text: #f0e6d8;
  --chatbot-msg-user: #d4a017;
  --chatbot-msg-user-text: #0f0c08;
}