/* 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.
 */

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

  /* Primary: Hedda's blazer */
  --color-primary-light-rgb: 220 231 243; /* #DCE7F3 */
  --color-primary-rgb: 31 78 140;         /* #1F4E8C */
  --color-primary-dark-rgb: 19 41 75;     /* #13294B */
  --color-primary-hover-rgb: 26 67 120;   /* #1A4378 */

  /* On primary */
  --color-on-primary-rgb: 255 255 255; /* #FFFFFF */

  /* Secondary: navy ink */
  --color-secondary-light-rgb: 201 220 236; /* #C9DCEC */
  --color-secondary-rgb: 19 41 75;          /* #13294B */
  --color-secondary-dark-rgb: 31 78 140;    /* #1F4E8C */

  /* Background: warm cream under white cards */
  --color-background-main-rgb: 255 251 244;          /* #FFFBF4 */
  --color-background-card-rgb: 255 255 255;          /* #FFFFFF */
  --color-background-hover-rgb: 246 241 232;         /* #F6F1E8 */
  --color-background-gradient-from-rgb: 255 246 232; /* #FFF6E8 */
  --color-background-gradient-to-rgb: 255 255 255;   /* #FFFFFF */

  /* Text: navy, not black */
  --color-text-primary-rgb: 19 41 75;   /* #13294B */
  --color-text-secondary-rgb: 58 74 99; /* #3A4A63 */
  --color-text-muted-rgb: 102 116 138;  /* #66748A */

  /* Border */
  --color-border-light-rgb: 241 235 224;  /* #F1EBE0 */
  --color-border-rgb: 230 223 210;        /* #E6DFD2 */
  --color-border-strong-rgb: 211 202 186; /* #D3CABA */

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

  /* Warning (amber is reserved for this; the brand accent is coral) */
  --color-warning-light-rgb: 254 243 199; /* #FEF3C7 */
  --color-warning-rgb: 245 158 11;        /* #F59E0B */
  --color-warning-dark-rgb: 217 119 6;    /* #D97706 */

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

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

  /* Accent: Hedda's scarf, used sparingly */
  --color-accent-light-rgb: 255 227 214; /* #FFE3D6 */
  --color-accent-rgb: 255 138 92;        /* #FF8A5C */
  --color-accent-dark-rgb: 224 103 58;   /* #E0673A */

  /* Elevation (soft, navy-tinted) */
  --shadow-card: 0 1px 2px rgb(19 41 75 / 0.04), 0 1px 3px rgb(19 41 75 / 0.08);
  --shadow-card-hover: 0 4px 8px -2px rgb(19 41 75 / 0.08), 0 12px 20px -4px rgb(19 41 75 / 0.10);
  --shadow-float: 0 8px 12px -6px rgb(19 41 75 / 0.10), 0 20px 32px -8px rgb(19 41 75 / 0.14);
}

/* Hedda night */
:root[data-theme="hedda-night"] {
  /* 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: sky blue, carrying navy text */
  --color-primary-light-rgb: 31 58 99;    /* #1F3A63 */
  --color-primary-rgb: 143 184 216;       /* #8FB8D8 */
  --color-primary-dark-rgb: 95 141 184;   /* #5F8DB8 */
  --color-primary-hover-rgb: 166 199 226; /* #A6C7E2 */

  /* On primary */
  --color-on-primary-rgb: 19 41 75; /* #13294B */

  /* Secondary */
  --color-secondary-light-rgb: 31 58 99;   /* #1F3A63 */
  --color-secondary-rgb: 59 107 168;       /* #3B6BA8 */
  --color-secondary-dark-rgb: 166 199 226; /* #A6C7E2 */

  /* Background: deep navy */
  --color-background-main-rgb: 11 23 48;          /* #0B1730 */
  --color-background-card-rgb: 19 41 75;          /* #13294B */
  --color-background-hover-rgb: 27 53 96;         /* #1B3560 */
  --color-background-gradient-from-rgb: 11 23 48; /* #0B1730 */
  --color-background-gradient-to-rgb: 16 33 63;   /* #10213F */

  /* Text: cream */
  --color-text-primary-rgb: 244 241 234;   /* #F4F1EA */
  --color-text-secondary-rgb: 201 211 226; /* #C9D3E2 */
  --color-text-muted-rgb: 147 163 186;     /* #93A3BA */

  /* Border */
  --color-border-light-rgb: 28 51 88;   /* #1C3358 */
  --color-border-rgb: 39 66 107;        /* #27426B */
  --color-border-strong-rgb: 54 84 127; /* #36547F */

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

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

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

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

  /* Accent */
  --color-accent-light-rgb: 90 46 34;   /* #5A2E22 */
  --color-accent-rgb: 255 138 92;       /* #FF8A5C */
  --color-accent-dark-rgb: 255 174 140; /* #FFAE8C */

  /* 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-on-primary: rgb(var(--color-on-primary-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;
}