/* ==========================================================================
   GrowithAI - Design Tokens & Variables (Light & Dark System)
   ========================================================================== */

:root {
  /* Fonts */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Plus Jakarta Sans', sans-serif;

  /* Light Theme (Default) */
  --color-bg: #FAF7F5;
  --color-bg-alt: #F6ECE8;
  --color-bg-alt-subtle: #FBF2EF;
  --color-surface: #FFFFFF;
  --color-surface-hover: #FDFBF9;
  
  /* Text */
  --color-text-title: #1A1415;
  --color-text-body: #5C5254;
  --color-text-muted: #827577;
  --color-text-subtle: #A89B9D;
  --color-text-inverse: #FFFFFF;

  /* Primary Brand Coral / Rose */
  --color-primary: #D15B58;
  --color-primary-hover: #BC4E4B;
  --color-primary-active: #A43F3D;
  --color-primary-light: #F8ECEB;
  --color-primary-ring: rgba(209, 91, 88, 0.25);

  /* Deep Wine / Featured Card */
  --color-wine-bg: #3C0D11;
  --color-wine-surface: #4A1217;
  --color-wine-border: rgba(255, 255, 255, 0.12);
  --color-wine-text: #FFFFFF;
  --color-wine-text-muted: #E6CCD0;

  /* Accent Pillars */
  --color-teal: #3E9B8E;
  --color-teal-bg: rgba(62, 155, 142, 0.12);
  --color-amber: #D3953C;
  --color-amber-bg: rgba(211, 149, 60, 0.12);
  --color-coral: #D15B58;
  --color-coral-bg: rgba(209, 91, 88, 0.12);

  /* Borders & Dividers */
  --color-border: #EFE4E0;
  --color-border-subtle: #F3EBE8;
  --color-border-hover: #DECFC9;

  /* Calendar Tokens */
  --color-calendar-bg: #FFFFFF;
  --color-calendar-text: #1A1415;
  --color-calendar-subtext: #827577;
  --color-calendar-border: #EFE4E0;
  --color-calendar-day-bg: #FBF2EF;
  --color-calendar-day-text: #5C5254;
  --color-calendar-day-active-bg: #D15B58;
  --color-calendar-day-active-text: #FFFFFF;
  --color-calendar-slot-bg: #FFFFFF;
  --color-calendar-slot-border: #EFE4E0;
  --color-calendar-slot-text: #1A1415;
  --color-calendar-slot-icon: #827577;
  --color-calendar-slot-active-bg: #F8ECEB;
  --color-calendar-slot-active-border: #D15B58;
  --color-calendar-slot-active-text: #1A1415;
  --color-calendar-slot-active-icon: #D15B58;

  /* Section Tracks & Dividers */
  --color-step-connector: rgba(209, 91, 88, 0.35);
  --color-faq-divider: rgba(209, 91, 88, 0.25);
  --color-footer-bg: #F6ECE8;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(35, 15, 18, 0.04);
  --shadow-md: 0 4px 16px -2px rgba(35, 15, 18, 0.06), 0 2px 6px -1px rgba(35, 15, 18, 0.03);
  --shadow-lg: 0 12px 32px -4px rgba(35, 15, 18, 0.08), 0 4px 12px -2px rgba(35, 15, 18, 0.04);
  --shadow-card: 0 2px 14px rgba(35, 15, 18, 0.04);
  --shadow-card-hover: 0 8px 24px -4px rgba(35, 15, 18, 0.08);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  /* Header & Nav */
  --header-bg: rgba(250, 247, 245, 0.92);
  --header-border: transparent;
}

/* ==========================================================================
   Dark Theme Overrides
   ========================================================================== */
[data-theme="dark"] {
  --color-bg: #0E0708;
  --color-bg-alt: #1A0C0E;
  --color-bg-alt-subtle: #1F0F12;
  --color-surface: #160B0D;
  --color-surface-hover: #221114;

  /* Text */
  --color-text-title: #FFFFFF;
  --color-text-body: #B3A3A5;
  --color-text-muted: #8E7E81;
  --color-text-subtle: #685A5D;
  --color-text-inverse: #0E0708;

  /* Primary Brand Coral / Rose */
  --color-primary: #E06967;
  --color-primary-hover: #EC7C7A;
  --color-primary-active: #F38F8D;
  --color-primary-light: rgba(224, 105, 103, 0.16);
  --color-primary-ring: rgba(224, 105, 103, 0.35);

  /* Deep Wine / Featured Card */
  --color-wine-bg: #28080C;
  --color-wine-surface: #360C11;
  --color-wine-border: rgba(255, 255, 255, 0.1);
  --color-wine-text: #FFFFFF;
  --color-wine-text-muted: #E6CCD0;

  /* Accent Pillars */
  --color-teal: #4EC5B5;
  --color-teal-bg: rgba(78, 197, 181, 0.14);
  --color-amber: #E5AA52;
  --color-amber-bg: rgba(229, 170, 82, 0.14);
  --color-coral: #E06967;
  --color-coral-bg: rgba(224, 105, 103, 0.14);

  /* Borders & Dividers */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-subtle: rgba(255, 255, 255, 0.05);
  --color-border-hover: rgba(255, 255, 255, 0.16);

  /* Calendar Tokens */
  --color-calendar-bg: #180D10;
  --color-calendar-text: #FFFFFF;
  --color-calendar-subtext: #B3A3A5;
  --color-calendar-border: rgba(255, 255, 255, 0.08);
  --color-calendar-day-bg: rgba(255, 255, 255, 0.06);
  --color-calendar-day-text: #B3A3A5;
  --color-calendar-day-active-bg: #E06967;
  --color-calendar-day-active-text: #FFFFFF;
  --color-calendar-slot-bg: rgba(255, 255, 255, 0.05);
  --color-calendar-slot-border: rgba(255, 255, 255, 0.08);
  --color-calendar-slot-text: #FFFFFF;
  --color-calendar-slot-icon: #B3A3A5;
  --color-calendar-slot-active-bg: rgba(224, 105, 103, 0.18);
  --color-calendar-slot-active-border: #E06967;
  --color-calendar-slot-active-text: #FFFFFF;
  --color-calendar-slot-active-icon: #E06967;

  /* Section Tracks & Dividers */
  --color-step-connector: rgba(255, 255, 255, 0.2);
  --color-faq-divider: rgba(255, 255, 255, 0.08);
  --color-footer-bg: #0E0708;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px -2px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px -4px rgba(0, 0, 0, 0.6);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 8px 28px -4px rgba(0, 0, 0, 0.6);

  /* Header & Nav */
  --header-bg: rgba(14, 7, 8, 0.92);
  --header-border: transparent;
}