/* ============================================================
   HORIZON STAR TMS - CSS Variables & Theming
   ============================================================ */

:root {
  /* Primary Colors - Horizon Star Green */
  --primary: #22c55e;
  --primary-hover: #16a34a;
  --primary-light: rgba(34, 197, 94, 0.12);
  --primary-dark: #15803d;
  --secondary: #64748b;

  /* Status Colors */
  --success: #22c55e;
  --success-light: rgba(34, 197, 94, 0.12);
  --warning: #f59e0b;
  --warning-light: rgba(245, 158, 11, 0.12);
  --danger: #ef4444;
  --danger-light: rgba(239, 68, 68, 0.12);
  --info: #3b82f6;
  --info-light: rgba(59, 130, 246, 0.12);

  /* Light Theme Backgrounds (Default) */
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f1f5f9;
  --bg-card: #ffffff;
  --bg-hover: #f1f5f9;
  --bg-darker: #e2e8f0;

  /* Text Colors */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;

  /* Borders */
  --border: #e2e8f0;
  --border-light: #f1f5f9;

  /* Shadows - 3 depth levels */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 2px 4px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 8px rgba(0,0,0,0.10);

  /* Backward-compatible shadow mappings */
  --shadow-xs: var(--shadow-sm);
  --shadow: var(--shadow-sm);
  --shadow-xl: var(--shadow-lg);
  --shadow-card: var(--shadow-sm);
  --shadow-card-hover: var(--shadow-md);
  --shadow-float: var(--shadow-lg);
  --shadow-inset: none;
  --shadow-glow-green: none;
  --shadow-glow-blue: none;
  --shadow-inner-glow: none;

  /* Gradients */
  --accent-gradient: #22c55e;
  --gradient-primary: #22c55e;
  --gradient-primary-hover: #16a34a;
  --gradient-secondary: #3b82f6;
  --gradient-warning: #f59e0b;
  --gradient-danger: #ef4444;
  --gradient-purple: #8b5cf6;
  --gradient-sidebar: #1a2f2a;
  --gradient-card: var(--bg-card);

  /* Glass Effect - neutralized to solid values */
  --glass-bg: var(--bg-card);
  --glass-border: var(--border);
  --glass-blur: none;

  /* Border Radius */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* Layout */
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 72px;
  --header-height: 64px;

  /* Animation */
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
}

/* ============================================================
   DARK THEME
   ============================================================ */

body.dark-theme {
  --bg-primary: #0c1520;
  --bg-secondary: #111c2a;
  --bg-tertiary: #1a2735;
  --bg-card: #151f2c;
  --bg-hover: #1e2d3d;
  --bg-darker: #0a1018;
  --text-primary: #f1f5f9;
  --text-secondary: #e2e8f0;
  --text-muted: #cbd5e1;
  --border: #1e3a4a;
  --border-light: #1a2f3d;
  --primary-light: rgba(16, 185, 129, 0.15);
  --success-light: rgba(16, 185, 129, 0.15);
  --warning-light: rgba(245, 158, 11, 0.15);
  --danger-light: rgba(239, 68, 68, 0.15);
  --info-light: rgba(59, 130, 246, 0.15);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 2px 4px rgba(0,0,0,0.4);
  --shadow-lg: 0 4px 8px rgba(0,0,0,0.5);
  --shadow-card: var(--shadow-sm);
  --shadow-card-hover: var(--shadow-md);
  --glass-bg: var(--bg-card);
  --glass-border: var(--border);
  --gradient-card: var(--bg-card);
}