/* ========================================= 
   THEME VARIABLES - FitSpeex Dark (Default)
========================================= */
:root, .theme-fitspeex-dark {
  --bg: #061018;
  --bg-grad: linear-gradient( 180deg, #061018, #043530) !important;
  --text: #FFFFFF;
  --secondary-text: #E5E5E5; /* #A2A2A2;*/
  --light-text-1: #E5E5E5;
  --muted: #777777;
  --accent: #18D7C3;
  --accent-hover: #1DF5DE;
  --bs-danger-rgb: rgb(220, 53, 69);
  --alert-bg: #ff7b7b;
  --alert-strip-bg: rgba(239, 68, 68, 0.20);
  --alert-strip-border: 1px solid rgba(239, 68, 68, 0.6);
  --alert-text: #E20000;
  --success-strip-bg: rgba(34, 197, 94, 0.20);
  --success-strip-border: 1px solid rgba(34, 197, 94, 0.6);
  --success-color: #28a745;
  --title-color: #333;
  /* wrapper */
  --wrapper-bg: #061018;
  --shadow-color: rgba(24,215,195, 0.6);
  --shadow-color-dark: #0a5a52;
  --wrapper-shadow: 0 20px 60px rgba(0,0,0,.08);
  /* hero */
  --hero-text: #FFFFFF;
  --hero-subtext: #E7E7E7;
  /* --hero-overlay: linear-gradient( rgba(24,215,195,.18), rgba(24,215,195,.08) );*/
  --hero-overlay: linear-gradient( rgba(0,0,0,.25), rgba(0,0,0,.48) );
  --hero-image: url("../images/fitflow-hero-art_teal.png");
  --hero-image-2: url("../images/fitflow-hero-art_teal.png");
  /* menu */

  --menu-bg: rgba(255,255,255,.04);
  --menu-border: 1px solid rgba(255,255,255,.14);
  --menu-icon-color: #FFFFFF;
  --menu-text: #FFFFFF;
  --menu-hover-shadow: 0 0 30px rgba(24,215,195,.18);
  --menu-hover-border: 1px solid rgba(24,215,195,.5);
  --topnav-bg: rgba(7, 16, 24, .9);
  /* card */
  --card-panel-bg: #121e25;
  --card-panel-bg-2: #1e333f;
  /*--card-bg: rgba(7,16,24,.72);*/
  --card-bg: rgba(7, 16, 24, .01);
  --card-bg-secondary: rgba(255,255,255,.04);
  --card-border: 1px solid rgba(24,215,195,.20);
  --card-shadow: 0 20px 60px var(0,0,0,.06);
  --card-blur: none;
  /* inputs */

  --input-bg: #222;
  --input-border: 1px solid #535353;
  --input-focus-border: 1px solid #18D7C3;
  --input-focus-shadow: 0 0 0 4px rgba(24,215,195,.08);
  --input-error-border: 1px solid #dc3545;
  --input-error-shadow: 0 0 0 4px rgba(220, 53, 69, .08);
  /* button */

  --button-bg: linear-gradient( 135deg, #18D8C5, #0FC3B2 );
  --button-text: #FFFFFF;
  --button-shadow: 0 14px 30px rgba(20,216,196,.22);
  --button-disabled: #808080;
  /* feature */
  --feature-icon-bg: rgba(24,215,195,.06);
  --feature-icon-border: 1px solid rgba(24,215,195,.08);
  --feature-icon-color: #18D7C3;
  /* extras */
  --border-color: #616161;
  /* -----------------------
      Org-Selector Design Starts
  ------------------------     */
  --orgrunner-image: url("../assets/images/hero-runner-1.png");
  --org-grid-dot-color: rgba(255,255,255,.08);
  --org-glow-bg: radial-gradient( circle, rgba(24,215,195,.18), transparent 70% );
  --org-card-border: 1px solid rgba(24,215,195,.12);
  --org-card-shadow: 0 20px 70px rgba(0,0,0,.35);
  /* --org-card-blur: blur(18px);*/
  --org-card-blur: blur(5px);
  /* orbs */

  --org-orb-bg: radial-gradient( circle, rgba(24,215,195,.18), transparent 70% );
  --wrapper-orb-bg: radial-gradient( circle, rgba(24,215,195,.18), transparent 70% );
  /* title */

  --org-title-accent: #18D7C3;
  --org-title-underline: #18D7C3;
  /* subtitle */

  --org-subtitle-color: #AAB7C2;
  /* input */

  --org-input-bg: rgba(255,255,255,.03);
  --org-input-border: 1px solid rgba(24,215,195,.35);
  --org-input-focus-border: 1px solid #18D7C3;
  --org-input-focus-shadow: 0 0 0 4px rgba(24,215,195,.08);
  --org-input-text: #FFFFFF;
  --org-input-placeholder: #6D7B88;
  --org-input-icon-color: #18D7C3;
  /* button */

  --org-button-bg: linear-gradient( 135deg, #18D8C5, #0FC3B2 );
  --org-button-text: #FFFFFF;
  --org-button-shadow: 0 14px 30px rgba(20,216,196,.22);
  /* -----------------------
      Org-Selector Design Ends
  ------------------------     */
  /* -----------------------
      Fitspeex Legacy Design Starts
  --------------------------*/
  --readonly-table-back: #056262; /* #5d5643;*/
  --readonly-table-back-hover: #008B8B;
  --readonly-table-alternate: #056262;
  --readonly-table-grey-back: #424141;
  --readonly-table-grey-alternate: #4b4b4b;
  --table-back: transparent;
  --table-header: #373737; /* #333;*/
  --table-border: #3A3A3A;
  --panel-border: #004e46;
  --bs-link-color: #00FFFF;
  --bs-link-hover-color: #008B8B;
  --input-underline-color: rgba(255,255,255,.42);
  --popover-bg: #056262;
  --secondary-text-2: #AEAEAE;
  caret-color: var(--accent);
  --overlay-bg: rgba(0, 0, 0, 0.8);
  --overlay-pop-bg: #1e333f;
  --spinner-track: rgba(255, 255, 255, 0.1);
  --gradient-bg-1: linear-gradient(to right, #ffbf96, #fe7096);
  --gradient-bg-2: linear-gradient(to right, #ff9292, #ffbf96);
  --gradient-bg-3: linear-gradient(to right, #5d5643 45%, #056262);
  --side-nav-border: #e1bfe3;
  --invoice-preview-bg: #fff;
  --theme-toggle-btn: var(--accent);
  --timer-bg: #e3f2fd;
  --timer-text: #1976d2;
  --timer-border: 1px solid #90caf9;
  --timer-exp-bg: #ffebee;
  --timer-exp-text: #c62828;
  --timer-exp-border: #ef5350;
  --timer-info-bg: #e3f2fd;
  --timer-info-text: #1565c0;
  --timer-info-border: 3px solid #1976d2;
  /* -----------------------
      Fitspeex Legacy Design Ends
  ---------------------- */
}

/* ========================================= 
   THEME VARIABLES - Power Red
========================================= */
.power-red {
  /* Base */
  --bg: #fafafa;
  --bg-grad: linear-gradient(180deg, #ffffff, #fff1f1) !important;
  --text: #1f2937;
  --secondary-text: #373737;
  --light-text-1: #E5E5E5;
  --secondary-text-2: #616161;
  --muted: #9ca3af;
  /* Brand */
  --accent: #FF4242;
  --accent-hover: #b91c1c;
  --bs-danger-rgb: 220, 53, 69;
  /* Alerts */
  --alert-bg: #fee2e2;
  --alert-strip-bg: rgba(239, 68, 68, 0.12);
  --alert-strip-border: 1px solid rgba(239, 68, 68, 0.3);
  --alert-text: #b91c1c;
  --success-strip-bg: rgba(34, 197, 94, 0.12);
  --success-strip-border: 1px solid rgba(34, 197, 94, 0.3);
  --success-color: #16a34a;
  --title-color: #111827;
  /* Wrapper */
  --wrapper-bg: #fafafa;
  --shadow-color: rgba(220, 38, 38, 0.25);
  --shadow-color-dark: rgba(185, 28, 28, 0.4);
  --wrapper-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  /* Hero */
  --hero-text: #ffffff;
  --hero-subtext: #f3f4f6;
  --hero-overlay: linear-gradient( rgba(127, 29, 29, 0.35), rgba(127, 29, 29, 0.55) );
  --hero-image: url("../images/fitflow-hero-art_red.png");
  --hero-image-2: url("../images/fitflow-hero-art_red.png");
  /* Menu */
  --menu-bg: rgba(255, 255, 255, 0.95);
  --menu-border: 1px solid rgba(220, 38, 38, 0.12);
  --menu-icon-color: #dc2626;
  --menu-text: #939eb1;
  --menu-hover-shadow: 0 0 30px rgba(220, 38, 38, 0.15);
  --menu-hover-border: 1px solid rgba(220, 38, 38, 0.4);
  --topnav-bg: radial-gradient(circle at 10% 20%, rgb(188, 41, 41) 0%, rgb(119, 0, 0) 90%);
  /* Cards */
  --card-panel-bg: #ffffff;
  --card-panel-bg-2: #fef2f2;
  --card-bg: #ffffff;
  --card-bg-secondary: #fff5f5;
  --card-border: 1px solid rgba(220, 38, 38, 0.12);
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  --card-blur: none;
  /* Inputs */
  --input-bg: #ffffff;
  --input-border: 1px solid #d1d5db;
  --input-focus-border: 1px solid #dc2626;
  --input-focus-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1);
  --input-error-border: 1px solid #dc3545;
  --input-error-shadow: 0 0 0 4px rgba(220, 53, 69, 0.1);
  /* Buttons */
  --button-bg: linear-gradient(135deg, #ef4444, #dc2626);
  --button-text: #ffffff;
  --button-shadow: 0 14px 30px rgba(220, 38, 38, 0.22);
  --button-disabled: #9ca3af;
  /* Features */
  --feature-icon-bg: rgba(220, 38, 38, 0.06);
  --feature-icon-border: 1px solid rgba(220, 38, 38, 0.12);
  --feature-icon-color: #dc2626;
  /* Borders */
  --border-color: #e5e7eb;
  /* Org Selector */
  --orgrunner-image: url("");
  --org-grid-dot-color: rgba(220, 38, 38, 0.08);
  --org-glow-bg: radial-gradient( circle, rgba(220, 38, 38, 0.15), transparent 70% );
  --org-card-border: 1px solid rgba(220, 38, 38, 0.12);
  --org-card-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  --org-card-blur: blur(5px);
  --org-orb-bg: radial-gradient( circle, rgba(220, 38, 38, 0.22), transparent 70% );
  --wrapper-orb-bg: radial-gradient( circle, rgba(220, 38, 38, 0.22), transparent 70% );
  --org-title-accent: #dc2626;
  --org-title-underline: #dc2626;
  --org-subtitle-color: #6b7280;
  --org-input-bg: rgba(255, 255, 255, 0.9);
  --org-input-border: 1px solid rgba(220, 38, 38, 0.25);
  --org-input-focus-border: 1px solid #dc2626;
  --org-input-focus-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1);
  --org-input-text: #111827;
  --org-input-placeholder: #9ca3af;
  --org-input-icon-color: #dc2626;
  --org-button-bg: linear-gradient(135deg, #ef4444, #dc2626);
  --org-button-text: #ffffff;
  --org-button-shadow: 0 14px 30px rgba(220, 38, 38, 0.22);
  /* Tables */
  --readonly-table-back: #fef2f2;
  --readonly-table-back-hover: #fee2e2;
  --readonly-table-alternate: #fff5f5;
  --readonly-table-grey-back: #f3f4f6;
  --readonly-table-grey-alternate: #e5e7eb;
  --table-back: transparent;
  --table-header: #f9fafb;
  --table-border: #e5e7eb;
  --panel-border: #fecaca;
  /* Links */
  --bs-link-color: #dc2626;
  --bs-link-hover-color: #991b1b;
  /* Misc */
  --input-underline-color: rgba(220, 38, 38, 0.25);
  --popover-bg: #ffffff;
  caret-color: var(--accent);
  --overlay-bg: rgba(0, 0, 0, 0.45);
  --overlay-pop-bg: #ffffff;
  --spinner-track: rgba(0, 0, 0, 0.08);
  --gradient-bg-1: linear-gradient(to right, #fecaca, #ef4444);
  --gradient-bg-2: linear-gradient(to right, #fca5a5, #fee2e2);
  --gradient-bg-3: linear-gradient(to right, #fef2f2, #ef4444);
  --side-nav-border: #fecaca;
  --invoice-preview-bg: #ffffff;
  --theme-toggle-btn: #ef4444;
  /* Timer */
  --timer-bg: #fef2f2;
  --timer-text: #dc2626;
  --timer-border: 1px solid #fca5a5;
  --timer-exp-bg: #fee2e2;
  --timer-exp-text: #b91c1c;
  --timer-exp-border: #ef4444;
  --timer-info-bg: #fef2f2;
  --timer-info-text: #dc2626;
  --timer-info-border: 3px solid #dc2626;
}

/* ========================================= 
   THEME VARIABLES - Light Theme
========================================= */
.theme-light {
  /* Base Colors */
  --bg: #FFFFFF;
  --bg-grad: #FFFFFF;
  --text: #1A1A1A;
  --secondary-text: #333333;
  --muted: #999999;
  --accent: #2196F3;
  --accent-hover: #1976D2;
  --bs-danger-rgb: 220, 53, 69;
  --alert-bg: #ffcccc;
  --alert-text: #c41e3a;
  --success-color: #28a745;
  --title-color: #333;
  /* Wrapper */
  --wrapper-bg: #FFFFFF;
  --shadow-color: rgba(0,0,0,.06);
  --shadow-color-dark: rgba(0,0,0,.06);
  --wrapper-shadow: 0 2px 8px var(--shadow-color);
  --wrapper-orb-bg: radial-gradient(circle, rgba(33, 150, 243, 0.08), transparent 70%);
  /* Hero */
  --hero-text: #1A1A1A;
  --hero-subtext: #555555;
  --hero-overlay: linear-gradient(rgba(33, 150, 243, 0.1), rgba(33, 150, 243, 0.05));
  --hero-image: url("../images/fitflow-hero-art_grey.png");
  --hero-image-2: url("../images/fitflow-hero-art_grey.png");
  /* Menu */
  --menu-bg: rgba(0, 0, 0, 0.04);
  --menu-border: 1px solid rgba(0, 0, 0, 0.1);
  --menu-icon-color: #2196F3;
  --menu-text: #333333;
  --menu-hover-shadow: 0 0 20px rgba(33, 150, 243, 0.1);
  --menu-hover-border: 1px solid rgba(33, 150, 243, 0.3);
  --topnav-bg: rgba(255, 255, 255, 0.9);
  /* Card */
  --card-panel-bg: #F5F5F5;
  --card-bg: rgba(255, 255, 255, 0.9);
  --card-bg-secondary: rgba(255,255,255,.04);
  --card-border: 1px solid rgba(33, 150, 243, 0.15);
  --card-shadow: 0 2px 8px var(--shadow-color);
  --card-blur: none;
  /* Input */
  --input-bg: #F5F5F5;
  --input-border: 1px solid #CCCCCC;
  --input-focus-border: 1px solid #2196F3;
  --input-focus-shadow: 0 0 0 4px rgba(33, 150, 243, 0.08);
  --input-error-border: 1px solid #dc3545;
  --input-error-shadow: 0 0 0 4px rgba(220, 53, 69, 0.08);
  /* Button */
  --button-bg: linear-gradient(135deg, #2196F3, #1976D2);
  --button-text: #FFFFFF;
  --button-shadow: 0 4px 12px rgba(33, 150, 243, 0.12);
  --button-disabled: #CCCCCC;
  /* Feature */
  --feature-icon-bg: rgba(33, 150, 243, 0.06);
  --feature-icon-border: 1px solid rgba(33, 150, 243, 0.08);
  --feature-icon-color: #2196F3;
  /* Organization Selector */
  --orgrunner-image: url("../assets/images/hero-runner-1.png");
  --org-grid-dot-color: rgba(0, 0, 0, 0.08);
  --org-glow-bg: radial-gradient(circle, rgba(33, 150, 243, 0.1), transparent 70%);
  --org-card-border: 1px solid rgba(33, 150, 243, 0.1);
  --org-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --org-card-blur: blur(5px);
  --org-orb-bg: radial-gradient(circle, rgba(33, 150, 243, 0.1), transparent 70%);
  --org-title-accent: #2196F3;
  --org-title-underline: #2196F3;
  --org-subtitle-color: #666666;
  --org-input-bg: rgba(0, 0, 0, 0.03);
  --org-input-border: 1px solid rgba(33, 150, 243, 0.2);
  --org-input-focus-border: 1px solid #2196F3;
  --org-input-focus-shadow: 0 0 0 4px rgba(33, 150, 243, 0.08);
  --org-input-text: #1A1A1A;
  --org-input-placeholder: #999999;
  --org-input-icon-color: #2196F3;
  --org-button-bg: linear-gradient(135deg, #2196F3, #1976D2);
  --org-button-text: #FFFFFF;
  --org-button-shadow: 0 4px 12px rgba(33, 150, 243, 0.12);
  /* Extras */
  --border-color: #E0E0E0;
  /* -----------------------
      Fitspeex Legacy Design Starts
  --------------------------*/
  --table-header: #333;
  --table-border: #3A3A3A;
  --bs-link-color: #40E0D0;
  --bs-link-hover-color: #00FFFF;
  /* -----------------------
      Fitspeex Legacy Design Ends
  ---------------------- */
}

/* ========================================= 
   THEME VARIABLES - Violet Theme
========================================= */
.theme-violet {
  /* Base Colors */
  --bg: transparent;
  --bg-grad: transparent;
  --text: #2D1B4E;
  --secondary-text: #3D2361;
  --muted: #7D6B8D;
  --accent: #B366FF;
  --accent-hover: #B366FF;
  --bs-danger-rgb: 220, 53, 69;
  --alert-bg: #fbb6f0;
  --alert-text: #7D3B7D;
  --success-color: #28a745;
  --title-color: #333;
  /* Wrapper */
  --wrapper-bg: #E7D0FF;
  --shadow-color: rgba(138, 43, 226, 0.15);
  --shadow-color-dark: rgba(138, 43, 226, 0.15);
  --wrapper-shadow: 0 8px 24px var(--shadow-color);
  --wrapper-orb-bg: radial-gradient(circle, rgba(179, 102, 255, 0.2), transparent 70%);
  /* Hero */
  --hero-text: #2D1B4E;
  --hero-subtext: #5D4B7D;
  --hero-overlay: linear-gradient(rgba(179, 102, 255, 0.15), rgba(179, 102, 255, 0.08));
  --hero-image: url("../images/fitflow-hero-art_grey.png");
  --hero-image-2: url("../images/fitflow-hero-art_grey.png");
  /* Menu */
  --menu-bg: rgba(109, 43, 139, 0.06);
  --menu-border: 1px solid rgba(179, 102, 255, 0.2);
  --menu-icon-color: #7D4BB8;
  --menu-text: #3D2361;
  --menu-hover-shadow: 0 0 20px rgba(179, 102, 255, 0.2);
  --menu-hover-border: 1px solid rgba(179, 102, 255, 0.4);
  --topnav-bg: rgba(231, 208, 255, 0.85);
  /* Card */
  --card-panel-bg: #F4D4E7;
  --card-bg: rgba(231, 208, 255, 0.85);
  --card-bg-secondary: rgba(255,255,255,.04);
  --card-border: 1px solid rgba(179, 102, 255, 0.2);
  --card-shadow: 0 8px 24px var(--shadow-color);
  --card-blur: blur(10px);
  /* Input */
  --input-bg: #F5E6FF;
  --input-border: 1px solid rgba(179, 102, 255, 0.3);
  --input-focus-border: 1px solid #7D4BB8;
  --input-focus-shadow: 0 0 0 4px rgba(179, 102, 255, 0.1);
  --input-error-border: 1px solid #dc3545;
  --input-error-shadow: 0 0 0 4px rgba(220, 53, 69, 0.08);
  /* Button */
  --button-bg: linear-gradient(135deg, #B366FF, #9A55FF);
  --button-text: #FFFFFF;
  --button-shadow: 0 8px 20px rgba(179, 102, 255, 0.2);
  --button-disabled: #CCCCCC;
  /* Feature */
  --feature-icon-bg: rgba(179, 102, 255, 0.08);
  --feature-icon-border: 1px solid rgba(179, 102, 255, 0.12);
  --feature-icon-color: #7D4BB8;
  /* Organization Selector */
  --orgrunner-image: url("../assets/images/hero-runner-1.png");
  --org-grid-dot-color: rgba(138, 43, 226, 0.08);
  --org-glow-bg: radial-gradient(circle, rgba(179, 102, 255, 0.15), transparent 70%);
  --org-card-border: 1px solid rgba(179, 102, 255, 0.15);
  --org-card-shadow: 0 8px 24px rgba(138, 43, 226, 0.12);
  --org-card-blur: blur(5px);
  --org-orb-bg: radial-gradient(circle, rgba(179, 102, 255, 0.15), transparent 70%);
  --org-title-accent: #7D4BB8;
  --org-title-underline: #7D4BB8;
  --org-subtitle-color: #6D5B8D;
  --org-input-bg: rgba(179, 102, 255, 0.04);
  --org-input-border: 1px solid rgba(179, 102, 255, 0.25);
  --org-input-focus-border: 1px solid #7D4BB8;
  --org-input-focus-shadow: 0 0 0 4px rgba(179, 102, 255, 0.08);
  --org-input-text: #2D1B4E;
  --org-input-placeholder: #8D7B9D;
  --org-input-icon-color: #7D4BB8;
  --org-button-bg: linear-gradient(135deg, #B366FF, #9A55FF);
  --org-button-text: #FFFFFF;
  --org-button-shadow: 0 8px 20px rgba(179, 102, 255, 0.2);
  /* Extras */
  --border-color: #E0CCF0;
  /* -----------------------
      Fitspeex Legacy Design Starts
  --------------------------*/
  --table-header: #333;
  --table-border: #3A3A3A;
  --bs-link-color: #40E0D0;
  --bs-link-hover-color: #00FFFF;
  /* -----------------------
      Fitspeex Legacy Design Ends
  ---------------------- */
}

/* ========================================= 
   THEME VARIABLES - Ocean Theme (New)
========================================= */
.theme-ocean {
  /* Base Colors */
  --bg: #0A1628;
  --bg-grad: #0A1628;
  --text: #E8F1F8;
  --secondary-text: #B8C5D6;
  --muted: #7A8BA0;
  --accent: #00D9FF;
  --accent-hover: #00B8E6;
  --bs-danger-rgb: 220, 53, 69;
  --alert-bg: #ff7b7b;
  --alert-text: #fd0000;
  --success-color: #28a745;
  --title-color: #333;
  /* Wrapper */
  --wrapper-bg: #0F1F35;
  --shadow-color: rgba(0, 217, 255, 0.08);
  --shadow-color-dark: rgba(0, 217, 255, 0.08);
  --wrapper-shadow: 0 20px 60px var(--shadow-color);
  --wrapper-orb-bg: radial-gradient(circle, rgba(0, 217, 255, 0.15), transparent 70%);
  /* Hero */
  --hero-text: #E8F1F8;
  --hero-subtext: #B8C5D6;
  --hero-overlay: linear-gradient(rgba(0, 217, 255, 0.15), rgba(0, 217, 255, 0.05));
  --hero-image: url("../images/fitflow-hero-art_grey.png");
  --hero-image-2: url("../images/fitflow-hero-art_grey.png");
  /* Menu */
  --menu-bg: rgba(0, 217, 255, 0.06);
  --menu-border: 1px solid rgba(0, 217, 255, 0.15);
  --menu-icon-color: #00D9FF;
  --menu-text: #E8F1F8;
  --menu-hover-shadow: 0 0 30px rgba(0, 217, 255, 0.2);
  --menu-hover-border: 1px solid rgba(0, 217, 255, 0.4);
  --topnav-bg: rgba(15, 31, 53, 0.6);
  /* Card */
  --card-panel-bg: #152335;
  --card-bg: rgba(15, 31, 53, 0.6);
  --card-bg-secondary: rgba(255,255,255,.04);
  --card-border: 1px solid rgba(0, 217, 255, 0.18);
  --card-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  --card-blur: none;
  /* Input */
  --input-bg: #1A2A40;
  --input-border: 1px solid #3A5A80;
  --input-focus-border: 1px solid #00D9FF;
  --input-focus-shadow: 0 0 0 4px rgba(0, 217, 255, 0.1);
  --input-error-border: 1px solid #dc3545;
  --input-error-shadow: 0 0 0 4px rgba(220, 53, 69, 0.08);
  /* Button */
  --button-bg: linear-gradient(135deg, #00D9FF, #00B8E6);
  --button-text: #0A1628;
  --button-shadow: 0 14px 30px rgba(0, 217, 255, 0.25);
  --button-disabled: #5A7A9A;
  /* Feature */
  --feature-icon-bg: rgba(0, 217, 255, 0.08);
  --feature-icon-border: 1px solid rgba(0, 217, 255, 0.12);
  --feature-icon-color: #00D9FF;
  /* Organization Selector */
  --orgrunner-image: url("../assets/images/hero-runner-1.png");
  --org-grid-dot-color: rgba(0, 217, 255, 0.08);
  --org-glow-bg: radial-gradient(circle, rgba(0, 217, 255, 0.15), transparent 70%);
  --org-card-border: 1px solid rgba(0, 217, 255, 0.12);
  --org-card-shadow: 0 20px 70px rgba(0, 0, 0, 0.35);
  --org-card-blur: blur(5px);
  --org-orb-bg: radial-gradient(circle, rgba(0, 217, 255, 0.15), transparent 70%);
  --org-title-accent: #00D9FF;
  --org-title-underline: #00D9FF;
  --org-subtitle-color: #8AA5C0;
  --org-input-bg: rgba(0, 217, 255, 0.04);
  --org-input-border: 1px solid rgba(0, 217, 255, 0.3);
  --org-input-focus-border: 1px solid #00D9FF;
  --org-input-focus-shadow: 0 0 0 4px rgba(0, 217, 255, 0.08);
  --org-input-text: #E8F1F8;
  --org-input-placeholder: #6A7A9A;
  --org-input-icon-color: #00D9FF;
  --org-button-bg: linear-gradient(135deg, #00D9FF, #00B8E6);
  --org-button-text: #0A1628;
  --org-button-shadow: 0 14px 30px rgba(0, 217, 255, 0.25);
  /* Extras */
  --border-color: #3A5A80;
  /* -----------------------
      Fitspeex Legacy Design Starts
  --------------------------*/
  --table-header: #333;
  --table-border: #3A3A3A;
  --bs-link-color: #40E0D0;
  --bs-link-hover-color: #00FFFF;
  /* -----------------------
      Fitspeex Legacy Design Ends
  ---------------------- */
}

/* ========================================= 
   THEME VARIABLES - Forest Theme (New)
========================================= */
.theme-forest {
  /* Base Colors */
  --bg: #0F2818;
  --bg-grad: #0F2818;
  --text: #E6F2EC;
  --secondary-text: #C0D9D0;
  --muted: #7A9A8A;
  --accent: #2ECC71;
  --accent-hover: #2ECC71;
  --bs-danger-rgb: 220, 53, 69;
  --alert-bg: #ff7b7b;
  --alert-text: #fd0000;
  --success-color: #28a745;
  --title-color: #333;
  /* Wrapper */
  --wrapper-bg: #153D26;
  --shadow-color: rgba(46, 204, 113, 0.08);
  --shadow-color-dark: rgba(46, 204, 113, 0.08);
  --wrapper-shadow: 0 20px 60px var(--shadow-color);
  --wrapper-orb-bg: radial-gradient(circle, rgba(46, 204, 113, 0.15), transparent 70%);
  /* Hero */
  --hero-text: #E6F2EC;
  --hero-subtext: #C0D9D0;
  --hero-overlay: linear-gradient(rgba(46, 204, 113, 0.15), rgba(46, 204, 113, 0.05));
  --hero-image: url("../images/fitflow-hero-art_grey.png");
  --hero-image-2: url("../images/fitflow-hero-art_grey.png");
  /* Menu */
  --menu-bg: rgba(46, 204, 113, 0.06);
  --menu-border: 1px solid rgba(46, 204, 113, 0.15);
  --menu-icon-color: #2ECC71;
  --menu-text: #E6F2EC;
  --menu-hover-shadow: 0 0 30px rgba(46, 204, 113, 0.2);
  --menu-hover-border: 1px solid rgba(46, 204, 113, 0.4);
  --topnav-bg: rgba(21, 61, 38, 0.6);
  /* Card */
  --card-panel-bg: #1A4D2E;
  --card-bg: rgba(21, 61, 38, 0.6);
  --card-bg-secondary: rgba(255,255,255,.04);
  --card-border: 1px solid rgba(46, 204, 113, 0.18);
  --card-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  --card-blur: none;
  /* Input */
  --input-bg: #1F5035;
  --input-border: 1px solid #3A7050;
  --input-focus-border: 1px solid #2ECC71;
  --input-focus-shadow: 0 0 0 4px rgba(46, 204, 113, 0.1);
  --input-error-border: 1px solid #dc3545;
  --input-error-shadow: 0 0 0 4px rgba(220, 53, 69, 0.08);
  /* Button */
  --button-bg: linear-gradient(135deg, #2ECC71, #27AE60);
  --button-text: #FFFFFF;
  --button-shadow: 0 14px 30px rgba(46, 204, 113, 0.25);
  --button-disabled: #5A8A6A;
  /* Feature */
  --feature-icon-bg: rgba(46, 204, 113, 0.08);
  --feature-icon-border: 1px solid rgba(46, 204, 113, 0.12);
  --feature-icon-color: #2ECC71;
  /* Organization Selector */
  --orgrunner-image: url("../assets/images/hero-runner-1.png");
  --org-grid-dot-color: rgba(46, 204, 113, 0.08);
  --org-glow-bg: radial-gradient(circle, rgba(46, 204, 113, 0.15), transparent 70%);
  --org-card-border: 1px solid rgba(46, 204, 113, 0.12);
  --org-card-shadow: 0 20px 70px rgba(0, 0, 0, 0.35);
  --org-card-blur: blur(5px);
  --org-orb-bg: radial-gradient(circle, rgba(46, 204, 113, 0.15), transparent 70%);
  --org-title-accent: #2ECC71;
  --org-title-underline: #2ECC71;
  --org-subtitle-color: #9AC0AA;
  --org-input-bg: rgba(46, 204, 113, 0.04);
  --org-input-border: 1px solid rgba(46, 204, 113, 0.3);
  --org-input-focus-border: 1px solid #2ECC71;
  --org-input-focus-shadow: 0 0 0 4px rgba(46, 204, 113, 0.08);
  --org-input-text: #E6F2EC;
  --org-input-placeholder: #7A9A8A;
  --org-input-icon-color: #2ECC71;
  --org-button-bg: linear-gradient(135deg, #2ECC71, #27AE60);
  --org-button-text: #FFFFFF;
  --org-button-shadow: 0 14px 30px rgba(46, 204, 113, 0.25);
  /* Extras */
  --border-color: #3A7050;
  /* -----------------------
      Fitspeex Legacy Design Starts
  --------------------------*/
  --table-header: #333;
  --table-border: #3A3A3A;
  --bs-link-color: #40E0D0;
  --bs-link-hover-color: #00FFFF;
  /* -----------------------
      Fitspeex Legacy Design Ends
  ---------------------- */
}