/* ========================================
   SWIFTDRONE CSS VARIABLES
   Style: Navy Theme with Emerald & Orange Accents
   ======================================== */

:root {
  /* === BRAND COLORS === */

  /* Primary: Electric Indigo (Light mode) */
  --brand-primary: #6366f1;
  --brand-primary-rgb: 99, 102, 241;

  /* Secondary: Emerald Green (Sustainability, future-oriented) */
  --brand-secondary: #10B981;
  --brand-secondary-rgb: 16, 185, 129;

  /* Tertiary: Bright Orange (Energy, innovation, CTA) */
  --brand-tertiary: #FB923C;
  --brand-tertiary-rgb: 251, 146, 60;
  --brand-tertiary-dark: #EA580C; /* For gradients */ 

  /* === BRAND GRADIENTS === */
  /* Light mode: Indigo to Emerald */
  --brand-gradient: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
  
  /* Reverse flow for hover states */
  --brand-gradient-reverse: linear-gradient(135deg, var(--brand-secondary) 0%, var(--brand-primary) 100%);
  
  /* Subtle background glow for cards */
  --brand-gradient-subtle: linear-gradient(180deg, rgba(var(--brand-primary-rgb), 0.05) 0%, rgba(var(--brand-secondary-rgb), 0.05) 100%);

  /* === BOOTSTRAP COLORS (Harmonized with Indigo) === */
  /* Tuned to be slightly more vibrant than default Bootstrap */
  --bs-primary: #6366f1; /* Synced with Brand Primary */
  --bs-primary-rgb: 99, 102, 241;
  
  --bs-success: #10b981; /* Emerald */
  --bs-success-rgb: 16, 185, 129;
  --bs-success-text: #064e3b;
  
  --bs-danger: #f43f5e; /* Rose (Modern Red) */
  --bs-danger-rgb: 244, 63, 94;
  --bs-danger-text: #881337;
  
  --bs-warning: #FB923C; /* Bright Orange */
  --bs-warning-rgb: 251, 146, 60;
  --bs-warning-text: #7c2d12;
  
  --bs-info: #3b82f6; /* Sky Blue */
  --bs-info-rgb: 59, 130, 246;
  --bs-info-text: #1e3a8a;

  /* === OVERLAYS (Black for light mode) === */
  --black-overlay-5: rgba(15, 23, 42, 0.05); /* Uses Navy ink, not pure black */
  --black-overlay-8: rgba(15, 23, 42, 0.08);
  --black-overlay-10: rgba(15, 23, 42, 0.1);
  --black-overlay-15: rgba(15, 23, 42, 0.15);
  --black-overlay-20: rgba(15, 23, 42, 0.2);
  --black-overlay-25: rgba(15, 23, 42, 0.25);
  --black-overlay-30: rgba(15, 23, 42, 0.3);
  --black-overlay-40: rgba(15, 23, 42, 0.4);

  /* === UTILITY COLORS === */
  --btn-clear-bg: rgba(108, 117, 125, 0.1);
  --btn-clear-bg-hover: rgba(108, 117, 125, 0.2);
  --btn-clear-border: #dee2e6;

  /* === LAYOUT === */
  --navbar-height: 60px; /* Slightly taller for modern feel */
  --sidebar-width-lg: 280px;
  --sidebar-width-md: 250px;
  --sidebar-border: #e2e8f0;
  --border-medium: #e2e8f0;
  --border-subtle: #f1f5f9;

  /* === NAVBAR (Consistent across light/dark modes) === */
  --navbar-bg-start: #18181b;
  --navbar-bg-end: #27272a;
  --navbar-border: #3f3f46;
  --navbar-text: #fafafa;

  /* === FEEDBACK COLORS (For form validation, badges in dark mode) === */
  --feedback-success: #38ef7d;
  --feedback-error: #ff6b6b;
  --text-on-warning: #000;

  /* === TRANSITIONS === */
  --transition-duration: 0.3s;
  --transition-fast: 0.15s; /* Snappier */
  --transition-slow: 0.5s;
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy feel */

  /* === BORDER RADIUS (Slightly rounder for friendly SaaS feel) === */
  --border-radius-sm: 0.375rem;  /* 6px */
  --border-radius-md: 0.75rem;   /* 12px */
  --border-radius-lg: 1rem;      /* 16px */
  --border-radius-xl: 1.5rem;    /* 24px */

  /* === SHADOWS (Soft & Diffused) === */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.1), 0 2px 4px -1px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -2px rgba(15, 23, 42, 0.05);
  --shadow-right: 4px 0 24px rgba(15, 23, 42, 0.02);
  --shadow-top: 0 -4px 24px rgba(15, 23, 42, 0.02);
  
  /* Colored glow shadow (Use for primary buttons/cards) */
  --shadow-glow: 0 0 20px rgba(var(--brand-primary-rgb), 0.35);

  /* === TRANSFORMS === */
  --lift-sm: translateY(-2px);
  --lift-md: translateY(-4px);
  --slide-right-sm: translateX(4px);
  --slide-right-md: translateX(6px);

  /* === TYPOGRAPHY === */
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */

  /* === HOME PAGE CARDS (home.html only) === */
  --card-problem-bg: #f1f5f9; /* Slate 100 - subtle contrast */
  --card-solution-bg: #f8fafc; /* Slate 50 - clean white */

  /* === THEMING (Light Mode Defaults) === */
  /* Clean, minimal light theme - professional SaaS aesthetic */
  --bg-body: #f8fafc;    /* Slate 50 - crisp off-white */
  --bg-surface: #ffffff; /* Pure white for surfaces */
  --text-primary: #0f172a;   /* Slate 900 - sharp, readable */
  --text-secondary: #475569; /* Slate 600 - good contrast */
  --text-muted: #94a3b8;     /* Slate 400 - subtle but visible */

  --accent-primary: var(--brand-primary);
  --info-toolbar-bg: rgba(255, 255, 255, 0.9); /* Glass effect */
  --glass-border: 1px solid rgba(226, 232, 240, 0.8);

  --hover-bg: rgba(var(--brand-primary-rgb), 0.06);
}

/* === DARK MODE OVERRIDES (Drone Industry - Navy Theme) === */
html.dark-mode {
  /* === DARK MODE BUTTON GRADIENTS === */
  --btn-primary-dark: linear-gradient(135deg, #047857 0%, #10B981 100%);
  --btn-primary-dark-hover: linear-gradient(135deg, #065f46 0%, #0d9668 100%);
  --btn-cta-hover: linear-gradient(135deg, #C2410C 0%, var(--brand-tertiary-dark) 100%);

  /* Background colors - Navy palette */
  --bg-body: #1A2440;      /* Navy - Trust, stability, depth of the sky */
  --bg-primary: #1A2440;
  --bg-secondary: #243352; /* Lighter Navy - elevated surfaces */
  --bg-tertiary: #2D3D5C;  /* Even lighter - cards, modals */
  --bg-surface: #243352;

  /* Text colors - Light Gray palette */
  --text-primary: #E5E7EB;   /* Light Gray - cleanliness, readability */
  --text-secondary: #9CA3AF; /* Silver Gray - technology, metallic feel */
  --text-muted: #9CA3AF;     /* Silver Gray - icons, borders */

  /* Accent colors - Emerald Green */
  --accent-primary: #10B981; /* Emerald - Sustainability, future-oriented */

  /* Borders - Navy-tinted Silver */
  --border-color: #3D4F6F;
  --border-medium: #3D4F6F;
  --border-subtle: #4A5F80;
  --sidebar-border: #3D4F6F;

  /* Cards and surfaces */
  --card-bg: #243352;

  /* Form inputs */
  --input-bg: #1A2440;
  --input-border: #3D4F6F;

  /* Overlays (White for dark mode) */
  --white-overlay-5: rgba(255, 255, 255, 0.05);
  --white-overlay-10: rgba(255, 255, 255, 0.08);
  --white-overlay-15: rgba(255, 255, 255, 0.12);

  /* Home page cards - dark mode */
  --card-problem-bg: #243352;
  --card-solution-bg: #243352;

  /* Shadows - Navy-tinted */
  --shadow-sm: 0 1px 2px 0 rgba(10, 15, 30, 0.4);
  --shadow: 0 4px 6px -1px rgba(10, 15, 30, 0.5), 0 2px 4px -1px rgba(10, 15, 30, 0.3);
  --shadow-lg: 0 20px 25px -5px rgba(10, 15, 30, 0.6), 0 10px 10px -5px rgba(10, 15, 30, 0.4);

  /* Glass effect */
  --info-toolbar-bg: rgba(36, 51, 82, 0.85);
  --glass-border: 1px solid rgba(255, 255, 255, 0.06);
  --hover-bg: rgba(16, 185, 129, 0.12); /* Emerald hover */
}

/* Optional: Add a backdrop blur utility if your app supports it */
.glass-effect {
  background: var(--info-toolbar-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--glass-border);
}