/**
 * ═══════════════════════════════════════════════════════════════════════════
 * BALAM AI - CSS Variables (Design Tokens)
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * This file contains all global CSS variables (design tokens) for the Balam AI
 * frontend. All colors, spacing, typography, and other design values should be
 * defined here for consistency across the application.
 *
 * Usage:
 *   color: var(--balam-primary);
 *   padding: var(--balam-spacing-md);
 *
 * @author Balam AI Team
 * @version 1.0.0
 * ═══════════════════════════════════════════════════════════════════════════
 */

:root {
   /* ─────────────────────────────────────────────────────────────────────────
       Color Palette (from ibalam.ai)
    ───────────────────────────────────────────────────────────────────────── */

   /* Primary Colors */
   --balam-primary: #4361ee;
   --balam-primary-rgb: 67, 97, 238;
   --balam-primary-hover: #3651d4;
   --balam-primary-light: #6b83f2;

   /* Secondary Colors */
   --balam-secondary: #7209b7;
   --balam-secondary-rgb: 114, 9, 183;
   --balam-secondary-hover: #5c0792;
   --balam-secondary-light: #9b3dd1;

   /* Accent Colors */
   --balam-accent: #f72585;
   --balam-accent-rgb: 247, 37, 133;
   --balam-accent-hover: #d91a6f;
   --balam-accent-light: #f9519f;

   /* Semantic Colors */
   --balam-success: #10b981;
   --balam-success-rgb: 16, 185, 129;
   --balam-success-light: #d1fae5;

   --balam-warning: #f59e0b;
   --balam-warning-rgb: 245, 158, 11;
   --balam-warning-light: #fef3c7;

   --balam-danger: #ef4444;
   --balam-danger-rgb: 239, 68, 68;
   --balam-danger-light: #fee2e2;

   --balam-info: #4cc9f0;
   --balam-info-rgb: 76, 201, 240;
   --balam-info-light: #e0f7fe;

   /* Neutral Colors */
   --balam-white: #ffffff;
   --balam-black: #000000;

   --balam-gray-50: #f8fafc;
   --balam-gray-100: #f1f5f9;
   --balam-gray-200: #e2e8f0;
   --balam-gray-300: #cbd5e1;
   --balam-gray-400: #94a3b8;
   --balam-gray-500: #64748b;
   --balam-gray-600: #475569;
   --balam-gray-700: #334155;
   --balam-gray-800: #1e293b;
   --balam-gray-900: #0f172a;

   /* Text Colors */
   --balam-text-primary: #2b2d42;
   --balam-text-secondary: #475569;
   --balam-text-muted: #6c757d;
   --balam-text-light: #94a3b8;
   --balam-text-inverse: #ffffff;

   /* Background Colors */
   --balam-bg-primary: #f8faff;
   --balam-bg-secondary: #f0f5ff;
   --balam-bg-tertiary: #e8f0ff;
   --balam-bg-surface: #ffffff;
   --balam-bg-dark: #1e293b;

   /* Border Colors */
   --balam-border-light: #e8f0ff;
   --balam-border-default: #e2e8f0;
   --balam-border-dark: #cbd5e1;

   /* ─────────────────────────────────────────────────────────────────────────
       Gradients
    ───────────────────────────────────────────────────────────────────────── */

   --balam-gradient-primary: linear-gradient(135deg, var(--balam-primary) 0%, var(--balam-secondary) 100%);
   --balam-gradient-full: linear-gradient(135deg, var(--balam-primary) 0%, var(--balam-secondary) 50%, var(--balam-accent) 100%);
   --balam-gradient-accent: linear-gradient(135deg, var(--balam-secondary) 0%, var(--balam-accent) 100%);
   --balam-gradient-dark: linear-gradient(135deg, var(--balam-dark-bg-gradient-start) 0%, var(--balam-dark-bg-gradient-mid) 100%);

   /* ─────────────────────────────────────────────────────────────────────────
       Typography
    ───────────────────────────────────────────────────────────────────────── */

   /* Font Families */
   --balam-font-primary: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
   --balam-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

   /* Font Sizes */
   --balam-text-xs: 0.75rem;
   /* 12px */
   --balam-text-sm: 0.875rem;
   /* 14px */
   --balam-text-base: 1rem;
   /* 16px */
   --balam-text-lg: 1.125rem;
   /* 18px */
   --balam-text-xl: 1.25rem;
   /* 20px */
   --balam-text-2xl: 1.5rem;
   /* 24px */
   --balam-text-3xl: 1.875rem;
   /* 30px */
   --balam-text-4xl: 2.25rem;
   /* 36px */
   --balam-text-5xl: 3rem;
   /* 48px */

   /* Font Weights */
   --balam-font-light: 300;
   --balam-font-normal: 400;
   --balam-font-medium: 500;
   --balam-font-semibold: 600;
   --balam-font-bold: 700;
   --balam-font-extrabold: 800;

   /* Line Heights */
   --balam-leading-none: 1;
   --balam-leading-tight: 1.25;
   --balam-leading-snug: 1.375;
   --balam-leading-normal: 1.5;
   --balam-leading-relaxed: 1.625;
   --balam-leading-loose: 2;

   /* ─────────────────────────────────────────────────────────────────────────
       Spacing
    ───────────────────────────────────────────────────────────────────────── */

   --balam-spacing-0: 0;
   --balam-spacing-1: 0.25rem;
   /* 4px */
   --balam-spacing-2: 0.5rem;
   /* 8px */
   --balam-spacing-3: 0.75rem;
   /* 12px */
   --balam-spacing-4: 1rem;
   /* 16px */
   --balam-spacing-5: 1.25rem;
   /* 20px */
   --balam-spacing-6: 1.5rem;
   /* 24px */
   --balam-spacing-8: 2rem;
   /* 32px */
   --balam-spacing-10: 2.5rem;
   /* 40px */
   --balam-spacing-12: 3rem;
   /* 48px */
   --balam-spacing-16: 4rem;
   /* 64px */
   --balam-spacing-20: 5rem;
   /* 80px */
   --balam-spacing-24: 6rem;
   /* 96px */

   /* ─────────────────────────────────────────────────────────────────────────
       Border Radius
    ───────────────────────────────────────────────────────────────────────── */

   --balam-radius-none: 0;
   --balam-radius-sm: 0.25rem;
   /* 4px */
   --balam-radius-md: 0.5rem;
   /* 8px */
   --balam-radius-lg: 0.75rem;
   /* 12px */
   --balam-radius-xl: 1rem;
   /* 16px */
   --balam-radius-2xl: 1.5rem;
   /* 24px */
   --balam-radius-full: 9999px;

   /* ─────────────────────────────────────────────────────────────────────────
       Shadows
    ───────────────────────────────────────────────────────────────────────── */

   --balam-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
   --balam-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
   --balam-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
   --balam-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
   --balam-shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.12);
   --balam-shadow-2xl: 0 20px 40px rgba(0, 0, 0, 0.15);

   /* Colored Shadows */
   --balam-shadow-primary: 0 8px 24px rgba(67, 97, 238, 0.35);
   --balam-shadow-secondary: 0 8px 24px rgba(114, 9, 183, 0.35);
   --balam-shadow-accent: 0 8px 24px rgba(247, 37, 133, 0.35);

   /* ─────────────────────────────────────────────────────────────────────────
       Transitions
    ───────────────────────────────────────────────────────────────────────── */

   --balam-transition-fast: 150ms ease;
   --balam-transition-normal: 250ms ease;
   --balam-transition-slow: 350ms ease;
   --balam-transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

   /* ─────────────────────────────────────────────────────────────────────────
       Z-Index Scale
    ───────────────────────────────────────────────────────────────────────── */

   --balam-z-dropdown: 1000;
   --balam-z-sticky: 1020;
   --balam-z-fixed: 1030;
   --balam-z-modal-backdrop: 1040;
   --balam-z-modal: 1050;
   --balam-z-popover: 1060;
   --balam-z-tooltip: 1070;
   --balam-z-toast: 1080;

   /* ─────────────────────────────────────────────────────────────────────────
       Breakpoints (for reference, use Bootstrap's breakpoints in practice)
    ───────────────────────────────────────────────────────────────────────── */

   --balam-breakpoint-sm: 576px;
   --balam-breakpoint-md: 768px;
   --balam-breakpoint-lg: 992px;
   --balam-breakpoint-xl: 1200px;
   --balam-breakpoint-xxl: 1400px;

   /* ─────────────────────────────────────────────────────────────────────────
       Component-Specific Variables
    ───────────────────────────────────────────────────────────────────────── */

   /* Sidebar */
   --balam-sidebar-width: 260px;
   --balam-sidebar-collapsed-width: 70px;

   /* Navbar */
   --balam-navbar-height: 64px;

   /* Cards */
   --balam-card-padding: var(--balam-spacing-6);
   --balam-card-radius: var(--balam-radius-xl);

   /* Inputs */
   --balam-input-height: 48px;
   --balam-input-padding-x: var(--balam-spacing-4);
   --balam-input-radius: var(--balam-radius-lg);
   --balam-input-border: var(--balam-border-light);
   --balam-input-focus-border: var(--balam-primary);

   /* Buttons */
   --balam-btn-padding-x: var(--balam-spacing-6);
   --balam-btn-padding-y: var(--balam-spacing-3);
   --balam-btn-radius: var(--balam-radius-lg);

   /* ─────────────────────────────────────────────────────────────────────────
       Dark Theme Colors (for auth pages, sidebar, dark sections)
    ───────────────────────────────────────────────────────────────────────── */

   /* Dark Backgrounds */
   --balam-dark-bg-primary: #0f0f14;
   --balam-dark-bg-secondary: #1a1a24;
   --balam-dark-bg-tertiary: #252530;
   --balam-dark-bg-gradient-start: #1a1a2e;
   --balam-dark-bg-gradient-mid: #16213e;

   /* Dark Borders */
   --balam-dark-border: #1e1e2e;
   --balam-dark-border-light: #2d2d3a;
   --balam-dark-border-hover: #3d3d4a;

   /* Dark Text Colors */
   --balam-dark-text-primary: #ffffff;
   --balam-dark-text-secondary: #e5e7eb;
   --balam-dark-text-muted: #6b7280;
   --balam-dark-text-subtle: #9ca3af;
   --balam-dark-text-faint: #4b5563;

   /* Dark Interactive States */
   --balam-dark-hover-bg: rgba(255, 255, 255, 0.05);
   --balam-dark-active-bg: rgba(var(--balam-primary-rgb), 0.15);
   --balam-dark-focus-ring: rgba(var(--balam-primary-rgb), 0.15);

   /* Dark Gradients */
   --balam-dark-gradient-bg: linear-gradient(135deg, var(--balam-dark-bg-gradient-start) 0%, var(--balam-dark-bg-gradient-mid) 50%, var(--balam-dark-bg-primary) 100%);

   /* Dark Shadows */
   --balam-dark-shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.3);
   --balam-dark-shadow-md: 0 10px 40px rgba(0, 0, 0, 0.5);
   --balam-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dark Mode Variables (Optional - for future use)
═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
   --balam-text-primary: #f1f5f9;
   --balam-text-secondary: #cbd5e1;
   --balam-text-muted: #94a3b8;

   --balam-bg-primary: #0f172a;
   --balam-bg-secondary: #1e293b;
   --balam-bg-tertiary: #334155;
   --balam-bg-surface: #1e293b;

   --balam-border-light: #334155;
   --balam-border-default: #475569;
   --balam-border-dark: #64748b;
}