/* ==========================================================================
   HoraJnana Material 3 Theme System
   Palettes: Green (Default), Purple, Yellow, Blue, Red
   Modes: Light, Dark, System
   ========================================================================== */

:root {
  /* Common standard constants */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  
  --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.12);
  --elevation-2: 0 3px 6px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
  --elevation-3: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.10);
  
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* ==========================================
   LIGHT THEMES
   ========================================== */

/* Green Light (Default) */
[data-theme="green"][data-mode="light"],
[data-theme="green"]:not([data-mode="dark"]) {
  --color-primary: #43A047;
  --color-on-primary: #FFFFFF;
  --color-primary-container: #C8E6C9;
  --color-on-primary-container: #00390A;
  
  --color-secondary: #388E3C;
  --color-on-secondary: #FFFFFF;
  --color-secondary-container: #A5D6A7;
  --color-on-secondary-container: #00390A;
  
  --color-tertiary: #2E7D32;
  --color-on-tertiary: #FFFFFF;
  --color-tertiary-container: #C8E6C9;
  --color-on-tertiary-container: #00390A;
  
  --color-background: #FFFBFF;
  --color-on-background: #1A1C19;
  --color-surface: #FFFBFF;
  --color-on-surface: #1A1C19;
  --color-surface-variant: #EDF1EA;
  --color-on-surface-variant: #00390A;
  --color-outline: #72796F;
  --color-error: #BA1A1A;
  --color-on-error: #FFFFFF;
  --color-error-container: #FFDAD6;
  --color-on-error-container: #410002;
}

/* Purple Light */
[data-theme="purple"][data-mode="light"],
[data-theme="purple"]:not([data-mode="dark"]) {
  --color-primary: #6650a4;
  --color-on-primary: #FFFFFF;
  --color-primary-container: #D0BCFF;
  --color-on-primary-container: #6650a4;
  
  --color-secondary: #625b71;
  --color-on-secondary: #FFFFFF;
  --color-secondary-container: #CCC2DC;
  --color-on-secondary-container: #625b71;
  
  --color-tertiary: #7D5260;
  --color-on-tertiary: #FFFFFF;
  --color-tertiary-container: #EFB8C8;
  --color-on-tertiary-container: #7D5260;
  
  --color-background: #FFFBFF;
  --color-on-background: #1C1B1E;
  --color-surface: #FFFBFF;
  --color-on-surface: #1C1B1E;
  --color-surface-variant: #F4EFF4;
  --color-on-surface-variant: #625b71;
  --color-outline: #79747E;
  --color-error: #BA1A1A;
  --color-on-error: #FFFFFF;
  --color-error-container: #FFDAD6;
  --color-on-error-container: #410002;
}

/* Yellow Light */
[data-theme="yellow"][data-mode="light"],
[data-theme="yellow"]:not([data-mode="dark"]) {
  --color-primary: #FBC02D;
  --color-on-primary: #000000;
  --color-primary-container: #FFF59D;
  --color-on-primary-container: #5F4300;
  
  --color-secondary: #F9A825;
  --color-on-secondary: #000000;
  --color-secondary-container: #FFF176;
  --color-on-secondary-container: #5F4300;
  
  --color-tertiary: #F57F17;
  --color-on-tertiary: #000000;
  --color-tertiary-container: #FFE082;
  --color-on-tertiary-container: #5F4300;
  
  --color-background: #FFFBFF;
  --color-on-background: #1D1B16;
  --color-surface: #FFFBFF;
  --color-on-surface: #1D1B16;
  --color-surface-variant: #F4F1E8;
  --color-on-surface-variant: #5F4300;
  --color-outline: #7B7669;
  --color-error: #BA1A1A;
  --color-on-error: #FFFFFF;
  --color-error-container: #FFDAD6;
  --color-on-error-container: #410002;
}

/* Blue Light */
[data-theme="blue"][data-mode="light"],
[data-theme="blue"]:not([data-mode="dark"]) {
  --color-primary: #1E88E5;
  --color-on-primary: #FFFFFF;
  --color-primary-container: #90CAF9;
  --color-on-primary-container: #003258;
  
  --color-secondary: #1976D2;
  --color-on-secondary: #FFFFFF;
  --color-secondary-container: #64B5F6;
  --color-on-secondary-container: #003258;
  
  --color-tertiary: #1565C0;
  --color-on-tertiary: #FFFFFF;
  --color-tertiary-container: #BBDEFB;
  --color-on-tertiary-container: #003258;
  
  --color-background: #FFFBFF;
  --color-on-background: #1A1C1E;
  --color-surface: #FFFBFF;
  --color-on-surface: #1A1C1E;
  --color-surface-variant: #E9EFF4;
  --color-on-surface-variant: #003258;
  --color-outline: #72777F;
  --color-error: #BA1A1A;
  --color-on-error: #FFFFFF;
  --color-error-container: #FFDAD6;
  --color-on-error-container: #410002;
}

/* Red Light */
[data-theme="red"][data-mode="light"],
[data-theme="red"]:not([data-mode="dark"]) {
  --color-primary: #BA1A1A;
  --color-on-primary: #FFFFFF;
  --color-primary-container: #FFDAD6;
  --color-on-primary-container: #410002;
  
  --color-secondary: #775652;
  --color-on-secondary: #FFFFFF;
  --color-secondary-container: #E7BDB8;
  --color-on-secondary-container: #410002;
  
  --color-tertiary: #93000A;
  --color-on-tertiary: #FFFFFF;
  --color-tertiary-container: #FFDAD6;
  --color-on-tertiary-container: #410002;
  
  --color-background: #FFFBFF;
  --color-on-background: #201A1A;
  --color-surface: #FFFBFF;
  --color-on-surface: #201A1A;
  --color-surface-variant: #F4EEEB;
  --color-on-surface-variant: #410002;
  --color-outline: #857371;
  --color-error: #BA1A1A;
  --color-on-error: #FFFFFF;
  --color-error-container: #FFDAD6;
  --color-on-error-container: #410002;
}

/* ==========================================
   DARK THEMES
   ========================================== */

/* Green Dark */
[data-theme="green"][data-mode="dark"] {
  --color-primary: #A5D6A7;
  --color-on-primary: #00390A;
  --color-primary-container: #005313;
  --color-on-primary-container: #A5D6A7;
  
  --color-secondary: #81C784;
  --color-on-secondary: #00390A;
  --color-secondary-container: #005313;
  --color-on-secondary-container: #A5D6A7;
  
  --color-tertiary: #C8E6C9;
  --color-on-tertiary: #00390A;
  --color-tertiary-container: #005313;
  --color-on-tertiary-container: #C8E6C9;
  
  --color-background: #1A1C19;
  --color-on-background: #E2E3DD;
  --color-surface: #1A1C19;
  --color-on-surface: #E2E3DD;
  --color-surface-variant: #424940;
  --color-on-surface-variant: #C2C9BD;
  --color-outline: #8C9388;
  --color-error: #FFB4AB;
  --color-on-error: #690005;
  --color-error-container: #93000A;
  --color-on-error-container: #FFDAD6;
}

/* Purple Dark */
[data-theme="purple"][data-mode="dark"] {
  --color-primary: #D0BCFF;
  --color-on-primary: #6650a4;
  --color-primary-container: #4F378B;
  --color-on-primary-container: #D0BCFF;
  
  --color-secondary: #CCC2DC;
  --color-on-secondary: #625b71;
  --color-secondary-container: #4A4458;
  --color-on-secondary-container: #CCC2DC;
  
  --color-tertiary: #EFB8C8;
  --color-on-tertiary: #7D5260;
  --color-tertiary-container: #633B48;
  --color-on-tertiary-container: #EFB8C8;
  
  --color-background: #1C1B1E;
  --color-on-background: #E6E1E5;
  --color-surface: #1C1B1E;
  --color-on-surface: #E6E1E5;
  --color-surface-variant: #49454F;
  --color-on-surface-variant: #CAC4D0;
  --color-outline: #938F99;
  --color-error: #FFB4AB;
  --color-on-error: #690005;
  --color-error-container: #93000A;
  --color-on-error-container: #FFDAD6;
}

/* Yellow Dark */
[data-theme="yellow"][data-mode="dark"] {
  --color-primary: #FFF59D;
  --color-on-primary: #422C00;
  --color-primary-container: #5F4300;
  --color-on-primary-container: #FFF59D;
  
  --color-secondary: #FFF176;
  --color-on-secondary: #422C00;
  --color-secondary-container: #5F4300;
  --color-on-secondary-container: #FFF176;
  
  --color-tertiary: #FFE082;
  --color-on-tertiary: #422C00;
  --color-tertiary-container: #5F4300;
  --color-on-tertiary-container: #FFE082;
  
  --color-background: #1D1B16;
  --color-on-background: #E7E2D9;
  --color-surface: #1D1B16;
  --color-on-surface: #E7E2D9;
  --color-surface-variant: #4B4739;
  --color-on-surface-variant: #CEC6B4;
  --color-outline: #979080;
  --color-error: #FFB4AB;
  --color-on-error: #690005;
  --color-error-container: #93000A;
  --color-on-error-container: #FFDAD6;
}

/* Blue Dark */
[data-theme="blue"][data-mode="dark"] {
  --color-primary: #90CAF9;
  --color-on-primary: #003258;
  --color-primary-container: #00497D;
  --color-on-primary-container: #90CAF9;
  
  --color-secondary: #64B5F6;
  --color-on-secondary: #003258;
  --color-secondary-container: #00497D;
  --color-on-secondary-container: #64B5F6;
  
  --color-tertiary: #BBDEFB;
  --color-on-tertiary: #003258;
  --color-tertiary-container: #00497D;
  --color-on-tertiary-container: #BBDEFB;
  
  --color-background: #1A1C1E;
  --color-on-background: #E2E2E6;
  --color-surface: #1A1C1E;
  --color-on-surface: #E2E2E6;
  --color-surface-variant: #43474E;
  --color-on-surface-variant: #C3C7D0;
  --color-outline: #8D9199;
  --color-error: #FFB4AB;
  --color-on-error: #690005;
  --color-error-container: #93000A;
  --color-on-error-container: #FFDAD6;
}

/* Red Dark */
[data-theme="red"][data-mode="dark"] {
  --color-primary: #FFB4AB;
  --color-on-primary: #690005;
  --color-primary-container: #5D1212;
  --color-on-primary-container: #FFDAD6;
  
  --color-secondary: #E7BDB8;
  --color-on-secondary: #442926;
  --color-secondary-container: #3D2625;
  --color-on-secondary-container: #E7BDB8;
  
  --color-tertiary: #FFDAD6;
  --color-on-tertiary: #690005;
  --color-tertiary-container: #5D1212;
  --color-on-tertiary-container: #FFDAD6;
  
  --color-background: #140C0B;
  --color-on-background: #EDE0DF;
  --color-surface: #140C0B;
  --color-on-surface: #EDE0DF;
  --color-surface-variant: #352221;
  --color-on-surface-variant: #D8C2BF;
  --color-outline: #A08C8A;
  --color-error: #FFB4AB;
  --color-on-error: #690005;
  --color-error-container: #93000A;
  --color-on-error-container: #FFDAD6;
}

/* Custom Light Theme Base */
[data-theme="custom"][data-mode="light"],
[data-theme="custom"]:not([data-mode="dark"]) {
  --color-primary: #43A047;
  --color-on-primary: #FFFFFF;
  --color-primary-container: #C8E6C9;
  --color-on-primary-container: #00390A;
  
  --color-secondary: #388E3C;
  --color-on-secondary: #FFFFFF;
  --color-secondary-container: #A5D6A7;
  --color-on-secondary-container: #00390A;
  
  --color-tertiary: #2E7D32;
  --color-on-tertiary: #FFFFFF;
  --color-tertiary-container: #C8E6C9;
  --color-on-tertiary-container: #00390A;
  
  --color-background: #FFFBFF;
  --color-on-background: #1A1C19;
  --color-surface: #FFFBFF;
  --color-on-surface: #1A1C19;
  --color-surface-variant: #EDF1EA;
  --color-on-surface-variant: #00390A;
  --color-outline: #72796F;
  --color-error: #BA1A1A;
  --color-on-error: #FFFFFF;
  --color-error-container: #FFDAD6;
  --color-on-error-container: #410002;
}

/* Custom Dark Theme Base */
[data-theme="custom"][data-mode="dark"] {
  --color-primary: #A5D6A7;
  --color-on-primary: #00390A;
  --color-primary-container: #005313;
  --color-on-primary-container: #A5D6A7;
  
  --color-secondary: #81C784;
  --color-on-secondary: #00390A;
  --color-secondary-container: #005313;
  --color-on-secondary-container: #A5D6A7;
  
  --color-tertiary: #C8E6C9;
  --color-on-tertiary: #00390A;
  --color-tertiary-container: #005313;
  --color-on-tertiary-container: #C8E6C9;
  
  --color-background: #1A1C19;
  --color-on-background: #E2E3DD;
  --color-surface: #1A1C19;
  --color-on-surface: #E2E3DD;
  --color-surface-variant: #424940;
  --color-on-surface-variant: #C2C9BD;
  --color-outline: #8C9388;
  --color-error: #FFB4AB;
  --color-on-error: #690005;
  --color-error-container: #93000A;
  --color-on-error-container: #FFDAD6;
}