/**
 * 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 {
  /* Official KEO brandbook palette */
  --keo-green: #3DD88A;
  --keo-blue: #284D64;
  --keo-support-light: #EBF2EA;
  --keo-support-orange: #E68F17;
  --keo-support-red: #E62E17;
  --keo-gradient: linear-gradient(135deg, #284D64 0%, #3DD88A 100%);

  /* 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;

  /* Shared semantic tokens */
  --surface-soft: #f8f9fa;
  --surface-elevated: #ffffff;
  --panel-border: #e5e7eb;
  --panel-border-strong: #d7dee7;
  --text-strong: #1f2937;
  --text-soft: #64748b;
  --focus-ring-brand: hsl(var(--accent-brand) / 0.22);
  --focus-ring-strong: hsl(var(--foreground) / 0.22);

  /* Button semantics */
  --button-primary-bg: hsl(var(--foreground));
  --button-primary-hover: hsl(var(--foreground) / 0.86);
  --button-primary-text: hsl(var(--background));
  --button-primary-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  --button-secondary-bg: hsl(var(--secondary));
  --button-secondary-hover: hsl(var(--accent));
  --button-secondary-text: hsl(var(--foreground));
  --button-outline-border: hsl(var(--border));
  --button-outline-hover: hsl(var(--accent));
  --button-ghost-hover: hsl(var(--accent));
  --button-danger-bg: hsl(var(--destructive));
  --button-danger-hover: hsl(var(--destructive) / 0.88);
  --button-danger-text: hsl(var(--status-text));
  --button-brand-bg: hsl(var(--accent-brand));
  --button-brand-hover: hsl(var(--accent-brand) / 0.9);
  --button-brand-text: #092533;
  --button-brand-outline-bg: hsl(var(--accent-brand) / 0.08);
  --button-brand-outline-border: hsl(var(--accent-brand) / 0.26);
  --button-brand-outline-text: hsl(var(--accent-brand));

  /* Card and header semantics */
  --card-bg: #ffffff;
  --card-border: #e5e7eb;
  --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --page-header-border: #e5e7eb;
  --page-header-icon: hsl(var(--foreground));
  --data-card-bg: #ffffff;
  --data-card-border: hsl(var(--border));
  --data-card-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --data-card-label: #64748b;
  --data-card-value: #1f2937;

  /* Calculator defaults: safe baseline for non-KEO themes */
  --calculator-brand: hsl(var(--accent-brand));
  --calculator-brand-strong: hsl(var(--foreground));
  --calculator-brand-hover: hsl(var(--accent-brand) / 0.9);
  --calculator-brand-contrast: #ffffff;
  --calculator-surface: #ffffff;
  --calculator-surface-soft: #f8f9fa;
  --calculator-surface-muted: #f1f5f9;
  --calculator-panel: #ffffff;
  --calculator-panel-soft: #f8fafc;
  --calculator-panel-elevated: #ffffff;
  --calculator-panel-border: #e5e7eb;
  --calculator-panel-border-strong: #d7dee7;
  --calculator-text: #334155;
  --calculator-text-strong: #0f172a;
  --calculator-text-muted: #64748b;
  --calculator-shadow: 0 18px 34px rgba(15, 23, 42, 0.08);
  --calculator-soft-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  --calculator-table-shell-bg: #ffffff;
  --calculator-table-header-bg: #f8fafc;
  --calculator-table-header-text: #0f172a;
  --calculator-table-cell-bg: #ffffff;
  --calculator-table-cell-bg-alt: #f8fafc;
  --calculator-table-border: #e2e8f0;
  --calculator-table-hover: #eef2ff;
  --calculator-table-text: #1f2937;
  --calculator-table-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
  --calculator-input-bg: #ffffff;
  --calculator-input-border: #cbd5e1;
  --calculator-input-border-hover: #94a3b8;
  --calculator-input-focus: #c7d2fe;
  --calculator-input-text: #0f172a;
  --calculator-input-placeholder: #94a3b8;
  --calculator-danger: #dc3545;
  --calculator-danger-soft: #fff1f2;
  --calculator-success: #198754;
  --calculator-success-soft: #e8fff2;
  --calculator-warning: #ffc107;
  --calculator-warning-soft: #fff8db;
  --calculator-risk-bg: linear-gradient(135deg, #fff1f2 0%, #ffffff 100%);
  --calculator-risk-border: #fecdd3;
  --calculator-risk-text: #9f1239;
  --calculator-safe-bg: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  --calculator-safe-border: #dbe4ee;
  --calculator-safe-text: #334155;
  --calculator-highlight-bg: #fef2f2;
  --calculator-highlight-border: #fda4af;
  --calculator-loader: hsl(var(--accent-brand));
  --calculator-status-info-gradient: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
  --calculator-status-info-border: #60a5fa;
  --calculator-status-success-gradient: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
  --calculator-status-success-border: #34d399;
  --calculator-status-warning-gradient: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);
  --calculator-status-warning-border: #f59e0b;
  --calculator-radius-md: 12px;
  --calculator-radius-lg: 18px;
  --calculator-radius-pill: 20px;
}

/* 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;
}