/**
 * Design System CSS Variables
 * These variables can be used in any CSS file or inline styles
 * Import this file in your main CSS or reference it in Dash
 */

:root {
  /* Base color system - update --base-hue and --base-saturation to change all dependent colors */
  --base-hue: 0;
  --base-saturation: 0%;
  --base-lightness: 0%;
  --base: var(--base-hue) var(--base-saturation) var(--base-lightness);

  /* Klabs brand accent color */
  --accent-brand-h: 23;
  --accent-brand-s: 90%;
  --accent-brand-l: 54%;
  --accent-brand: var(--accent-brand-h) var(--accent-brand-s) var(--accent-brand-l);
  --call-action: var(--accent-brand); /* Legacy alias */

  --amex-brand-h: 208.12;
  --amex-brand-s: 99%;
  --amex-brand-l: 40.98%;
  --amex-brand: var(--amex-brand-h) var(--amex-brand-s) var(--amex-brand-l);

  /* Core colors */
  --background: 0 0% 100%;
  --foreground: var(--base);
  --surface: var(--background);
  --primary-foreground: 0 0% 98%;
  --secondary: var(--base-hue) var(--base-saturation) 96%;
  --muted: var(--base-hue) var(--base-saturation) 45%;
  --accent: var(--base-hue) var(--base-saturation) 92%;
  --border: var(--base-hue) var(--base-saturation) 90%;
  --ring: var(--foreground);
  --sidebar-bg: var(--base-hue) var(--base-saturation) 98%;
  --sidebar-accent: var(--base-hue) var(--base-saturation) 94%;
  
  /* Card colors */
  --card: var(--surface);
  --card-foreground: var(--foreground);

  /* Status colors */
  --status-text: 0 0% 98%;
  --destructive: 0 84.2% 60.2%;
  --success: 141.1 71.4% 42%;
  --warning: var(--accent-brand);

  /* Legacy RGB colors (kept for backward compatibility) */
  --color-primary: rgb(9, 31, 52);
  --color-primary-dark: rgb(5, 20, 35);
  --color-primary-light: rgb(15, 45, 70);
  --color-secondary: rgb(38, 97, 52);
  --color-secondary-dark: rgb(30, 75, 40);
  --color-secondary-light: rgb(50, 120, 65);
  --color-text-primary: #0c1e35;
  --color-text-secondary: #666666;
  --color-text-light: #999999;
  --color-text-white: #ffffff;
  --color-bg-white: #ffffff;
  --color-bg-light: #f5f5f5;
  --color-bg-dark: rgb(9, 31, 52);
  --color-success: #28a745;
  --color-error: #dc3545;
  --color-warning: #ffc107;
  --color-info: #17a2b8;
  --color-logout: red;
  
  /* Typography: set only in theme-loader.css per data-theme (KLab=Sora, KEO=Poppins) */
  --font-family: inherit;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  
  /* Layout */
  --navbar-height: 70px;
  --sidebar-width: 200px;
  --content-padding: 2rem 1rem;
  
  /* Border Radius */
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 20px;
  --radius-full: 50%;
  --app-radius: 6px;
  
  /* Shadows */
  --shadow-sm: 0px 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0px 4px 10px rgba(21, 50, 101, 0.11);
  --shadow-lg: 0px 8px 16px rgba(0, 0, 0, 0.15);
  
  /* Z-index */
  --z-base: 1000;
  --z-sidebar: 1500;
  --z-navbar: 2000;
  --z-modal: 3000;
  
  /* Glass Morphism Variables */
  --glass-blur: 16px;
  --glass-saturation: 180%;
  --glass-background-opacity: 0.8;
  --glass-background-opacity-overlay: 0.6;
  --glass-border-opacity: 0.2;
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
  --glass-inner-highlight-opacity: 0.1;
}

/* Glass Morphism Base */
.glass-morphism {
  /* Performance optimizations */
  will-change: backdrop-filter;
  transform: translateZ(0);

  /* Enhanced backdrop filter with saturation for richer colors */
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));

  /* Background with opacity */
  background-color: hsl(var(--background) / var(--glass-background-opacity)) !important;

  /* Asymmetric border for depth - top/left lighter, bottom/right darker */
  border-top: 1px solid hsl(var(--foreground) / calc(var(--glass-border-opacity) * 1.5));
  border-right: 1px solid hsl(var(--foreground) / var(--glass-border-opacity));
  border-bottom: 1px solid hsl(var(--foreground) / calc(var(--glass-border-opacity) * 0.5));
  border-left: 1px solid hsl(var(--foreground) / var(--glass-border-opacity));

  /* Multi-layer shadow system with outer shadow and inner highlight */
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 1px 0 rgba(255, 255, 255, var(--glass-inner-highlight-opacity));
}

/* Glass morphism for overlay components (lower opacity for subtle backdrop) */
.glass-morphism-overlay {
  /* Performance optimizations */
  will-change: backdrop-filter, transform;

  /* Enhanced backdrop filter with saturation */
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));

  /* Background with lower opacity for overlays */
  background-color: hsl(var(--background) / var(--glass-background-opacity-overlay)) !important;

  /* Asymmetric border for depth */
  border-top: 1px solid hsl(var(--foreground) / calc(var(--glass-border-opacity) * 1.5));
  border-right: 1px solid hsl(var(--foreground) / var(--glass-border-opacity));
  border-bottom: 1px solid hsl(var(--foreground) / calc(var(--glass-border-opacity) * 0.5));
  border-left: 1px solid hsl(var(--foreground) / var(--glass-border-opacity));

  /* Multi-layer shadow system */
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 1px 0 rgba(255, 255, 255, var(--glass-inner-highlight-opacity));
}

/* Navbar glass effect - uses glass morphism tokens without shadow */
/* Includes fallback background for browsers without backdrop-filter support */
.glass-navbar {
  /* Performance optimizations */
  will-change: backdrop-filter !important;
  transform: translateZ(0) !important;

  /* Fallback background - solid white with high opacity for visibility */
  background: rgba(255, 255, 255, 0.95) !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  
  /* Enhanced backdrop filter with saturation */
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  
  /* When backdrop-filter is supported, use semi-transparent */
  background: rgba(255, 255, 255, 0.85) !important;
  background-color: rgba(255, 255, 255, 0.85) !important;

  /* Asymmetric border - subtle borders for depth */
  border-top: 1px solid rgba(0, 0, 0, 0.3) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.2) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-left: 1px solid rgba(0, 0, 0, 0.2) !important;
  border-style: solid !important;
}

/* Sidebar glass effect */
.glass-sidebar {
  /* Performance optimizations */
  will-change: backdrop-filter !important;
  transform: translateZ(0) !important;

  /* Fallback background - solid white with high opacity for visibility */
  background: rgba(255, 255, 255, 0.90) !important;
  background-color: rgba(255, 255, 255, 0.90) !important;
  
  /* Enhanced backdrop filter with saturation */
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  
  /* When backdrop-filter is supported, use semi-transparent */
  background: rgba(255, 255, 255, 0.80) !important;
  background-color: rgba(255, 255, 255, 0.80) !important;

  /* Asymmetric border for depth */
  border-top: 1px solid rgba(0, 0, 0, 0.3) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.2) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-left: 1px solid rgba(0, 0, 0, 0.2) !important;
  border-style: solid !important;

  /* Multi-layer shadow system */
  box-shadow:
    0 8px 32px 0 rgba(0, 0, 0, 0.1),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.1) !important;
}