/* ========================================
   RxProPocket Theme System - Bootstrap 5.3 Compatible
   Maps Bootstrap 5.3 CSS variables to app themes
   Uses data-theme attribute for instant switching
   ======================================== */

/* Default Theme (Group1: Royal Blue - Based on Design) */
:root {
  /* App theme tokens - NEW DESIGN COLORS */
  --app-primary: #2B4395;          /* Royal Blue (from colorpalette.jpg) */
  --app-primary-rgb: 43, 67, 149;
  --app-secondary: #3D5AA8;        /* Lighter Royal Blue */
  --app-secondary-rgb: 61, 90, 168;
  --app-accent: #4C6FDB;           /* Bright Blue Accent */
  --app-accent-rgb: 76, 111, 219;
  
  /* Background colors from design */
  --app-bg-primary: #2B4395;
  --app-bg-secondary: #3D5AA8;
  --app-bg-light: #F5F7FA;
  
  /* Text colors */
  --app-text-dark: #1A2744;
  --app-text-light: #FFFFFF;
  --app-text-muted: #6B7280;
  
  /* Button colors from design */
  --app-button-primary: #4C6FDB;
  --app-button-secondary: #E8ECF5;
  --app-button-danger: #DC3545;
  
  /* Legacy support for existing code */
  --primary-color: var(--app-primary);
  --secondary-color: var(--app-secondary);
  --accent-color: var(--app-accent);
  --gradient-start: var(--app-primary);
  --gradient-end: var(--app-secondary);
  
  /* ? Bootstrap 5.3 variable mappings */
  --bs-primary: var(--app-primary);
  --bs-primary-rgb: var(--app-primary-rgb);
  --bs-secondary: var(--app-secondary);
  --bs-secondary-rgb: var(--app-secondary-rgb);
  
  /* Links */
  --bs-link-color: var(--app-accent);
  --bs-link-color-rgb: var(--app-accent-rgb);
  --bs-link-hover-color: color-mix(in srgb, var(--app-accent) 85%, black);
  --bs-link-hover-color-rgb: var(--app-accent-rgb);
  
  /* Buttons */
  --bs-btn-bg: var(--app-button-primary);
  --bs-btn-border-color: var(--app-button-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--app-button-primary) 90%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--app-button-primary) 90%, black);
  
  /* Form controls */
  --bs-form-control-focus-border-color: var(--app-accent);
  --bs-form-control-focus-box-shadow: 0 0 0 0.25rem rgba(var(--app-accent-rgb), 0.25);
  
  /* Focus ring */
  --bs-focus-ring-color: rgba(var(--app-accent-rgb), 0.25);
  
  /* Nav pills */
  --bs-nav-pills-link-active-bg: var(--app-button-primary);
}

/* Group2: Pink/Red */
:root[data-theme="Group2"] {
  --app-primary: #f093fb;
  --app-primary-rgb: 240, 147, 251;
  --app-secondary: #f5576c;
  --app-secondary-rgb: 245, 87, 108;
  --app-accent: #e84393;
  --app-accent-rgb: 232, 67, 147;
}

/* Group3: Cyan/Blue */
:root[data-theme="Group3"] {
  --app-primary: #4facfe;
  --app-primary-rgb: 79, 172, 254;
  --app-secondary: #00f2fe;
  --app-secondary-rgb: 0, 242, 254;
  --app-accent: #3498db;
  --app-accent-rgb: 52, 152, 219;
}

/* Group4: Green */
:root[data-theme="Group4"] {
  --app-primary: #43e97b;
  --app-primary-rgb: 67, 233, 123;
  --app-secondary: #38f9d7;
  --app-secondary-rgb: 56, 249, 215;
  --app-accent: #27ae60;
  --app-accent-rgb: 39, 174, 96;
}

/* Group5: Orange/Yellow */
:root[data-theme="Group5"] {
  --app-primary: #fa709a;
  --app-primary-rgb: 250, 112, 154;
  --app-secondary: #fee140;
  --app-secondary-rgb: 254, 225, 64;
  --app-accent: #e74c3c;
  --app-accent-rgb: 231, 76, 60;
}

/* Group6: Teal/Dark */
:root[data-theme="Group6"] {
  --app-primary: #30cfd0;
  --app-primary-rgb: 48, 207, 208;
  --app-secondary: #330867;
  --app-secondary-rgb: 51, 8, 103;
  --app-accent: #2c3e50;
  --app-accent-rgb: 44, 62, 80;
}

/* Group7: Soft */
:root[data-theme="Group7"] {
  --app-primary: #a8edea;
  --app-primary-rgb: 168, 237, 234;
  --app-secondary: #fed6e3;
  --app-secondary-rgb: 254, 214, 227;
  --app-accent: #95a5a6;
  --app-accent-rgb: 149, 165, 166;
}

/* Group8: Warm */
:root[data-theme="Group8"] {
  --app-primary: #ff9a56;
  --app-primary-rgb: 255, 154, 86;
  --app-secondary: #ff6a88;
  --app-secondary-rgb: 255, 106, 136;
  --app-accent: #e67e22;
  --app-accent-rgb: 230, 126, 34;
}

/* Group9: Sunset */
:root[data-theme="Group9"] {
  --app-primary: #ee9ca7;
  --app-primary-rgb: 238, 156, 167;
  --app-secondary: #ffdde1;
  --app-secondary-rgb: 255, 221, 225;
  --app-accent: #d35400;
  --app-accent-rgb: 211, 84, 0;
}

/* Group10: Ocean */
:root[data-theme="Group10"] {
  --app-primary: #2af598;
  --app-primary-rgb: 42, 245, 152;
  --app-secondary: #009efd;
  --app-secondary-rgb: 0, 158, 253;
  --app-accent: #16a085;
  --app-accent-rgb: 22, 160, 133;
}

/* ? Smooth theme transitions */
* {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}