/* Theme System - CSS Variables for Runtime Theme Switching
 *
 * Each theme defines its colors as space-separated RGB channel triplets (`--color-*-rgb`).
 * Tailwind consumes the triplets as `rgb(var(--color-*-rgb) / <alpha-value>)`, which is what
 * makes opacity modifiers like `bg-primary/10` work on top of runtime-switchable themes.
 * The plain `--color-*` variables are derived from the triplets in one shared block below,
 * so hand-written CSS keeps using `var(--color-primary)` unchanged.
 */

/* Olive Green Theme */
:root,
:root[data-theme="olive-green"] {
  /* Render native controls (date picker indicator, scrollbars, etc.) for a light UI */
  color-scheme: light;

  /* Primary Colors */
  --color-primary-light-rgb: 212 228 200;   /* #D4E4C8 */
  --color-primary-rgb: 139 168 136;         /* #8BA888 */
  --color-primary-dark-rgb: 107 142 105;    /* #6B8E69 */
  --color-primary-hover-rgb: 122 154 119;   /* #7A9A77 */

  /* Secondary Colors */
  --color-secondary-light-rgb: 200 217 193; /* #C8D9C1 */
  --color-secondary-rgb: 107 142 105;       /* #6B8E69 */
  --color-secondary-dark-rgb: 85 122 84;    /* #557A54 */

  /* Background Colors */
  --color-background-main-rgb: 247 250 248;          /* #F7FAF8 */
  --color-background-card-rgb: 255 255 255;          /* #FFFFFF */
  --color-background-hover-rgb: 243 244 246;         /* #F3F4F6 */
  --color-background-gradient-from-rgb: 247 250 248; /* #F7FAF8 */
  --color-background-gradient-to-rgb: 255 255 255;   /* #FFFFFF */

  /* Text Colors */
  --color-text-primary-rgb: 17 24 39;    /* #111827 */
  --color-text-secondary-rgb: 55 65 81;  /* #374151 */
  --color-text-muted-rgb: 107 114 128;   /* #6B7280 */

  /* Border Colors */
  --color-border-light-rgb: 243 244 246;  /* #F3F4F6 */
  --color-border-rgb: 229 231 235;        /* #E5E7EB */
  --color-border-strong-rgb: 209 213 219; /* #D1D5DB */

  /* Success Colors */
  --color-success-light-rgb: 209 250 229; /* #D1FAE5 */
  --color-success-rgb: 34 197 94;         /* #22C55E */
  --color-success-dark-rgb: 22 163 74;    /* #16A34A */

  /* Warning Colors */
  --color-warning-light-rgb: 254 243 199; /* #FEF3C7 */
  --color-warning-rgb: 245 158 11;        /* #F59E0B */
  --color-warning-dark-rgb: 217 119 6;    /* #D97706 */

  /* Error Colors */
  --color-error-light-rgb: 254 226 226;   /* #FEE2E2 */
  --color-error-rgb: 239 68 68;           /* #EF4444 */
  --color-error-dark-rgb: 220 38 38;      /* #DC2626 */

  /* Info Colors */
  --color-info-light-rgb: 219 234 254;    /* #DBEAFE */
  --color-info-rgb: 59 130 246;           /* #3B82F6 */
  --color-info-dark-rgb: 37 99 235;       /* #2563EB */

  /* Accent Colors */
  --color-accent-light-rgb: 212 228 200;  /* #D4E4C8 */
  --color-accent-rgb: 139 168 136;        /* #8BA888 */
  --color-accent-dark-rgb: 107 142 105;   /* #6B8E69 */

  /* Elevation (soft, layered, cool-gray) */
  --shadow-card: 0 1px 2px rgb(15 23 42 / 0.04), 0 1px 3px rgb(15 23 42 / 0.08);
  --shadow-card-hover: 0 4px 8px -2px rgb(15 23 42 / 0.08), 0 12px 20px -4px rgb(15 23 42 / 0.10);
  --shadow-float: 0 8px 12px -6px rgb(15 23 42 / 0.10), 0 20px 32px -8px rgb(15 23 42 / 0.14);
}

/* Magenta Theme */
:root[data-theme="magenta"] {
  color-scheme: light;

  /* Primary Colors */
  --color-primary-light-rgb: 251 207 232;  /* #FBCFE8 */
  --color-primary-rgb: 236 72 153;         /* #EC4899 */
  --color-primary-dark-rgb: 219 39 119;    /* #DB2777 */
  --color-primary-hover-rgb: 244 114 182;  /* #F472B6 */

  /* Secondary Colors */
  --color-secondary-light-rgb: 245 208 254; /* #F5D0FE */
  --color-secondary-rgb: 217 70 239;        /* #D946EF */
  --color-secondary-dark-rgb: 162 28 175;   /* #A21CAF */

  /* Background Colors */
  --color-background-main-rgb: 253 242 248;          /* #FDF2F8 */
  --color-background-card-rgb: 255 255 255;          /* #FFFFFF */
  --color-background-hover-rgb: 252 231 243;         /* #FCE7F3 */
  --color-background-gradient-from-rgb: 253 242 248; /* #FDF2F8 */
  --color-background-gradient-to-rgb: 254 252 254;   /* #FEFCFE */

  /* Text Colors */
  --color-text-primary-rgb: 31 41 55;    /* #1F2937 */
  --color-text-secondary-rgb: 55 65 81;  /* #374151 */
  --color-text-muted-rgb: 107 114 128;   /* #6B7280 */

  /* Border Colors */
  --color-border-light-rgb: 252 231 243;  /* #FCE7F3 */
  --color-border-rgb: 251 207 232;        /* #FBCFE8 */
  --color-border-strong-rgb: 249 168 212; /* #F9A8D4 */

  /* Success Colors */
  --color-success-light-rgb: 209 250 229; /* #D1FAE5 */
  --color-success-rgb: 34 197 94;         /* #22C55E */
  --color-success-dark-rgb: 22 163 74;    /* #16A34A */

  /* Warning Colors */
  --color-warning-light-rgb: 254 243 199; /* #FEF3C7 */
  --color-warning-rgb: 245 158 11;        /* #F59E0B */
  --color-warning-dark-rgb: 217 119 6;    /* #D97706 */

  /* Error Colors */
  --color-error-light-rgb: 254 226 226;   /* #FEE2E2 */
  --color-error-rgb: 239 68 68;           /* #EF4444 */
  --color-error-dark-rgb: 220 38 38;      /* #DC2626 */

  /* Info Colors */
  --color-info-light-rgb: 251 207 232;    /* #FBCFE8 */
  --color-info-rgb: 236 72 153;           /* #EC4899 */
  --color-info-dark-rgb: 190 24 93;       /* #BE185D */

  /* Accent Colors */
  --color-accent-light-rgb: 249 168 212;  /* #F9A8D4 */
  --color-accent-rgb: 244 114 182;        /* #F472B6 */
  --color-accent-dark-rgb: 236 72 153;    /* #EC4899 */

  /* Elevation (soft, layered, warm) */
  --shadow-card: 0 1px 2px rgb(80 7 36 / 0.04), 0 1px 3px rgb(80 7 36 / 0.08);
  --shadow-card-hover: 0 4px 8px -2px rgb(80 7 36 / 0.08), 0 12px 20px -4px rgb(80 7 36 / 0.10);
  --shadow-float: 0 8px 12px -6px rgb(80 7 36 / 0.10), 0 20px 32px -8px rgb(80 7 36 / 0.14);
}

/* Sunset Coral Theme */
:root[data-theme="sunset-coral"] {
  color-scheme: light;

  /* Primary Colors */
  --color-primary-light-rgb: 254 215 170;  /* #FED7AA */
  --color-primary-rgb: 251 146 60;         /* #FB923C */
  --color-primary-dark-rgb: 234 88 12;     /* #EA580C */
  --color-primary-hover-rgb: 249 115 22;   /* #F97316 */

  /* Secondary Colors */
  --color-secondary-light-rgb: 254 205 211; /* #FECDD3 */
  --color-secondary-rgb: 244 63 94;         /* #F43F5E */
  --color-secondary-dark-rgb: 190 18 60;    /* #BE123C */

  /* Background Colors */
  --color-background-main-rgb: 255 247 237;          /* #FFF7ED */
  --color-background-card-rgb: 255 255 255;          /* #FFFFFF */
  --color-background-hover-rgb: 255 237 213;         /* #FFEDD5 */
  --color-background-gradient-from-rgb: 255 247 237; /* #FFF7ED */
  --color-background-gradient-to-rgb: 255 255 255;   /* #FFFFFF */

  /* Text Colors */
  --color-text-primary-rgb: 28 25 23;    /* #1C1917 */
  --color-text-secondary-rgb: 68 64 60;  /* #44403C */
  --color-text-muted-rgb: 120 113 108;   /* #78716C */

  /* Border Colors */
  --color-border-light-rgb: 255 237 213;  /* #FFEDD5 */
  --color-border-rgb: 254 215 170;        /* #FED7AA */
  --color-border-strong-rgb: 253 186 116; /* #FDBA74 */

  /* Success Colors */
  --color-success-light-rgb: 209 250 229; /* #D1FAE5 */
  --color-success-rgb: 34 197 94;         /* #22C55E */
  --color-success-dark-rgb: 22 163 74;    /* #16A34A */

  /* Warning Colors */
  --color-warning-light-rgb: 254 243 199; /* #FEF3C7 */
  --color-warning-rgb: 245 158 11;        /* #F59E0B */
  --color-warning-dark-rgb: 217 119 6;    /* #D97706 */

  /* Error Colors */
  --color-error-light-rgb: 254 226 226;   /* #FEE2E2 */
  --color-error-rgb: 239 68 68;           /* #EF4444 */
  --color-error-dark-rgb: 220 38 38;      /* #DC2626 */

  /* Info Colors */
  --color-info-light-rgb: 219 234 254;    /* #DBEAFE */
  --color-info-rgb: 59 130 246;           /* #3B82F6 */
  --color-info-dark-rgb: 37 99 235;       /* #2563EB */

  /* Accent Colors (golden hour, distinct from primary coral) */
  --color-accent-light-rgb: 253 224 71;   /* #FDE047 */
  --color-accent-rgb: 250 204 21;         /* #FACC15 */
  --color-accent-dark-rgb: 202 138 4;     /* #CA8A04 */

  /* Elevation (warm, soft) */
  --shadow-card: 0 1px 2px rgb(120 53 15 / 0.06), 0 1px 3px rgb(120 53 15 / 0.10);
  --shadow-card-hover: 0 4px 8px -2px rgb(120 53 15 / 0.10), 0 12px 20px -4px rgb(120 53 15 / 0.12);
  --shadow-float: 0 8px 12px -6px rgb(120 53 15 / 0.12), 0 20px 32px -8px rgb(120 53 15 / 0.16);
}

/* Dark Elegant Theme */
:root[data-theme="dark-elegant"] {
  /* Render native controls (date picker indicator, scrollbars, etc.) for a dark UI, so the
     browser's calendar icon and picker popup are light instead of black */
  color-scheme: dark;

  /* Primary Colors */
  --color-primary-light-rgb: 221 214 254; /* #DDD6FE */
  --color-primary-rgb: 139 92 246;        /* #8B5CF6 */
  --color-primary-dark-rgb: 109 40 217;   /* #6D28D9 */
  --color-primary-hover-rgb: 124 58 237;  /* #7C3AED */

  /* Secondary Colors */
  --color-secondary-light-rgb: 165 243 252; /* #A5F3FC */
  --color-secondary-rgb: 6 182 212;         /* #06B6D4 */
  --color-secondary-dark-rgb: 14 116 144;   /* #0E7490 */

  /* Background Colors */
  --color-background-main-rgb: 15 23 42;           /* #0F172A */
  --color-background-card-rgb: 30 41 59;           /* #1E293B */
  --color-background-hover-rgb: 51 65 85;          /* #334155 */
  --color-background-gradient-from-rgb: 15 23 42;  /* #0F172A */
  --color-background-gradient-to-rgb: 30 41 59;    /* #1E293B */

  /* Text Colors */
  --color-text-primary-rgb: 241 245 249;   /* #F1F5F9 */
  --color-text-secondary-rgb: 203 213 225; /* #CBD5E1 */
  --color-text-muted-rgb: 148 163 184;     /* #94A3B8 */

  /* Border Colors */
  --color-border-light-rgb: 51 65 85;     /* #334155 */
  --color-border-rgb: 71 85 105;          /* #475569 */
  --color-border-strong-rgb: 100 116 139; /* #64748B */

  /* Success Colors */
  --color-success-light-rgb: 15 118 110;  /* #0F766E */
  --color-success-rgb: 20 184 166;        /* #14B8A6 */
  --color-success-dark-rgb: 94 234 212;   /* #5EEAD4 */

  /* Warning Colors */
  --color-warning-light-rgb: 146 64 14;   /* #92400E */
  --color-warning-rgb: 245 158 11;        /* #F59E0B */
  --color-warning-dark-rgb: 252 211 77;   /* #FCD34D */

  /* Error Colors */
  --color-error-light-rgb: 153 27 27;     /* #991B1B */
  --color-error-rgb: 239 68 68;           /* #EF4444 */
  --color-error-dark-rgb: 252 165 165;    /* #FCA5A5 */

  /* Info Colors */
  --color-info-light-rgb: 30 64 175;      /* #1E40AF */
  --color-info-rgb: 59 130 246;           /* #3B82F6 */
  --color-info-dark-rgb: 147 197 253;     /* #93C5FD */

  /* Accent Colors */
  --color-accent-light-rgb: 103 232 249;  /* #67E8F9 */
  --color-accent-rgb: 6 182 212;          /* #06B6D4 */
  --color-accent-dark-rgb: 8 145 178;     /* #0891B2 */

  /* Elevation (deeper shadows read better on dark surfaces) */
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.30), 0 2px 6px rgb(0 0 0 / 0.25);
  --shadow-card-hover: 0 4px 10px -2px rgb(0 0 0 / 0.45), 0 12px 24px -4px rgb(0 0 0 / 0.40);
  --shadow-float: 0 10px 16px -6px rgb(0 0 0 / 0.50), 0 24px 40px -8px rgb(0 0 0 / 0.45);
}

/* Derived variables — resolved against whichever theme's triplets are active on :root.
   Keeps every pre-existing `var(--color-*)` consumer working; add new names in one place. */
:root {
  --color-primary-light: rgb(var(--color-primary-light-rgb));
  --color-primary: rgb(var(--color-primary-rgb));
  --color-primary-dark: rgb(var(--color-primary-dark-rgb));
  --color-primary-hover: rgb(var(--color-primary-hover-rgb));

  --color-secondary-light: rgb(var(--color-secondary-light-rgb));
  --color-secondary: rgb(var(--color-secondary-rgb));
  --color-secondary-dark: rgb(var(--color-secondary-dark-rgb));

  --color-background-main: rgb(var(--color-background-main-rgb));
  --color-background-card: rgb(var(--color-background-card-rgb));
  --color-background-hover: rgb(var(--color-background-hover-rgb));
  --color-background-gradient-from: rgb(var(--color-background-gradient-from-rgb));
  --color-background-gradient-to: rgb(var(--color-background-gradient-to-rgb));

  --color-text-primary: rgb(var(--color-text-primary-rgb));
  --color-text-secondary: rgb(var(--color-text-secondary-rgb));
  --color-text-muted: rgb(var(--color-text-muted-rgb));

  --color-border-light: rgb(var(--color-border-light-rgb));
  --color-border: rgb(var(--color-border-rgb));
  --color-border-strong: rgb(var(--color-border-strong-rgb));

  --color-success-light: rgb(var(--color-success-light-rgb));
  --color-success: rgb(var(--color-success-rgb));
  --color-success-dark: rgb(var(--color-success-dark-rgb));

  --color-warning-light: rgb(var(--color-warning-light-rgb));
  --color-warning: rgb(var(--color-warning-rgb));
  --color-warning-dark: rgb(var(--color-warning-dark-rgb));

  --color-error-light: rgb(var(--color-error-light-rgb));
  --color-error: rgb(var(--color-error-rgb));
  --color-error-dark: rgb(var(--color-error-dark-rgb));

  --color-info-light: rgb(var(--color-info-light-rgb));
  --color-info: rgb(var(--color-info-rgb));
  --color-info-dark: rgb(var(--color-info-dark-rgb));

  --color-accent-light: rgb(var(--color-accent-light-rgb));
  --color-accent: rgb(var(--color-accent-rgb));
  --color-accent-dark: rgb(var(--color-accent-dark-rgb));

  /* Primary-tinted glow for small emphasized elements (active nav chip, highlighted tiles) */
  --shadow-glow: 0 2px 10px rgb(var(--color-primary-rgb) / 0.40), 0 0 0 1px rgb(var(--color-primary-rgb) / 0.15);
}

/* Smooth transitions for theme changes */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, fill 0.3s ease, stroke 0.3s ease, outline-color 0.3s ease;
}

/* Prevent transitions on page load */
.no-transition * {
  transition: none !important;
}