/* =============================================================================
   CSS VARIABLES - FUN PASTEL / SYNTHWAVE THEME
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

:root {
  /* Font sizes */
  --font-size-base: 16px;
  --font-size-sm: 0.875em;
  --font-size-xs: 0.8em;
  --font-size-lg: 1.125em;
  --font-size-xl: 1.25em;
  --font-size-2xl: 1.5em;
  
  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  
  /* Border radius - more rounded for fun feel */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  
  /* Touch targets */
  --touch-target-min: 44px;
  
  /* Fonts */
  --font-display: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Font size modifiers */
[data-font-size="small"] { --font-size-base: 14px; }
[data-font-size="medium"] { --font-size-base: 16px; }
[data-font-size="large"] { --font-size-base: 18px; }
[data-font-size="x-large"] { --font-size-base: 20px; }

/* =============================================================================
   LIGHT THEME - Cool Greens, Teals, Purple-Blues (Softer/Dimmer)
   ============================================================================= */
[data-theme="light"] {
  --bg-primary: #E8EEEC;
  --bg-secondary: #EFF4F2;
  --bg-tertiary: #E0E8E5;
  --bg-hover: #D5DFDB;
  --bg-selected: #D0DDE5;
  
  /* Warm neutrals for text - AAA compliant */
  --text-primary: #1F2D2B;
  --text-secondary: #3A4A48;
  --text-muted: #5A6B68;
  --text-on-accent: #FFFFFF;
  
  --border-light: #C8D5D0;
  --border-medium: #A8BBB5;
  
  /* Accent - teal */
  --accent-primary: #3D8078;
  --accent-hover: #326862;
  
  /* Title gradient - teals and purple-blues */
  --title-gradient: linear-gradient(135deg, #4A8878 0%, #5A8098 50%, #7070A0 100%);
  
  /* Header background - subtle cool gradient */
  --header-bg: linear-gradient(135deg, #E8EEEC 0%, #E0EAE8 100%);
  
  /* Card shadows */
  --shadow-sm: 0 2px 8px rgba(30, 50, 45, 0.08);
  --shadow-md: 0 4px 16px rgba(30, 50, 45, 0.12);
  --shadow-lg: 0 8px 32px rgba(30, 50, 45, 0.18);
  
  /* Modal overlay */
  --overlay-bg: rgba(30, 50, 45, 0.5);
  
  /* Calendar event colors - AAA contrast (7:1 minimum) */
  /* 1170 - Dusty Plum / Mauve (keeping for distinction) */
  --cal-1170-primary-border: #8B6B7A;
  --cal-1170-primary-bg: #F5EEF2;
  --cal-1170-primary-text: #4A3040;
  --cal-1170-secondary-border: #A888A0;
  --cal-1170-secondary-bg: #F8F2F6;
  --cal-1170-secondary-text: #503848;
  
  /* 1181 - Forest / Moss / Teal */
  --cal-1181-primary-border: #5A8A70;
  --cal-1181-primary-bg: #ECF5F0;
  --cal-1181-primary-text: #1E4030;
  --cal-1181-secondary-border: #7AAA60;
  --cal-1181-secondary-bg: #F0F6EA;
  --cal-1181-secondary-text: #2A4820;
  --cal-1181-tertiary-border: #5090A0;
  --cal-1181-tertiary-bg: #EAF4F6;
  --cal-1181-tertiary-text: #1A4050;
  
  /* 1190 - Periwinkle / Slate Blue */
  --cal-1190-primary-border: #6878A8;
  --cal-1190-primary-bg: #EEEEF6;
  --cal-1190-primary-text: #2A3058;
  --cal-1190-secondary-border: #8898C0;
  --cal-1190-secondary-bg: #F2F2F8;
  --cal-1190-secondary-text: #303860;
  
  /* 2740 - Warm Earth / Sienna */
  --cal-2740-primary-border: #A07050;
  --cal-2740-primary-bg: #F6F0EA;
  --cal-2740-primary-text: #4A3020;
  --cal-2740-secondary-border: #B88868;
  --cal-2740-secondary-bg: #F8F4EE;
  --cal-2740-secondary-text: #503828;
  
  /* Calendar UI colors */
  --today-bg: #E8F2F0;
  --today-border: #4A8F85;
  --today-number-bg: #4A8F85;
  --today-number-text: #FFFFFF;
  --selected-week-bg: #F0F6F5;
  --other-month-text: #90A0A0;
  --other-month-bg: #F5F8F8;
  --event-dot: #4A8F85;
}

/* =============================================================================
   DARK THEME - Muted Synthwave
   ============================================================================= */
[data-theme="dark"] {
  --bg-primary: #1A1625;
  --bg-secondary: #231E30;
  --bg-tertiary: #2D2640;
  --bg-hover: #3A3250;
  --bg-selected: #3D3455;
  
  /* Soft light text - AAA compliant */
  --text-primary: #F0EBF4;
  --text-secondary: #D0C8DC;
  --text-muted: #A89CB8;
  --text-on-accent: #1A1625;
  
  --border-light: #3A3250;
  --border-medium: #4A4260;
  
  /* Accent - soft coral/peach */
  --accent-primary: #E8A598;
  --accent-hover: #F0B8AC;
  
  /* Title gradient - synthwave sunset */
  --title-gradient: linear-gradient(135deg, #E8A598 0%, #D4A5C9 50%, #A5C4D4 100%);
  
  /* Header background - deep purple gradient */
  --header-bg: linear-gradient(135deg, #1A1625 0%, #231E35 100%);
  
  /* Card shadows - subtle glow */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  
  /* Modal overlay */
  --overlay-bg: rgba(10, 8, 18, 0.6);
  
  /* Calendar event colors - muted neon */
  /* 1170 - Soft Pink / Mauve */
  --cal-1170-primary-border: #D4A0B0;
  --cal-1170-primary-bg: #2D2435;
  --cal-1170-primary-text: #E8C0D0;
  --cal-1170-secondary-border: #E0B8C8;
  --cal-1170-secondary-bg: #302538;
  --cal-1170-secondary-text: #F0D0E0;
  
  /* 1181 - Soft Mint / Lime / Cyan */
  --cal-1181-primary-border: #80C4A0;
  --cal-1181-primary-bg: #1E2D28;
  --cal-1181-primary-text: #A8E0C0;
  --cal-1181-secondary-border: #B8D888;
  --cal-1181-secondary-bg: #242D1E;
  --cal-1181-secondary-text: #D0F0A8;
  --cal-1181-tertiary-border: #80C4D4;
  --cal-1181-tertiary-bg: #1E2830;
  --cal-1181-tertiary-text: #A8E0F0;
  
  /* 1190 - Soft Lavender / Periwinkle */
  --cal-1190-primary-border: #A0A8D4;
  --cal-1190-primary-bg: #24243D;
  --cal-1190-primary-text: #C0C8E8;
  --cal-1190-secondary-border: #B8C0E0;
  --cal-1190-secondary-bg: #282840;
  --cal-1190-secondary-text: #D0D8F0;
  
  /* 2740 - Soft Peach / Coral */
  --cal-2740-primary-border: #E0A888;
  --cal-2740-primary-bg: #2D241E;
  --cal-2740-primary-text: #F0C8A8;
  --cal-2740-secondary-border: #E8C0A0;
  --cal-2740-secondary-bg: #302820;
  --cal-2740-secondary-text: #F8D8C0;
  
  /* Calendar UI colors */
  --today-bg: #2D2840;
  --today-border: #E8A598;
  --today-number-bg: #E8A598;
  --today-number-text: #1A1625;
  --selected-week-bg: #282435;
  --other-month-text: #5A5068;
  --other-month-bg: #1E1A28;
  --event-dot: #E8A598;
}

/* =============================================================================
   CALENDAR COLOR CLASSES
   ============================================================================= */

/* 1170 */
.cal-1170-primary {
  border-left-color: var(--cal-1170-primary-border);
  background-color: var(--cal-1170-primary-bg);
  color: var(--cal-1170-primary-text);
}
.cal-1170-secondary {
  border-left-color: var(--cal-1170-secondary-border);
  background-color: var(--cal-1170-secondary-bg);
  color: var(--cal-1170-secondary-text);
}

/* 1181 */
.cal-1181-primary {
  border-left-color: var(--cal-1181-primary-border);
  background-color: var(--cal-1181-primary-bg);
  color: var(--cal-1181-primary-text);
}
.cal-1181-secondary {
  border-left-color: var(--cal-1181-secondary-border);
  background-color: var(--cal-1181-secondary-bg);
  color: var(--cal-1181-secondary-text);
}
.cal-1181-tertiary {
  border-left-color: var(--cal-1181-tertiary-border);
  background-color: var(--cal-1181-tertiary-bg);
  color: var(--cal-1181-tertiary-text);
}

/* 1190 */
.cal-1190-primary {
  border-left-color: var(--cal-1190-primary-border);
  background-color: var(--cal-1190-primary-bg);
  color: var(--cal-1190-primary-text);
}
.cal-1190-secondary {
  border-left-color: var(--cal-1190-secondary-border);
  background-color: var(--cal-1190-secondary-bg);
  color: var(--cal-1190-secondary-text);
}

/* 2740 */
.cal-2740-primary {
  border-left-color: var(--cal-2740-primary-border);
  background-color: var(--cal-2740-primary-bg);
  color: var(--cal-2740-primary-text);
}
.cal-2740-secondary {
  border-left-color: var(--cal-2740-secondary-border);
  background-color: var(--cal-2740-secondary-bg);
  color: var(--cal-2740-secondary-text);
}

/* Color dots */
.color-dot.cal-1170-primary, .section-dot.cal-1170-primary { background-color: var(--cal-1170-primary-border); }
.color-dot.cal-1170-secondary, .section-dot.cal-1170-secondary { background-color: var(--cal-1170-secondary-border); }
.color-dot.cal-1181-primary, .section-dot.cal-1181-primary { background-color: var(--cal-1181-primary-border); }
.color-dot.cal-1181-secondary, .section-dot.cal-1181-secondary { background-color: var(--cal-1181-secondary-border); }
.color-dot.cal-1181-tertiary, .section-dot.cal-1181-tertiary { background-color: var(--cal-1181-tertiary-border); }
.color-dot.cal-1190-primary, .section-dot.cal-1190-primary { background-color: var(--cal-1190-primary-border); }
.color-dot.cal-1190-secondary, .section-dot.cal-1190-secondary { background-color: var(--cal-1190-secondary-border); }
.color-dot.cal-2740-primary, .section-dot.cal-2740-primary { background-color: var(--cal-2740-primary-border); }
.color-dot.cal-2740-secondary, .section-dot.cal-2740-secondary { background-color: var(--cal-2740-secondary-border); }