/* =============================================================================
   F-Nous Portal - Centralized Theme System
   Version: 2.0.0

   Structure:
   1. PALETTE - The only "real" colors (~15 base colors)
   2. SEMANTIC - Usage-based tokens derived from palette
   3. STATUS DERIVED - Auto-generated variants via color-mix()
   4. CHARTS - Extended palette for data visualization
   5. LEGACY ALIASES - Backward compatibility (never redefines core tokens)
   ============================================================================= */

:root {
  /* =========================================================================
     1. PALETTE - The actual colors (keep this small!)
     ========================================================================= */

  /* Brand blues */
  --brand-500: #0079a4;          /* Primary brand */
  --brand-600: #006488;          /* Darker brand */
  --accent-500: #00a0e3;         /* F-Nous signature blue */
  --accent-400: #2f96b9;         /* Lighter accent */
  --accent-300: #39a6c9;         /* Hover accent */

  /* Neutrals (dark theme scale) */
  --neutral-950: #0a0a0a;        /* Deepest black */
  --neutral-900: #1a1a1a;        /* Modal/surface dark */
  --neutral-800: #222;           /* Card background */
  --neutral-700: #333;           /* Text on light */
  --neutral-600: #444;           /* Medium gray */
  --neutral-500: #5a5a5a;        /* Light gray */
  --neutral-400: #666;           /* Muted text on light */
  --neutral-300: #9aa;           /* Footer text */

  /* Tiles - Pastel Palette (60% opacity) */
  --tile-white: rgb(255 255 255 / 0.60);     /* White - Primary / default */
  --tile-sky: rgb(126 220 245 / 0.70);       /* Sky - Informational / analytics */
  --tile-gold: rgb(255 209 102 / 0.60);      /* Gold - Highlights / favorites */
  --tile-mint: rgb(6 214 160 / 0.60);        /* Mint - Success / completed */
  --tile-coral: rgb(255 107 107 / 0.60);     /* Coral - Errors / alerts */
  --tile-lavender: rgb(196 161 255 / 0.60);  /* Lavender - Settings / customization */
  --tile-amber: rgb(255 159 67 / 0.60);      /* Amber - Performance / energy */
  --tile-sage: rgb(168 230 207 / 0.60);      /* Sage - Layout / secondary success */
  --tile-rose: rgb(249 197 209 / 0.60);      /* Rose - Health / soft accent */

  /* UI Colors - Solid colors for buttons, charts, etc. */
  --tile-navy: #4A6F8C;                      /* Muted Blue - buttons, charts */


  /* Icon Color Palette - Warm tones for blue background contrast */
  --icon-white: #FFFFFF;         /* Pure White - Primary icons / General actions */
  --icon-gold: #FFC107;          /* Amber Gold - Warnings, highlights, Stars */
  --icon-red: #EF5350;           /* Bright Red - Errors or high-priority alerts */
  --icon-lime: #CDDC39;          /* Yellow-Lime - Success states, Go actions */
  --icon-rose: #F48FB1;          /* Soft Rose - Secondary features, settings */
  --icon-yellow: #FFEE58;        /* Bright Yellow - Info icons */
  --icon-peach: #FFCC80;         /* Warm Peach - User profiles, alt highlights */
  --icon-warm-gray: #BCAAA4;     /* Warm Gray - Disabled states, metadata */
  --icon-orange: #FF9800;        /* Bright Orange - Add buttons, primary CTAs */

  /* Status colors */
  --success-500: #4caf50;
  --success-700: #2e7d32;
  --success-600: #388e3c;
  --success-300: #a5d6a7;

  --error-500: #f44336;
  --error-700: #c62828;
  --error-600: #d32f2f;
  --error-300: #ff8e8e;

  --warning-500: #ffb800;
  --warning-600: #ff9800;
  --warning-orange: #ff6b35;
  --warning-amber: #ffc107;

  --info-500: #2196f3;

  /* Special colors */
  --purple-500: #9c27b0;         /* Leave closure */
  --purple-300: #ce93d8;         /* Light purple */
  --teal-500: #1abc9c;           /* Charts */
  --orange-600: #e67e22;         /* Charts */
  --slate-700: #34495e;          /* Charts */

  /* =========================================================================
     2. SEMANTIC TOKENS - Usage-based, derived from palette
     ========================================================================= */
  color-scheme: dark;

  /* Page backgrounds */
  --bg-page-start: var(--brand-500);
  --bg-page-end: var(--brand-600);
  --gradient-page: linear-gradient(180deg, var(--bg-page-start), var(--bg-page-end));

  /* Modal/overlay backgrounds */
  --bg-modal: var(--neutral-950);
  --bg-overlay: rgb(0 0 0 / 0.85);
  --bg-overlay-medium: rgb(0 0 0 / 0.6);

  /* Surfaces */
  --surface-glass: rgb(0 68 104 / 0.78);
  --surface-1: var(--neutral-900);
  --surface-2: var(--neutral-950);
  --surface-card: var(--neutral-800);

  /* Text hierarchy */
  --text-1: #fff;
  --text-2: rgb(255 255 255 / 0.90);
  --text-3: rgb(255 255 255 / 0.70);
  --text-placeholder: rgb(255 255 255 / 0.45);
  --text-disabled: rgb(255 255 255 / 0.40);
  --text-hint: rgb(255 255 255 / 0.50);
  --text-on-light: var(--neutral-700);
  --text-on-light-muted: var(--neutral-400);
  --text-footer: var(--neutral-300);

  /* Border hierarchy */
  --border-1: rgb(255 255 255 / 0.08);
  --border-2: rgb(255 255 255 / 0.14);
  --border-3: rgb(255 255 255 / 0.20);
  --border-medium: rgb(255 255 255 / 0.30);
  --border-strong: rgb(255 255 255 / 0.50);
  --border-focus: rgb(255 255 255 / 0.45);

  /* Input fields */
  --input-bg: rgb(255 255 255 / 0.08);
  --input-bg-hover: rgb(255 255 255 / 0.10);
  --input-bg-focus: rgb(255 255 255 / 0.12);
  --input-bg-solid: var(--surface-1);
  --input-bg-solid-hover: var(--surface-card);

  /* Dropdown/menu */
  --dropdown-bg: rgb(20 25 30 / 0.95);
  --dropdown-bg-solid: var(--surface-card);
  --dropdown-hover: rgb(255 255 255 / 0.10);
  --dropdown-selected: color-mix(in srgb, var(--accent-400) 20%, transparent);

  /* Tables */
  --table-bg: rgb(45 50 56 / 0.65);
  --table-header-bg: rgb(35 40 45 / 0.95);
  --table-row-hover: rgb(255 255 255 / 0.06);
  --table-row-selected: color-mix(in srgb, var(--accent-400) 8%, transparent);
  --table-badge-bg: rgb(65 70 75 / 0.6);

  /* Tiles */
  --tile-1: var(--tile-white);
  --tile-2: var(--tile-sky);
  --tile-3: var(--tile-gold);
  --tile-4: var(--tile-mint);
  --tile-5: var(--tile-coral);
  --tile-6: var(--tile-lavender);
  --tile-7: var(--tile-amber);
  --tile-8: var(--tile-sage);
  --tile-9: var(--tile-rose);

  /* Focus ring */
  --focus-ring-color: color-mix(in srgb, var(--accent-400) 22%, transparent);
  --focus-ring: 0 0 0 3px var(--focus-ring-color);

  /* =========================================================================
     3. STATUS DERIVED - Using color-mix() for variants
     ========================================================================= */

  /* Success */
  --success: var(--success-500);
  --success-bg: color-mix(in srgb, var(--success) 12%, transparent);
  --success-bg-strong: color-mix(in srgb, var(--success) 20%, transparent);
  --success-border: color-mix(in srgb, var(--success) 40%, transparent);
  --success-solid: color-mix(in srgb, var(--success) 95%, transparent);
  --success-dark: var(--success-700);
  --success-hover: var(--success-600);
  --success-light: var(--success-300);

  /* Error */
  --error: var(--error-500);
  --error-bg: color-mix(in srgb, var(--error) 12%, transparent);
  --error-border: color-mix(in srgb, var(--error) 40%, transparent);
  --error-solid: color-mix(in srgb, var(--error) 95%, transparent);
  --error-dark: var(--error-700);
  --error-hover: var(--error-600);
  --error-light: var(--error-300);

  /* Warning */
  --warning: var(--warning-500);
  --warning-bg: color-mix(in srgb, var(--warning) 10%, transparent);
  --warning-border: color-mix(in srgb, var(--warning) 40%, transparent);
  --warning-solid: color-mix(in srgb, var(--warning-600) 95%, transparent);
  --warning-secondary: var(--warning-600);

  /* Info */
  --info: var(--info-500);
  --info-bg: color-mix(in srgb, var(--info) 12%, transparent);
  --info-bg-strong: color-mix(in srgb, var(--info) 20%, transparent);
  --info-border: color-mix(in srgb, var(--info) 40%, transparent);
  --info-solid: color-mix(in srgb, var(--info) 95%, transparent);

  /* Accent-derived borders */
  --border-accent: color-mix(in srgb, var(--accent-500) 10%, transparent);
  --border-accent-medium: color-mix(in srgb, var(--accent-500) 20%, transparent);
  --border-accent-strong: color-mix(in srgb, var(--accent-500) 30%, transparent);

  /* Table column highlights */
  --table-column-shared: color-mix(in srgb, var(--accent-500) 3%, transparent);
  --table-column-default: color-mix(in srgb, var(--warning) 3%, transparent);

  /* =========================================================================
     4. LEAVE CALENDAR - Type and status colors
     ========================================================================= */
  /* Leave types */
  --leave-vacation: #2196F3;
  --leave-sick: #F44336;
  --leave-unpaid: #FF9800;
  --leave-other: #9E9E9E;
  --leave-office-closure: #9C27B0;
  --leave-closure: var(--purple-500);
  --leave-closure-light: var(--purple-300);

  /* Leave status colors (for status stripe rendering) */
  --leave-status-pending: #FFC107;
  --leave-status-approved: #4CAF50;
  --leave-status-denied: #F44336;

  /* =========================================================================
     5. CHART COLORS - Extended palette for data viz
     ========================================================================= */
  --chart-1: var(--accent-500);
  --chart-2: var(--tile-navy);
  --chart-3: var(--success);
  --chart-4: var(--purple-500);
  --chart-5: var(--error);
  --chart-6: var(--warning-secondary);
  --chart-7: var(--teal-500);
  --chart-8: var(--info);
  --chart-9: var(--orange-600);
  --chart-10: var(--slate-700);

  /* =========================================================================
     6. BUTTONS
     ========================================================================= */
  --btn-primary-bg: var(--tile-navy);
  --btn-primary-hover: var(--tile-teal);
  --btn-danger-bg: var(--error-dark);
  --btn-danger-hover: var(--error-hover);
  --btn-success-bg: var(--success-dark);
  --btn-success-hover: var(--success-hover);
  --btn-accent-bg: var(--accent-400);
  --btn-accent-hover: var(--accent-300);

  /* =========================================================================
     7. GRADIENTS
     ========================================================================= */
  --gradient-cta: linear-gradient(180deg, var(--accent-300), var(--accent-400));
  --gradient-header: linear-gradient(135deg, var(--tile-navy), var(--accent-500));

  /* =========================================================================
     8. SHADOWS
     ========================================================================= */
  --shadow-surface: 0 25px 80px rgb(0 0 0 / 0.35);
  --shadow-dropdown: 0 8px 24px rgb(0 0 0 / 0.4);
  --shadow-modal: 0 20px 60px rgb(0 0 0 / 0.8);
  --shadow-toast: 0 2px 10px rgb(0 0 0 / 0.2);
  --shadow-btn-hover: 0 10px 26px color-mix(in srgb, var(--accent-400) 32%, transparent);
  --shadow-btn-primary: 0 2px 8px color-mix(in srgb, var(--tile-navy) 30%, transparent);
  --shadow-btn-danger: 0 2px 8px color-mix(in srgb, var(--error-dark) 30%, transparent);
  --shadow-btn-success: 0 2px 8px color-mix(in srgb, var(--success-dark) 30%, transparent);
  --shadow-tile: 0 4px 12px rgb(0 0 0 / 0.3);
  --shadow-tile-drag: 0 8px 32px rgb(0 0 0 / 0.5);

  /* =========================================================================
     9. NOTIFICATIONS - Reference status solids
     ========================================================================= */
  --notification-info: var(--info-solid);
  --notification-success: var(--success-solid);
  --notification-error: var(--error-solid);
  --notification-warning: var(--warning-solid);

  /* =========================================================================
     10. INDICATORS
     ========================================================================= */
  --indicator-shared: var(--accent-500);
  --indicator-default: var(--warning);
  --indicator-pending: var(--warning-orange);
  --indicator-selected: var(--tile-navy);
  --indicator-personal: color-mix(in srgb, var(--warning) 20%, transparent);
  --indicator-personal-border: color-mix(in srgb, var(--warning) 30%, transparent);

  /* =========================================================================
     11. DECORATIVE
     ========================================================================= */
  --orb-accent: var(--accent-400);
  --orb-white: #fff;
  --orb-blur: 90px;
  --orb-opacity: 0.18;

  /* Scrollbar */
  --scrollbar-track: rgb(0 0 0 / 0.2);
  --scrollbar-thumb: var(--border-medium);

  /* Tooltip */
  --tooltip-bg: rgb(0 0 0 / 0.9);
  --tooltip-text: #fff;

  /* Sidebar */
  --sidebar-bg: linear-gradient(180deg, rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.05));
  --sidebar-border: var(--border-2);
  --sidebar-hover: rgb(255 255 255 / 0.1);
  --sidebar-icon-filter: brightness(0) invert(1);

  /* =========================================================================
     12. SIZING TOKENS
     ========================================================================= */
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-xs: 4px;
  --radius-alert: 10px;
  --field-height: 44px;
  --btn-height: 46px;
  --container-max: 460px;
  --tile-size: 160px;
  --gap: 10px;
  --sidebar-width: 50px;

  /* =========================================================================
     13. MOTION TOKENS
     ========================================================================= */
  --duration-fast: 0.08s;
  --duration-med: 0.2s;
  --duration-slow: 0.42s;
  --easing-pop: cubic-bezier(0.2, 0.9, 0.2, 1);

  /* =========================================================================
     14. OPACITY VALUES
     ========================================================================= */
  --opacity-icon: 0.8;
  --opacity-hover: 0.9;
  --opacity-label: 0.8;
  --opacity-disabled: 0.5;

  /* =========================================================================
     15. ICON SEMANTIC TOKENS
     ========================================================================= */
  /* Primary/default icon color */
  --icon-primary: var(--icon-white);
  --icon-default: var(--icon-white);

  /* Status icons */
  --icon-success: var(--icon-lime);
  --icon-error: var(--icon-red);
  --icon-warning: var(--icon-gold);
  --icon-info: var(--icon-yellow);

  /* Interactive icons */
  --icon-cta: var(--icon-orange);
  --icon-add: var(--icon-orange);
  --icon-action: var(--icon-orange);

  /* Secondary/muted icons */
  --icon-secondary: var(--icon-rose);
  --icon-settings: var(--icon-rose);
  --icon-muted: var(--icon-warm-gray);
  --icon-disabled: var(--icon-warm-gray);
  --icon-metadata: var(--icon-warm-gray);

  /* Accent icons */
  --icon-highlight: var(--icon-gold);
  --icon-star: var(--icon-gold);
  --icon-user: var(--icon-peach);
  --icon-profile: var(--icon-peach);
}

/* =============================================================================
   LEGACY ALIASES
   For backward compatibility only. NEVER redefine core token names here.
   ============================================================================= */
:root {
  /* Legacy brand */
  --bg1: var(--brand-500);
  --bg2: var(--brand-600);
  --search-title: var(--accent-400);
  --brand-accent: var(--accent-400);
  --brand-accent-light: var(--accent-300);
  --brand-fnous: var(--accent-500);
  --brand-primary: var(--brand-500);
  --brand-secondary: var(--brand-600);

  /* Legacy tiles */
  --tile-main: var(--tile-1);
  --tile-color-1: var(--tile-1);
  --tile-color-2: var(--tile-2);
  --tile-color-3: var(--tile-3);
  --tile-color-4: var(--tile-4);
  --tile-color-5: var(--tile-5);
  --tile-color-6: var(--tile-6);
  --tile-color-7: var(--tile-7);
  --tile-color-8: var(--tile-8);
  --tile-color-9: var(--tile-9);

  /* Legacy text */
  --text-white: var(--text-1);
  --text-strong: var(--text-1);
  --text-primary: var(--text-1);
  --text-secondary: var(--text-2);
  --text-muted: var(--text-3);
  --text-dark: var(--text-on-light);
  --text-dark-muted: var(--text-on-light-muted);

  /* Legacy borders */
  --border-default: var(--border-3);
  --border-light: var(--border-2);
  --border-lighter: var(--border-1);
  --border-lightest: var(--border-1);
  --border-hover: var(--border-medium);
  --line-light: var(--border-2);
  --surface-border: var(--border-2);
  --panel-border: var(--border-1);

  /* Legacy backgrounds */
  --bg-modal-primary: var(--bg-modal);
  --bg-modal-secondary: var(--surface-1);
  --bg-modal-tertiary: var(--bg-modal);
  --bg-modal-overlay: var(--bg-overlay);
  --bg-overlay-dark: rgb(0 0 0 / 0.7);
  --surface-dark: var(--surface-1);
  --surface-darker: var(--surface-2);

  /* Legacy modal text */
  --modal-bg-primary: var(--bg-modal);
  --modal-bg-secondary: var(--surface-1);
  --modal-bg-overlay: var(--bg-overlay);
  --modal-text-primary: var(--text-2);
  --modal-text-secondary: var(--text-3);
  --modal-text-muted: var(--text-disabled);

  /* Legacy leave colors */
  --color-vacation: var(--leave-vacation);
  --color-sick: var(--leave-sick);
  --color-unpaid: var(--leave-unpaid);
  --color-other: var(--leave-other);
  --color-closure: var(--leave-closure);

  /* Legacy status */
  --color-shared: var(--indicator-shared);
  --color-default: var(--indicator-default);
  --color-pending: var(--indicator-pending);
  --color-selected: var(--indicator-selected);

  /* Legacy success */
  --success-primary: var(--success);
  --success-secondary: var(--success);
  --success-border-medium: var(--success-border);
  --success-border-strong: color-mix(in srgb, var(--success) 50%, transparent);

  /* Legacy error */
  --error-primary: var(--error);
  --error-secondary: var(--error-light);
  --error-bg-medium: var(--error-bg);
  --error-border-light: var(--error-border);
  --error-text: var(--error-light);
  --error-lighter: var(--error-light);

  /* Legacy warning */
  --warning-primary: var(--warning);
  --warning-border-medium: var(--warning-border);

  /* Legacy info */
  --info-primary: var(--info);

  /* Legacy gradients */
  --cta-gradient: var(--gradient-cta);
  --cta-gradient-aa: var(--gradient-cta);
  --cta-gradient-legacy: var(--gradient-cta);
  --gradient-cta-legacy: var(--gradient-cta);
  --page-gradient: var(--gradient-page);

  /* Legacy focus */
  --focus-accent: var(--border-accent);

  /* Legacy icon colors */
  --color-icon-primary: var(--icon-primary);
  --color-icon-success: var(--icon-success);
  --color-icon-error: var(--icon-error);
  --color-icon-warning: var(--icon-warning);
  --color-icon-info: var(--icon-info);
  --color-icon-muted: var(--icon-muted);
  --color-icon-disabled: var(--icon-disabled);
}