/* ============================================
    WHITE & YELLOW THEME - CSS VARIABLES ONLY
    PROFESSIONAL VERSION - SUBTLE YELLOW ACCENTS
    ============================================ */

:root {
   /* =============================================
      WHITE & YELLOW THEME - CSS VARIABLES ONLY
      ============================================= */
   
   /* PURE COLORS - BASE DEFINITIONS */
   --pure-white: #FFFFFF;
   --pure-yellow: #FFD700;
   
   /* LIGHT THEME - PROFESSIONAL & SUBTLE */
   --light-primary: var(--pure-yellow);           /* Yellow for accents */
   --light-primary-dark: #E6C200;                 /* Darker yellow */
   --light-primary-light: #FFEC8B;                /* Lighter yellow */
   --light-primary-rgb: 255, 215, 0;              /* RGB for rgba usage */
   
   /* Backgrounds - Mostly White with subtle variations */
   --light-bg-primary: var(--pure-white);         /* Pure white */
   --light-bg-secondary: #FAFAFA;                 /* Very light gray */
   --light-bg-tertiary: #F5F5F5;                  /* Light gray */
   --light-bg-hover: rgba(255, 215, 0, 0.05);     /* Hover background */
   
   /* Text - Dark for readability on white */
   --light-text-primary: #000000;                 /* Black - primary text */
   --light-text-secondary: #333333;               /* Dark gray */
   --light-text-muted: #666666;                   /* Medium gray */
   --light-text-disabled: #999999;                /* Light gray */
   --light-text-inverse: #FFFFFF;                 /* White - for yellow backgrounds */
   
   /* Borders - Subtle and professional */
   --light-border: rgba(0, 0, 0, 0.15);           /* Subtle black border */
   --light-border-subtle: rgba(0, 0, 0, 0.08);    /* Very subtle */
   --light-border-strong: rgba(0, 0, 0, 0.25);    /* Stronger but still subtle */
   --light-border-focus: var(--pure-yellow);      /* Yellow for focus */
   
   /* Hover/Active states - Very subtle yellow */
   --light-hover: rgba(255, 215, 0, 0.05);        /* Barely visible yellow */
   --light-active: rgba(255, 215, 0, 0.1);        /* Subtle yellow */
   --light-selected: rgba(255, 215, 0, 0.15);     /* Selected state */
   --light-focus: rgba(255, 215, 0, 0.2);         /* Focus ring */
   --light-disabled: rgba(0, 0, 0, 0.05);         /* Disabled state */
   
   /* STATUS - ALL USE PRIMARY YELLOW */
   --light-success: var(--light-primary);
   --light-warning: var(--light-primary);
   --light-danger: var(--light-primary);
   --light-info: var(--light-primary);
   
   /* GRAY SCALE - For compatibility */
   --gray-50: #FAFAFA;
   --gray-100: #F5F5F5;
   --gray-200: #E5E5E5;
   --gray-300: #D4D4D4;
   --gray-400: #A3A3A3;
   --gray-500: #737373;
   --gray-600: #525252;
   --gray-700: #404040;
   --gray-800: #262626;
   --gray-900: #171717;
   
   /* LEGACY PRIMARY VARIABLES - For compatibility */
   --primary-100: var(--light-primary-light);
   --primary-200: var(--light-primary-light);
   --primary-300: var(--light-primary);
   --primary-400: var(--light-primary);
   --primary-500: var(--light-primary);
   --primary-600: var(--light-primary-dark);
   --primary-700: var(--light-primary-dark);
   --primary-800: var(--light-primary-dark);
   --primary-900: #B8860B;
   
   /* DARK THEME - For completeness */
   --dark-primary: var(--pure-yellow);
   --dark-primary-dark: #E6C200;
   --dark-primary-light: #FFEC8B;
   
   --dark-bg-primary: #000000;
   --dark-bg-secondary: #111111;
   --dark-bg-tertiary: #222222;
   
   --dark-text-primary: #FFFFFF;
   --dark-text-secondary: #CCCCCC;
   --dark-text-muted: #999999;
   --dark-text-disabled: #666666;
   --dark-text-inverse: #FFFFFF;
   
   --dark-border: rgba(255, 255, 255, 0.2);
   --dark-border-subtle: rgba(255, 255, 255, 0.1);
   --dark-border-strong: rgba(255, 255, 255, 0.3);
   --dark-border-focus: var(--pure-yellow);
   
   --dark-hover: rgba(255, 215, 0, 0.2);
   --dark-active: rgba(255, 215, 0, 0.35);
   --dark-selected: rgba(255, 215, 0, 0.4);
   --dark-focus: rgba(255, 215, 0, 0.4);
   --dark-disabled: rgba(255, 255, 255, 0.1);
   
   --dark-success: var(--dark-primary);
   --dark-warning: var(--dark-primary);
   --dark-danger: var(--dark-primary);
   --dark-info: var(--dark-primary);
   
   /* SPACING - More generous for professional look */
   --space-0: 0;
   --space-1: 0.25rem;
   --space-2: 0.5rem;
   --space-3: 0.75rem;
   --space-4: 1rem;
   --space-5: 1.25rem;
   --space-6: 1.5rem;
   --space-8: 2rem;
   --space-10: 2.5rem;
   --space-12: 3rem;
   --space-16: 4rem;
   --space-20: 5rem;
   --space-24: 6rem;
   
   /* BORDER RADIUS - Softer corners */
   --radius-sm: 0.375rem;
   --radius-md: 0.75rem;
   --radius-lg: 1.25rem;
   --radius-xl: 2rem;
   --radius-2xl: 3rem;
   --radius-3xl: 4rem;
   
   /* SHADOWS - Professional depth */
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
   --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.15);
   --shadow-glow: 0 0 20px rgba(255, 215, 0, 0.3);
   
   /* TYPOGRAPHY - Professional fonts */
   --text-xs: 0.75rem;
   --text-sm: 0.875rem;
   --text-base: 1rem;
   --text-lg: 1.125rem;
   --text-xl: 1.25rem;
   --text-2xl: 1.5rem;
   --text-3xl: 1.875rem;
   --text-4xl: 2.25rem;
   --text-5xl: 3rem;
   
   --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
   --font-serif: 'Georgia', 'Times New Roman', serif;
   
   --font-weight-light: 300;
   --font-weight-normal: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
   --font-weight-extrabold: 800;
   
   --leading-tight: 1.25;
   --leading-normal: 1.5;
   --leading-relaxed: 1.75;
   
   /* TRANSITIONS - Smooth */
   --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
   --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
   --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
   --transition-colors: all 0.2s ease;
    --transition-duration-base: 200ms;
    --transition-timing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Spacing Scale */
--spacing-xs: 0.25rem;   /* 4px */
--spacing-sm: 0.5rem;    /* 8px */
--spacing-md: 1rem;       /* 16px */
--spacing-lg: 1.5rem;     /* 24px */
--spacing-xl: 2rem;       /* 32px */
--spacing-xxl: 3rem;      /* 48px */

/* Border Radius Scale */
--border-radius: 0.75rem;     /* 12px */
--border-radius-sm: 0.375rem; /* 6px */
--border-radius-lg: 1.25rem;  /* 20px */
--border-radius-xl: 1.5rem;    /* 24px */
--border-radius-full: 9999px;

/* Transitions */
--transition-fast: 150ms ease;
--transition-base: 200ms ease;
--transition-slow: 300ms ease;

/* Shadows */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);