/* ==========================================
 * GLOBAL DESIGN TOKENS SYSTEM
 * ==========================================
 * This file contains ALL design tokens for the entire application
 * All other CSS files should ONLY reference these variables
 */

:root {
  /* ==========================================
   * BRAND IDENTITY
   * ==========================================*/
  --brand-primary: #69be28; /* IBA Green */
  --brand-primary-light: #8ccf4a;
  --brand-primary-dark: #4a7d1c;
  --brand-primary-contrast: #ffffff;
  --brand-primary-alpha: rgba(
    105,
    190,
    40,
    0.3
  ); /* Semi-transparent brand color */

  --brand-secondary: #9c27b0; /* Purple for special activities */
  --brand-secondary-light: #d1c4e9;
  --brand-secondary-dark: #6a1b5c;

  /* ==========================================
   * COLOR SYSTEM - LIGHT MODE
   * ==========================================*/

  /* Primary Palette */
  --color-primary: #eaddd5; /* Mist Rose */
  --color-primary-hover: #dbcbc1;
  --color-primary-light: #f7f2f0;
  --color-primary-contrast: #3b3b3b;

  /* Secondary Palette */
  --color-secondary: #cbd9e8; /* Cool Cloud Blue */
  --color-secondary-hover: #b4c5db;
  --color-secondary-light: #f1f5f9;
  --color-secondary-contrast: #2a2a2a;

  /* Accent Palette */
  --color-accent: #2da235c6; /* Clay Taupe */
  --color-accent-hover: #0f9121d0;
  --color-accent-light: #efeae5;

  /* Neutral Palette */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-surface: #fafafa;
  --color-background: #f4f5f7;
  --color-background-alt: #f8f9fa;

  /* Surface System */
  --surface-primary: #ffffff;
  --surface-secondary: #f8f9fa;
  --surface-tertiary: #e9ecef;
  --surface-accent: rgba(173, 216, 230, 0.5); /* Light blue for weekends */
  --surface-hover: #e0f2f1; /* Subtle green tint on hover */
  --surface-tooltip: rgba(0, 0, 0, 0.8);

  /* Overlay System */
  --overlay-backdrop: rgba(44, 62, 80, 0.25);

  /* Text Colors */
  --text-primary: #2f2f2f;
  --text-secondary: #737373;
  --text-muted: #9ca3af;
  --text-disabled: #d1d5db;
  --text-inverse: #ffffff;

  /* Border Colors */
  --border-primary: #c6c8cc;
  --border-secondary: #d1d5db;
  --border-light: #f3f4f6;
  --border-focus: var(--brand-primary);

  /* Status Colors */
  --color-success: #98c1a1;
  --color-success-light: #d4edda;
  --color-success-dark: #6b8e6f;

  --color-warning: #f1cb7e;
  --color-warning-light: #fff3cd;
  --color-warning-dark: #b8941f;

  --color-danger: #d77e7e;
  --color-danger-light: #f8d7da;
  --color-danger-dark: #a94442;

  --color-info: #5bc0de;
  --color-info-light: #d1ecf1;
  --color-info-dark: #31708f;

  /* Semantic Status Variables */
  --status-error: #ff5252;
  --status-error-light: #f8d7da;
  --status-error-dark: #a94442;
  --status-error-contrast: #ffffff; /* White text on error background */

  --status-warning: #ffeb3b;
  --status-warning-light: #fff3cd;
  --status-warning-dark: #b8941f;

  --status-info: #2196f3;
  --status-info-light: #d1ecf1;
  --status-info-dark: #31708f;

  --status-success: #4caf50;
  --status-success-light: #d4edda;
  --status-success-dark: #388e3c;

  /* ==========================================
   * COLOR SYSTEM - DARK MODE
   * ==========================================*/

  /* Background Layers - Rich, Deep, Premium */
  --dark-bg-primary: #0a0e14; /* Ultra-deep background with subtle blue tint */
  --dark-bg-secondary: #14181f; /* Rich cards, containers with depth */
  --dark-bg-tertiary: #1d2128; /* Elevated elements with premium feel */
  --dark-bg-quaternary: #252931; /* Highest elevation, sophisticated */

  /* Text Colors - Crystal Clear */
  --dark-text-primary: #e6edf3; /* Bright, clear primary text */
  --dark-text-secondary: #9da5b3; /* Refined secondary text */
  --dark-text-muted: #6e7681; /* Elegant muted text */
  --dark-text-disabled: #484f58; /* Subtle disabled text */
  --dark-on-warn: #0a0e14; /* Text on warning backgrounds */

  /* Border Colors - Refined Edges */
  --dark-border-primary: #2d3139;
  --dark-border-secondary: #21262d;
  --dark-border: #2d3139; /* Alias for primary border - slightly lighter */
  --dark-border-focus: var(--dark-accent-blue);
  --dark-border-glow: rgba(88, 166, 255, 0.15); /* Subtle glow effect */

  /* Accent Colors for Dark Mode - Vibrant & Modern */
  --dark-accent-blue: #5fb4ff; /* Brighter, more vibrant blue */
  --dark-accent-blue-hover: #8fc9ff; /* Softer hover state */
  --dark-accent-green: #4ade80; /* Modern, bright green */
  --dark-accent-yellow: #fbbf24; /* Warm, inviting yellow */
  --dark-accent-red: #f87171; /* Vibrant but not harsh red */
  --dark-accent-purple: #a78bfa; /* Elegant purple */
  --dark-accent-orange: #fb923c; /* Warm orange accent */

  /* Status Colors - Dark Mode - Enhanced Vibrancy */
  --dark-success: #4ade80;
  --dark-warning: #fbbf24;
  --dark-danger: #f87171;
  --dark-info: #5fb4ff;

  /* ==========================================
   * SHADOWS SYSTEM
   * ==========================================*/
  --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.02);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 6px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.1);

  /* Additional shadow variants for specific use cases */
  --shadow-float:
    0 8px 16px -4px rgba(37, 99, 235, 0.12), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-elevated: 0 10px 40px rgba(0, 0, 0, 0.2);
  --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.06);

  /* Dark Mode Shadows - Enhanced Depth & Premium Feel */
  --dark-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  --dark-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --dark-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5);
  --dark-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.7);
  --dark-shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.8);
  --dark-focus-ring: 0 0 0 3px rgba(95, 180, 255, 0.4);
  --dark-glow-subtle: 0 0 20px rgba(95, 180, 255, 0.08);
  --dark-glow-strong: 0 0 30px rgba(95, 180, 255, 0.15);

  /* ==========================================
   * BORDER RADIUS SYSTEM
   * ==========================================*/
  --radius-none: 0;
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  /* ==========================================
   * SPACING SYSTEM
   * ==========================================*/
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;

  /* Shared shell spacing */
  --shell-gutter: clamp(16px, 2vw, 30px);
  --shell-content-width: min(1480px, calc(100vw - (var(--shell-gutter) * 2)));
  --shell-content-width-wide: min(
    1680px,
    calc(100vw - (var(--shell-gutter) * 2))
  );
  --shell-header-height: 88px;
  --shell-header-height-compact: 72px;
  --shell-content-offset: calc(var(--shell-header-height) + var(--spacing-xl));
  --shell-content-offset-compact: calc(
    var(--shell-header-height-compact) + var(--spacing-lg)
  );
  --shell-section-gap: clamp(var(--spacing-lg), 2vw, var(--spacing-2xl));
  --shell-page-padding-bottom: clamp(
    var(--spacing-xl),
    4vw,
    var(--spacing-3xl)
  );
  --shell-backdrop-highlight: rgba(105, 190, 40, 0.14);
  --shell-backdrop-muted: rgba(203, 217, 232, 0.5);
  --shell-backdrop-shadow: rgba(74, 125, 28, 0.12);

  /* ==========================================
   * TYPOGRAPHY SYSTEM
   * ==========================================*/
  --font-family-base:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-heading: "Playfair Display", serif;
  --font-family-mono:
    "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;

  /* Font Sizes */
  --font-size-xxs: 0.65rem; /* 12px */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-md: 1.125rem; /* 18px */
  --font-size-lg: 1.25rem; /* 20px */
  --font-size-xl: 1.5rem; /* 24px */
  --font-size-2xl: 1.875rem; /* 30px */
  --font-size-3xl: 2.25rem; /* 36px */

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;

  /* ==========================================
   * COMPONENT TOKENS
   * ==========================================*/

  /* Button System */
  --btn-border-radius: var(--radius-md);
  --btn-padding-x: var(--spacing-md);
  --btn-padding-y: var(--spacing-sm);
  --btn-font-weight: var(--font-weight-medium);

  /* Form Controls */
  --input-border-radius: var(--radius-sm);
  --input-padding-x: var(--spacing-md);
  --input-padding-y: var(--spacing-sm);
  --input-border-width: 1px;

  /* Cards */
  --card-border-radius: var(--radius-md);
  --card-padding: 15px 24px;
  --card-shadow: var(--shadow-md);

  /* Modals */
  --modal-border-radius: var(--radius-lg);
  --modal-padding: var(--spacing-xl);
  --modal-shadow: var(--shadow-xl);

  /* ==========================================
   * GRADIENTS
   * ==========================================*/
  --gradient-primary: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-hover) 100%
  );
  --gradient-brand: linear-gradient(
    135deg,
    var(--brand-primary) 0%,
    var(--brand-primary-dark) 100%
  );
  --gradient-subtle: linear-gradient(
    135deg,
    var(--surface-primary) 0%,
    var(--surface-secondary) 100%
  );
  --gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  /* Light Mode Utility Gradients */
  --gradient-purple-blue: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-info: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);

  /* Dark Mode Gradients */
  --dark-gradient-primary: linear-gradient(
    135deg,
    #1e3a8a 0%,
    #3730a3 50%,
    #581c87 100%
  );
  --dark-gradient-secondary: linear-gradient(
    135deg,
    #374151 0%,
    #4b5563 50%,
    #6b7280 100%
  );
  --dark-gradient-card: linear-gradient(
    145deg,
    var(--dark-bg-secondary) 0%,
    var(--dark-bg-primary) 100%
  );
  --dark-gradient-purple-blue: linear-gradient(
    135deg,
    #7c3aed 0%,
    #a855f7 100%
  );
  --dark-gradient-info: linear-gradient(135deg, #5fb4ff 0%, #8fc9ff 100%);

  /* ==========================================
   * Z-INDEX SCALE
   * ==========================================*/
  --z-navbar: 1010;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;

  /* ==========================================
   * ANIMATION TOKENS
   * ==========================================*/
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;

  --easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ==========================================
   * LEGACY COMPATIBILITY ALIASES
   * ==========================================
   * Keeps older CSS files aligned with the global authority.
   */

  /* Common legacy names */
  --iba-color: var(--brand-primary);
  --color-text: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-placeholder: var(--text-muted);
  --color-muted: var(--text-muted);
  --color-light: var(--surface-primary);
  --color-light-secondary: var(--surface-secondary);
  --color-dark: var(--text-primary);
  --background-color: var(--color-background);
  --surface-color: var(--surface-primary);
  --card-background: var(--surface-primary);
  --input-background: var(--surface-primary);
  --code-background: var(--surface-secondary);
  --border-color: var(--border-primary);
  --border-width: var(--input-border-width);
  --color-border: var(--border-primary);
  --color-background-light: var(--surface-secondary);
  --surface-base: var(--surface-primary);
  --surface-elevated: var(--surface-secondary);

  /* Missing utility tokens */
  --spacing-2xs: 2px;
  --font-size-4xl: 2.5rem;
  --font-weight-semi-bold: var(--font-weight-semibold);
  --radius-full: var(--radius-pill);
  --text-tertiary: var(--text-muted);
  --shadow-focus: 0 0 0 3px var(--brand-primary-alpha);
  --brand-primary-rgb: 105, 190, 40;
  --brand-success: var(--color-success);
  --primary-color: var(--brand-primary);
  --primary-dark: var(--brand-primary-dark);
  --primary-hover: var(--brand-primary-light);
  --color-primary-dark: var(--brand-primary-dark);
  --color-purple: var(--brand-secondary);

  /* Alpha helper tokens */
  --status-error-alpha: rgba(255, 82, 82, 0.2);
  --status-success-alpha: rgba(76, 175, 80, 0.2);
  --status-warning-alpha: rgba(255, 235, 59, 0.2);

  /* Status border/hover helpers */
  --color-success-border: var(--color-success);
  --color-warning-border: var(--color-warning);
  --color-danger-border: var(--color-danger);
  --color-info-border: var(--color-info);
  --color-success-light-hover: var(--color-success-light);
  --color-warning-light-hover: var(--color-warning-light);
  --color-danger-light-hover: var(--color-danger-light);
  --color-info-light-hover: var(--color-info-light);

  /* Bootstrap semantic aliases */
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: var(--brand-primary-rgb);
  --bs-secondary: var(--color-secondary);
  --bs-secondary-bg: var(--surface-secondary);
  --bs-secondary-color: var(--text-secondary);
  --bs-tertiary-bg: var(--surface-tertiary);
  --bs-body-bg: var(--color-background);
  --bs-body-color: var(--text-primary);
  --bs-border-color: var(--border-primary);
  --bs-light: var(--surface-primary);
  --bs-dark: var(--text-primary);
  --bs-gray-700: var(--text-secondary);

  /* Scheduler aliases */
  --schedule-primary: var(--color-info);
  --schedule-primary-hover: var(--status-info);
  --schedule-success: var(--color-success);
  --schedule-warning: var(--color-warning);
  --schedule-danger: var(--color-danger);
  --schedule-transition: var(--transition-normal);
  --schedule-shadow-sm: var(--shadow-sm);
  --schedule-shadow: var(--shadow-md);
  --schedule-shadow-lg: var(--shadow-lg);
  --schedule-shadow-xl: var(--shadow-xl);
  --schedule-shadow-float: var(--shadow-float);

  /* Professional dashboard aliases */
  --pro-primary: var(--brand-primary);
  --pro-primary-light: var(--brand-primary-light);
  --pro-primary-dark: var(--brand-primary-dark);
  --pro-secondary: var(--color-secondary);
  --pro-accent: var(--brand-secondary);
  --pro-accent-light: var(--brand-secondary-light);
  --pro-success: var(--color-success);
  --pro-warning: var(--color-warning);
  --pro-danger: var(--color-danger);
  --pro-info: var(--color-info);
  --pro-info-dark: var(--color-info-dark);
  --pro-danger-dark: var(--color-danger-dark);
  --pro-surface: var(--surface-primary);
  --pro-surface-light: var(--surface-secondary);
  --pro-surface-alt: var(--surface-tertiary);
  --pro-surface-dark: var(--dark-bg-secondary);
  --pro-surface-disabled: var(--color-background-alt);
  --pro-bg-light: var(--color-background-alt);
  --pro-bg-hover: var(--surface-hover);
  --pro-border: var(--border-primary);
  --pro-border-light: var(--border-light);
  --pro-text: var(--text-primary);
  --pro-text-dark: var(--text-primary);
  --pro-text-light: var(--text-inverse);
  --pro-text-secondary: var(--text-secondary);
  --pro-text-muted: var(--text-muted);
  --pro-radius: var(--radius-md);
  --pro-radius-sm: var(--radius-sm);
  --pro-radius-md: var(--radius-md);
  --pro-shadow: var(--shadow-md);
  --pro-shadow-lg: var(--shadow-lg);
  --pro-transition: var(--transition-normal);
  --pro-font: var(--font-family-base);
  --pro-gradient: var(--gradient-brand);

  /* SAP-style aliases */
  --sap-bg-primary: var(--surface-primary);
  --sap-bg-secondary: var(--surface-secondary);
  --sap-bg-alternate: var(--surface-tertiary);
  --sap-border-color: var(--border-primary);
  --sap-text-primary: var(--text-primary);
  --sap-text-secondary: var(--text-secondary);
  --sap-input-bg: var(--surface-primary);
  --sap-btn-primary: var(--brand-primary);
  --sap-btn-primary-hover: var(--brand-primary-dark);
  --sap-btn-warning: var(--color-warning);
  --sap-btn-warning-hover: var(--color-warning-dark);
  --sap-total-bg: var(--color-info-light);
  --sap-total-intersection: var(--color-warning-light);
  --sap-shadow: var(--shadow-md);

  /* Gradient aliases */
  --gradient-success-dark: linear-gradient(
    135deg,
    var(--color-success) 0%,
    var(--color-success-dark) 100%
  );

  /* ==========================================
   * SEMANTIC INTERACTION COLORS
   * ==========================================
   * Used across all interactive components
   */

  /* Primary Interactive State */
  --interactive-primary: var(--brand-primary);
  --interactive-primary-hover: var(--brand-primary-light);
  --interactive-primary-active: var(--brand-primary-dark);
  --interactive-primary-disabled: rgba(105, 190, 40, 0.5);
  --interactive-primary-bg: rgba(105, 190, 40, 0.08);

  /* Secondary Interactive State */
  --interactive-secondary: var(--color-secondary);
  --interactive-secondary-hover: var(--color-secondary-hover);
  --interactive-secondary-active: var(--color-secondary);
  --interactive-secondary-disabled: rgba(203, 217, 232, 0.5);
  --interactive-secondary-bg: rgba(203, 217, 232, 0.08);

  /* Success Interactive State */
  --interactive-success: var(--color-success);
  --interactive-success-hover: var(--color-success-light);
  --interactive-success-active: var(--color-success-dark);
  --interactive-success-disabled: rgba(152, 193, 161, 0.5);
  --interactive-success-bg: rgba(152, 193, 161, 0.08);

  /* Warning Interactive State */
  --interactive-warning: var(--color-warning);
  --interactive-warning-hover: var(--color-warning-light);
  --interactive-warning-active: var(--color-warning-dark);
  --interactive-warning-disabled: rgba(241, 203, 126, 0.5);
  --interactive-warning-bg: rgba(241, 203, 126, 0.08);

  /* Danger Interactive State */
  --interactive-danger: var(--color-danger);
  --interactive-danger-hover: var(--color-danger-light);
  --interactive-danger-active: var(--color-danger-dark);
  --interactive-danger-disabled: rgba(215, 126, 126, 0.5);
  --interactive-danger-bg: rgba(215, 126, 126, 0.08);

  /* Info Interactive State */
  --interactive-info: var(--color-info);
  --interactive-info-hover: var(--color-info-light);
  --interactive-info-active: var(--color-info-dark);
  --interactive-info-disabled: rgba(91, 192, 222, 0.5);
  --interactive-info-bg: rgba(91, 192, 222, 0.08);

  /* ==========================================
   * FORM ELEMENT STYLING
   * ==========================================
   * Consistent input, select, textarea styling
   */

  --form-bg-default: var(--color-white);
  --form-border-default: var(--border-primary);
  --form-border-focus: var(--brand-primary);
  --form-border-error: var(--color-danger);
  --form-text-default: var(--text-primary);
  --form-text-placeholder: var(--text-muted);
  --form-shadow-focus: 0 0 0 3px var(--brand-primary-alpha);
  --form-bg-disabled: var(--color-background-alt);
  --form-text-disabled: var(--text-disabled);

  /* Dark Mode Form Elements */
  --dark-form-bg-default: var(--dark-bg-secondary);
  --dark-form-border-default: var(--dark-border);
  --dark-form-border-focus: var(--dark-accent-blue);
  --dark-form-border-error: var(--dark-accent-red);
  --dark-form-text-default: var(--dark-text-primary);
  --dark-form-text-placeholder: var(--dark-text-muted);
  --dark-form-shadow-focus: 0 0 0 3px rgba(95, 180, 255, 0.3);
  --dark-form-bg-disabled: var(--dark-bg-tertiary);
  --dark-form-text-disabled: var(--dark-text-disabled);

  /* ==========================================
   * ENHANCED GRADIENT LIBRARY
   * ==========================================
   * Professional gradients for all scenarios
   */

  /* Interactive/Primary Gradients */
  --gradient-interactive: linear-gradient(
    135deg,
    var(--brand-primary) 0%,
    var(--brand-primary-light) 100%
  );
  --gradient-interactive-dark: linear-gradient(
    135deg,
    var(--dark-accent-blue) 0%,
    var(--dark-accent-blue-hover) 100%
  );

  /* Modal/Elevation Gradients */
  --gradient-modal: linear-gradient(135deg, #007bff 0%, #5a67d8 100%);
  --gradient-modal-dark: linear-gradient(
    135deg,
    var(--dark-accent-blue) 0%,
    #7c3aed 100%
  );

  /* Success Gradients */
  --gradient-success: linear-gradient(
    135deg,
    var(--color-success) 0%,
    var(--color-success-dark) 100%
  );
  --gradient-success-dark: linear-gradient(
    135deg,
    var(--dark-accent-green) 0%,
    #22c55e 100%
  );

  /* Warning Gradients */
  --gradient-warning: linear-gradient(
    135deg,
    var(--color-warning) 0%,
    var(--color-warning-dark) 100%
  );
  --gradient-warning-dark: linear-gradient(
    135deg,
    var(--dark-accent-yellow) 0%,
    #fcd34d 100%
  );

  /* Danger Gradients */
  --gradient-danger: linear-gradient(
    135deg,
    var(--color-danger) 0%,
    var(--color-danger-dark) 100%
  );
  --gradient-danger-dark: linear-gradient(
    135deg,
    var(--dark-accent-red) 0%,
    #fb7185 100%
  );

  /* Info Gradients */
  --gradient-info: linear-gradient(
    135deg,
    var(--color-info) 0%,
    var(--color-info-dark) 100%
  );
  --gradient-info-dark: linear-gradient(
    135deg,
    var(--dark-accent-blue) 0%,
    #5fb4ff 100%
  );

  /* Neutral/Subtle Gradients */
  --gradient-neutral: linear-gradient(
    135deg,
    var(--surface-primary) 0%,
    var(--surface-secondary) 100%
  );
  --gradient-neutral-dark: linear-gradient(
    135deg,
    var(--dark-bg-secondary) 0%,
    var(--dark-bg-tertiary) 100%
  );

  /* ==========================================
   * OPACITY & ALPHA HELPERS
   * ==========================================
   * For transparent overlays, backgrounds, etc.
   */

  /* Interactive alpha values */
  --alpha-interactive-10: rgba(105, 190, 40, 0.1);
  --alpha-interactive-20: rgba(105, 190, 40, 0.2);
  --alpha-interactive-30: rgba(105, 190, 40, 0.3);

  /* Success alpha values */
  --alpha-success-10: rgba(152, 193, 161, 0.1);
  --alpha-success-20: rgba(152, 193, 161, 0.2);
  --alpha-success-30: rgba(152, 193, 161, 0.3);

  /* Warning alpha values */
  --alpha-warning-10: rgba(241, 203, 126, 0.1);
  --alpha-warning-20: rgba(241, 203, 126, 0.2);
  --alpha-warning-30: rgba(241, 203, 126, 0.3);

  /* Danger alpha values */
  --alpha-danger-10: rgba(215, 126, 126, 0.1);
  --alpha-danger-20: rgba(215, 126, 126, 0.2);
  --alpha-danger-30: rgba(215, 126, 126, 0.3);

  /* Info alpha values */
  --alpha-info-10: rgba(91, 192, 222, 0.1);
  --alpha-info-20: rgba(91, 192, 222, 0.2);
  --alpha-info-30: rgba(91, 192, 222, 0.3);

  /* Dark mode alpha helpers */
  --dark-alpha-10: rgba(255, 255, 255, 0.1);
  --dark-alpha-20: rgba(255, 255, 255, 0.2);
  --dark-alpha-30: rgba(255, 255, 255, 0.3);

  /* ==========================================
   * COMPONENT-SPECIFIC TOKENS
   * ==========================================
   * For consistent styling of common patterns
   */

  /* Checkbox/Radio styling */
  --checkbox-border: var(--border-primary);
  --checkbox-bg: var(--color-white);
  --checkbox-checked-bg: var(--gradient-interactive);
  --checkbox-checked-border: var(--brand-primary);
  --checkbox-checked-color: var(--color-white);
  --dark-checkbox-border: var(--dark-border);
  --dark-checkbox-bg: var(--dark-bg-secondary);
  --dark-checkbox-checked-bg: var(--gradient-interactive-dark);
  --dark-checkbox-checked-border: var(--dark-accent-blue);
  --dark-checkbox-checked-color: var(--dark-text-primary);

  /* Link styling */
  --link-color: var(--brand-primary);
  --link-hover-color: var(--brand-primary-dark);
  --link-visited-color: var(--brand-secondary);
  --dark-link-color: var(--dark-accent-blue);
  --dark-link-hover-color: var(--dark-accent-blue-hover);
  --dark-link-visited-color: var(--dark-accent-purple);

  /* Focus Ring */
  --focus-ring-color: var(--brand-primary);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --dark-focus-ring-color: var(--dark-accent-blue);
}

/* ==========================================
 * AUTOMATIC DARK MODE VARIABLES
 * ==========================================
 * These automatically switch based on body.dark-mode class
 */

/* Light mode defaults (already set above) */

/* Dark mode overrides */
body.dark-mode {
  /* Override semantic color variables for dark mode */
  --color-surface: var(--dark-bg-secondary);
  --color-background: var(--dark-bg-primary);
  --color-background-alt: var(--dark-bg-tertiary);

  /* Surface System - Dark Mode */
  --surface-primary: var(--dark-bg-secondary);
  --surface-secondary: var(--dark-bg-tertiary);
  --surface-tertiary: var(--dark-bg-quaternary);
  --surface-accent: rgba(88, 166, 255, 0.2); /* Blue accent for dark mode */
  --surface-hover: rgba(88, 166, 255, 0.1);
  --surface-tooltip: rgba(0, 0, 0, 0.9);

  /* Overlay System - Dark Mode */
  --overlay-backdrop: rgba(0, 0, 0, 0.7);

  --text-primary: var(--dark-text-primary);
  --text-secondary: var(--dark-text-secondary);
  --text-muted: var(--dark-text-muted);
  --text-disabled: var(--dark-text-disabled);

  --border-primary: var(--dark-border-primary);
  --border-secondary: var(--dark-border-secondary);
  --border-light: var(
    --dark-border-secondary
  ); /* Use secondary for light borders in dark mode */
  --border-focus: var(--dark-border-focus);

  --color-success: var(--dark-success);
  --color-warning: var(--dark-warning);
  --color-danger: var(--dark-danger);
  --color-info: var(--dark-info);

  /* Status Colors - Dark Mode */
  --status-error: var(--dark-accent-red);
  --status-warning: var(--dark-accent-yellow);
  --status-info: var(--dark-accent-blue);
  --status-success: var(--dark-accent-green);

  /* Dark compatibility aliases */
  --dark-bg-hover: var(--dark-bg-tertiary);
  --dark-border-light: var(--dark-border-secondary);
  --dark-border-muted: var(--dark-border-secondary);
  --dark-progress-track: var(--dark-bg-tertiary);
  --dark-shadow-xs: var(--dark-shadow-sm);
  --dark-status-error: var(--dark-accent-red);
  --dark-status-error-light: rgba(248, 113, 113, 0.2);
  --dark-status-info: var(--dark-accent-blue);
  --dark-status-info-dark: var(--dark-accent-blue);
  --dark-status-info-light: rgba(95, 180, 255, 0.2);
  --dark-status-success: var(--dark-accent-green);
  --dark-status-success-light: rgba(74, 222, 128, 0.2);

  --card-shadow: var(--dark-shadow);
  --modal-shadow: var(--dark-shadow-lg);

  /* Remap the shadow scale to the dark variants so any component using
     var(--shadow-*) gets the stronger dark shadows automatically. */
  --shadow-xs: var(--dark-shadow-xs);
  --shadow-sm: var(--dark-shadow-sm);
  --shadow-md: var(--dark-shadow-md);
  --shadow-lg: var(--dark-shadow-lg);
  --shadow-xl: var(--dark-shadow-xl);

  /* Override semantic interaction colors for dark mode */
  --interactive-primary: var(--dark-accent-blue);
  --interactive-primary-hover: var(--dark-accent-blue-hover);
  --interactive-primary-active: #4a9eff;
  --interactive-primary-disabled: rgba(95, 180, 255, 0.5);
  --interactive-primary-bg: rgba(95, 180, 255, 0.1);

  --interactive-success: var(--dark-accent-green);
  --interactive-success-hover: #86efac;
  --interactive-success-active: #22c55e;
  --interactive-success-disabled: rgba(74, 222, 128, 0.5);
  --interactive-success-bg: rgba(74, 222, 128, 0.1);

  --interactive-warning: var(--dark-accent-yellow);
  --interactive-warning-hover: #fde047;
  --interactive-warning-active: #eab308;
  --interactive-warning-disabled: rgba(251, 191, 36, 0.5);
  --interactive-warning-bg: rgba(251, 191, 36, 0.1);

  --interactive-danger: var(--dark-accent-red);
  --interactive-danger-hover: #fb7185;
  --interactive-danger-active: #f43f5e;
  --interactive-danger-disabled: rgba(248, 113, 113, 0.5);
  --interactive-danger-bg: rgba(248, 113, 113, 0.1);

  --interactive-info: var(--dark-accent-blue);
  --interactive-info-hover: var(--dark-accent-blue-hover);
  --interactive-info-active: #4a9eff;
  --interactive-info-disabled: rgba(95, 180, 255, 0.5);
  --interactive-info-bg: rgba(95, 180, 255, 0.1);

  /* Form elements dark mode */
  --form-bg-default: var(--dark-form-bg-default);
  --form-border-default: var(--dark-form-border-default);
  --form-border-focus: var(--dark-form-border-focus);
  --form-border-error: var(--dark-form-border-error);
  --form-text-default: var(--dark-form-text-default);
  --form-text-placeholder: var(--dark-form-text-placeholder);
  --form-shadow-focus: var(--dark-form-shadow-focus);
  --form-bg-disabled: var(--dark-form-bg-disabled);
  --form-text-disabled: var(--dark-form-text-disabled);

  /* Gradient overrides for dark mode */
  --gradient-interactive: var(--gradient-interactive-dark);
  --gradient-modal: var(--gradient-modal-dark);
  --gradient-success: var(--gradient-success-dark);
  --gradient-warning: var(--gradient-warning-dark);
  --gradient-danger: var(--gradient-danger-dark);
  --gradient-info: var(--gradient-info-dark);
  --gradient-neutral: var(--gradient-neutral-dark);
  --gradient-brand: linear-gradient(
    135deg,
    var(--dark-accent-blue) 0%,
    #7c3aed 100%
  );

  /* Checkbox dark mode overrides */
  --checkbox-border: var(--dark-checkbox-border);
  --checkbox-bg: var(--dark-checkbox-bg);
  --checkbox-checked-bg: var(--dark-checkbox-checked-bg);
  --checkbox-checked-border: var(--dark-checkbox-checked-border);
  --checkbox-checked-color: var(--dark-checkbox-checked-color);

  /* Link dark mode overrides */
  --link-color: var(--dark-link-color);
  --link-hover-color: var(--dark-link-hover-color);
  --link-visited-color: var(--dark-link-visited-color);

  /* Focus ring dark mode */
  --focus-ring-color: var(--dark-focus-ring-color);
}