:root {
  --theme-transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  
  /* Active Life Brand Colors (Extracted from Official Favicon Logo: #009EF7) */
  --ac: #009EF7;
  --ac-hover: #008BE0;
  --ac-dark: #0070B8;
  --as: #EBF7FE;
  --as-hover: #D6EFFF;
  
  --bg: #F8FAFC;
  --card-bg: #FFFFFF;
  --input-bg: #FFFFFF;
  --bd: #E2E8F0;
  --bd-focus: #009EF7;
  --tx: #0F172A;
  --mu: #64748B;
  
  --danger-bg: #FEE2E2;
  --danger-tx: #991B1B;
  --success-bg: #DCFCE7;
  --success-tx: #166534;
  --warning-bg: #FEF3C7;
  --warning-tx: #92400E;
  --info-bg: #E0F2FE;
  --info-tx: #075985;
  
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 158, 247, 0.08);
  --shadow-lg: 0 20px 45px rgba(0, 158, 247, 0.09);
  --seg-bg: #F1F5F9;
  --row-border: #F1F5F9;
  --prog-bg: #E2E8F0;
}

[data-theme="dark"] {
  --ac: #009EF7;
  --ac-hover: #2DB7F9;
  --ac-dark: #0070B8;
  --as: rgba(0, 158, 247, 0.12);
  --as-hover: rgba(0, 158, 247, 0.2);
  
  --bg: #0A0E17;
  --card-bg: #111827;
  --input-bg: #0B1120;
  --bd: rgba(255, 255, 255, 0.09);
  --bd-focus: #009EF7;
  --tx: #F9FAFB;
  --mu: #9CA3AF;
  
  --danger-bg: rgba(239, 68, 68, 0.15);
  --danger-tx: #FCA5A5;
  --success-bg: rgba(34, 197, 94, 0.15);
  --success-tx: #86EFAC;
  --warning-bg: rgba(245, 158, 11, 0.15);
  --warning-tx: #FDE047;
  --info-bg: rgba(59, 130, 246, 0.15);
  --info-tx: #93C5FD;
  
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.7);
  --seg-bg: #0B1120;
  --row-border: rgba(255, 255, 255, 0.06);
  --prog-bg: #1F2937;
}

/* Unique Theme Accent Palettes */
/* 1. Healing Emerald / Teal */
[data-accent="teal"] {
  --ac: #0D9488;
  --ac-hover: #0F766E;
  --ac-dark: #042F2E;
  --as: #E6FFFA;
  --as-hover: #CCFBF1;
  --bd-focus: #0D9488;
}
[data-theme="dark"][data-accent="teal"] {
  --ac: #14B8A6;
  --ac-hover: #2DD4BF;
  --ac-dark: #0D9488;
  --as: rgba(20, 184, 166, 0.14);
  --as-hover: rgba(20, 184, 166, 0.22);
  --bd-focus: #14B8A6;
}

/* 2. Royal Amethyst / Purple */
[data-accent="purple"] {
  --ac: #7C3AED;
  --ac-hover: #6D28D9;
  --ac-dark: #4C1D95;
  --as: #F5F3FF;
  --as-hover: #EDE9FE;
  --bd-focus: #7C3AED;
}
[data-theme="dark"][data-accent="purple"] {
  --ac: #A855F7;
  --ac-hover: #C084FC;
  --ac-dark: #7C3AED;
  --as: rgba(168, 85, 247, 0.14);
  --as-hover: rgba(168, 85, 247, 0.22);
  --bd-focus: #A855F7;
}

/* 3. Vitality Rose */
[data-accent="rose"] {
  --ac: #E11D48;
  --ac-hover: #BE123C;
  --ac-dark: #881337;
  --as: #FFF1F2;
  --as-hover: #FFE4E6;
  --bd-focus: #E11D48;
}
[data-theme="dark"][data-accent="rose"] {
  --ac: #F43F5E;
  --ac-hover: #FB7185;
  --ac-dark: #E11D48;
  --as: rgba(244, 63, 94, 0.14);
  --as-hover: rgba(244, 63, 94, 0.22);
  --bd-focus: #F43F5E;
}

/* 4. Warm Amber / Sun */
[data-accent="amber"] {
  --ac: #D97706;
  --ac-hover: #B45309;
  --ac-dark: #78350F;
  --as: #FFFBEB;
  --as-hover: #FEF3C7;
  --bd-focus: #D97706;
}
[data-theme="dark"][data-accent="amber"] {
  --ac: #F59E0B;
  --ac-hover: #FBBF24;
  --ac-dark: #D97706;
  --as: rgba(245, 158, 11, 0.14);
  --as-hover: rgba(245, 158, 11, 0.22);
  --bd-focus: #F59E0B;
}