/**
 * ═══════════════════════════════════════════════════════════════════════════════════
 * BALAM AI - Shared CSS Variables (Design Tokens)
 * ═══════════════════════════════════════════════════════════════════════════════════
 *
 * This file serves as the single source of truth for ALL CSS variables (design tokens)
 * used throughout the BALAM AI project. It consolidates variables from:
 *   - /static/frontend/css/variables.css (core design system)
 *   - /templates/chat_history.html (page-specific variables)
 *   - /templates/assistants.html (page-specific variables)
 *   - /templates/index.html (dashboard variables)
 *   - /static/frontend/css/layouts/dashboard.css (layout variables)
 *   - /static/frontend/css/layouts/legal.css (legal page variables)
 *   - /static/frontend/css/components.css (component variables)
 *
 * USAGE:
 *   Import this file at the top of your CSS or include it first in your HTML:
 *   <link rel="stylesheet" href="{% static 'frontend/css/shared-variables.css' %}">
 *
 *   Then use variables like:
 *   color: var(--balam-primary);
 *   padding: var(--balam-spacing-md);
 *   border-radius: var(--balam-radius-lg);
 *
 * NAMING CONVENTION:
 *   All variables follow the pattern: --balam-[category]-[name]
 *   Categories: color, text, bg, border, spacing, radius, shadow, z, transition, etc.
 *
 * @author BALAM AI Team
 * @version 2.0.0
 * @updated 2025-12-18
 * ═══════════════════════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════════════════════
   DESIGN TOKEN IMPORTS (3-tier token system)
   Load before :root so tokens are available for all variable definitions.
   ═══════════════════════════════════════════════════════════════════════════════ */
@import url('tokens/primitives.css');
@import url('tokens/semantic.css');
@import url('tokens/components.css');
@import url('tokens/dark-theme.css');

:root {
    /* ═══════════════════════════════════════════════════════════════════════════════
       0. COLOR SCHEME - Force dark mode for native form controls
       ═══════════════════════════════════════════════════════════════════════════════
       This tells browsers to render native form elements (selects, inputs, scrollbars)
       in dark mode, ensuring consistent styling across the application.
    */
    color-scheme: dark;

    /* ═══════════════════════════════════════════════════════════════════════════════
       1. COLOR PALETTE - Primary, Secondary, Accent
       ═══════════════════════════════════════════════════════════════════════════════
       The core brand colors used throughout the application.
       RGB values are provided for creating transparent variations using rgba().
    */

    /* Primary Blue - Main brand color, used for primary actions, links, highlights */
    --balam-primary: #4361ee;
    --balam-primary-rgb: 67, 97, 238;
    --balam-primary-hover: #3651d4;
    --balam-primary-dark: #3451de;
    --balam-primary-light: #6b83f2;

    /* Secondary Purple - Used for secondary actions, gradients */
    --balam-secondary: #7209b7;
    --balam-secondary-rgb: 114, 9, 183;
    --balam-secondary-hover: #5c0792;
    --balam-secondary-light: #9b3dd1;

    /* Accent Pink - Used for emphasis, CTAs, highlights */
    --balam-accent: #f72585;
    --balam-accent-rgb: 247, 37, 133;
    --balam-accent-hover: #d91a6f;
    --balam-accent-light: #f9519f;

    /* ═══════════════════════════════════════════════════════════════════════════════
       2. SEMANTIC COLORS - Success, Warning, Danger, Info
       ═══════════════════════════════════════════════════════════════════════════════
       Status and feedback colors for validation, alerts, notifications.
    */

    /* Success Green - Positive actions, confirmations, success states */
    --balam-success: #22c55e;
    --balam-success-alt: #10b981;
    --balam-success-rgb: 34, 197, 94;
    --balam-success-light: #d1fae5;
    --balam-success-bg: rgba(34, 197, 94, 0.1);

    /* Warning Orange/Amber - Caution states, pending actions */
    --balam-warning: #f59e0b;
    --balam-warning-rgb: 245, 158, 11;
    --balam-warning-light: #fef3c7;
    --balam-warning-bg: rgba(245, 158, 11, 0.1);

    /* Danger Red - Errors, destructive actions, alerts */
    --balam-danger: #ef4444;
    --balam-danger-rgb: 239, 68, 68;
    --balam-danger-light: #fee2e2;
    --balam-danger-bg: rgba(239, 68, 68, 0.1);

    /* Info Cyan - Informational states, tips, helper text */
    --balam-info: #4cc9f0;
    --balam-info-alt: #06b6d4;
    --balam-info-rgb: 76, 201, 240;
    --balam-info-light: #e0f7fe;
    --balam-info-bg: rgba(76, 201, 240, 0.1);

    /* Additional Status Colors (used in dashboard/charts) */
    --balam-purple: #8b5cf6;
    --balam-purple-rgb: 139, 92, 246;
    --balam-cyan: #06b6d4;
    --balam-cyan-rgb: 6, 182, 212;
    --balam-pink: #ec4899;
    --balam-pink-rgb: 236, 72, 153;
    --balam-yellow: #eab308;
    --balam-yellow-rgb: 234, 179, 8;
    --balam-orange: #f97316;
    --balam-orange-rgb: 249, 115, 22;

    /* ═══════════════════════════════════════════════════════════════════════════════
       3. NEUTRAL COLORS - Grays & Base Colors
       ═══════════════════════════════════════════════════════════════════════════════
       Grayscale palette from lightest to darkest for UI elements.
    */

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

    /* Gray Scale - Light to Dark */
    --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;

    /* ═══════════════════════════════════════════════════════════════════════════════
       4. LIGHT THEME COLORS - Text, Backgrounds, Borders
       ═══════════════════════════════════════════════════════════════════════════════
       Used for cards, main content areas, and light UI elements.
    */

    /* Text Colors - Light Theme */
    --balam-text-primary: #2b2d42;
    --balam-text-secondary: #475569;
    --balam-text-muted: #6c757d;
    --balam-text-light: #94a3b8;
    --balam-text-inverse: #ffffff;
    --balam-text-dark: #1f2937;
    --balam-text-gray: #6b7280;
    --balam-text-heading: #111827;

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

    /* Card Colors - Light Theme */
    --balam-card-bg: #ffffff;
    --balam-card-border: #e5e7eb;
    --balam-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --balam-card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.1);

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

    /* ═══════════════════════════════════════════════════════════════════════════════
       5. DARK THEME COLORS - Modals, Sidebar, Dark Sections
       ═══════════════════════════════════════════════════════════════════════════════
       Used for sidebar, modals, dark overlays, and authentication pages.
    */

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

    /* Modal-specific Dark Colors */
    --balam-modal-bg: #12121a;
    --balam-modal-card: #1a1a24;
    --balam-modal-card-hover: #1f1f2a;
    --balam-modal-border: #2d2d3a;
    --balam-modal-border-light: #3d3d4a;
    --balam-modal-input: #15151d;
    --balam-modal-text: #ffffff;
    --balam-modal-text-secondary: #e5e7eb;
    --balam-modal-text-muted: #9ca3af;
    --balam-modal-text-dim: #6b7280;

    /* 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(67, 97, 238, 0.15);
    --balam-dark-focus-ring: rgba(67, 97, 238, 0.15);

    /* ═══════════════════════════════════════════════════════════════════════════════
       6. GRADIENTS
       ═══════════════════════════════════════════════════════════════════════════════
       Pre-defined gradient combinations for backgrounds, buttons, and accents.
    */

    /* Primary 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%);

    /* Dark Theme Gradients */
    --balam-gradient-dark: linear-gradient(135deg, var(--balam-dark-bg-gradient-start) 0%, var(--balam-dark-bg-gradient-mid) 100%);
    --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%);

    /* Modal/Surface Gradients */
    --balam-modal-gradient-primary: linear-gradient(135deg, #4361ee 0%, #3730a3 100%);
    --balam-modal-gradient-surface: linear-gradient(135deg, #1a1a24 0%, #15151d 100%);

    /* ═══════════════════════════════════════════════════════════════════════════════
       7. TYPOGRAPHY
       ═══════════════════════════════════════════════════════════════════════════════
       Font families, sizes, weights, and line heights for consistent 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 - Using rem for accessibility */
    --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;

    /* ═══════════════════════════════════════════════════════════════════════════════
       8. SPACING SCALE
       ═══════════════════════════════════════════════════════════════════════════════
       Consistent spacing values for margin, padding, and gap properties.
       Based on 4px base unit (0.25rem).
    */

    /* Numeric Scale (Tailwind-inspired) */
    --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 */

    /* Named Scale (Semantic) */
    --balam-spacing-xs: 0.25rem;    /* 4px - Extra small */
    --balam-spacing-sm: 0.5rem;     /* 8px - Small */
    --balam-spacing-md: 1rem;       /* 16px - Medium (default) */
    --balam-spacing-lg: 1.5rem;     /* 24px - Large */
    --balam-spacing-xl: 2rem;       /* 32px - Extra large */
    --balam-spacing-2xl: 3rem;      /* 48px - 2x Extra large */

    /* ═══════════════════════════════════════════════════════════════════════════════
       9. BORDER RADIUS
       ═══════════════════════════════════════════════════════════════════════════════
       Rounded corner values for buttons, cards, inputs, and other UI elements.
    */

    --balam-radius-none: 0;
    --balam-radius-sm: 0.25rem;     /* 4px - Subtle rounding */
    --balam-radius-md: 0.5rem;      /* 8px - Default rounding */
    --balam-radius-lg: 0.75rem;     /* 12px - Moderate rounding */
    --balam-radius-xl: 1rem;        /* 16px - Pronounced rounding */
    --balam-radius-2xl: 1.5rem;     /* 24px - Large rounding */
    --balam-radius-3xl: 2rem;       /* 32px - Extra large rounding */
    --balam-radius-full: 9999px;    /* Pill shape / circles */

    /* ═══════════════════════════════════════════════════════════════════════════════
       10. BOX SHADOWS
       ═══════════════════════════════════════════════════════════════════════════════
       Elevation and depth shadows for cards, modals, dropdowns, and overlays.
    */

    /* Standard Shadows - Light Theme */
    --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 - For buttons and emphasized elements */
    --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);
    --balam-shadow-success: 0 8px 24px rgba(34, 197, 94, 0.35);
    --balam-shadow-danger: 0 8px 24px rgba(239, 68, 68, 0.35);

    /* Dark Theme 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);

    /* Modal/Glow Shadows */
    --balam-modal-shadow-glow: 0 0 40px rgba(67, 97, 238, 0.15);

    /* ═══════════════════════════════════════════════════════════════════════════════
       11. TRANSITIONS & ANIMATIONS
       ═══════════════════════════════════════════════════════════════════════════════
       Timing functions for smooth UI transitions and animations.
    */

    /* Duration-based 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);

    /* Specific Transitions */
    --balam-transition-transform: transform 0.2s ease;
    --balam-transition-opacity: opacity 0.2s ease;
    --balam-transition-colors: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    --balam-transition-all: all 0.2s ease;

    /* Easing Functions */
    --balam-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --balam-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --balam-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --balam-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ═══════════════════════════════════════════════════════════════════════════════
       12. Z-INDEX SCALE
       ═══════════════════════════════════════════════════════════════════════════════
       Layering system for overlays, modals, dropdowns, and sticky elements.
       Higher values appear on top of lower values.
    */

    --balam-z-behind: -1;           /* Behind content */
    --balam-z-base: 0;              /* Default layer */
    --balam-z-dropdown: 1000;       /* Dropdown menus */
    --balam-z-sticky: 1020;         /* Sticky headers */
    --balam-z-fixed: 1030;          /* Fixed navigation */
    --balam-z-sidebar: 1000;        /* Sidebar navigation */
    --balam-z-modal-backdrop: 1040; /* Modal overlay */
    --balam-z-modal: 1050;          /* Modal dialogs */
    --balam-z-popover: 1060;        /* Popovers */
    --balam-z-tooltip: 1070;        /* Tooltips */
    --balam-z-max: 9999;            /* Maximum layer (use sparingly) */
    --balam-z-modal-overlay: 10000; /* Premium modal overlay */
    --balam-z-toast: 99999;         /* Toast notifications - must be above modal overlay */

    /* ═══════════════════════════════════════════════════════════════════════════════
       13. BREAKPOINTS (Reference Values)
       ═══════════════════════════════════════════════════════════════════════════════
       Responsive breakpoints as CSS custom properties for reference.
       Note: CSS custom properties cannot be used directly in @media queries.
       These are provided for JavaScript and documentation purposes.
    */

    --balam-breakpoint-xs: 0;
    --balam-breakpoint-sm: 576px;   /* Small phones landscape */
    --balam-breakpoint-md: 768px;   /* Tablets portrait */
    --balam-breakpoint-lg: 992px;   /* Tablets landscape / small laptops */
    --balam-breakpoint-xl: 1200px;  /* Desktops */
    --balam-breakpoint-xxl: 1400px; /* Large desktops */

    /* ═══════════════════════════════════════════════════════════════════════════════
       14. COMPONENT-SPECIFIC VARIABLES
       ═══════════════════════════════════════════════════════════════════════════════
       Pre-configured values for common UI components.
    */

    /* Sidebar */
    --balam-sidebar-width: 260px;
    --balam-sidebar-collapsed-width: 72px;
    --balam-sidebar-bg: var(--balam-dark-bg-primary);
    --balam-sidebar-border: var(--balam-dark-border);

    /* Navigation */
    --balam-nav-item-hover: var(--balam-dark-hover-bg);
    --balam-nav-item-active-bg: var(--balam-dark-active-bg);
    --balam-nav-item-active-color: var(--balam-primary);
    --balam-nav-text-color: var(--balam-dark-text-secondary);
    --balam-nav-text-muted: var(--balam-dark-text-muted);

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

    /* Content Area */
    --balam-content-bg: var(--balam-gray-50);

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

    /* Inputs */
    --balam-input-height: 48px;
    --balam-input-height-sm: 40px;
    --balam-input-height-lg: 52px;
    --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);
    --balam-btn-height: 44px;
    --balam-btn-height-sm: 36px;
    --balam-btn-height-lg: 52px;

    /* Charts (Dashboard) */
    --balam-chart-height: 280px;
    --balam-chart-height-sm: 200px;

    /* Tables */
    --balam-table-header-bg: var(--balam-gray-50);
    --balam-table-border: var(--balam-border-default);
    --balam-table-stripe-bg: var(--balam-gray-50);

    /* ═══════════════════════════════════════════════════════════════════════════════
       15. PROFILE MODAL SPECIFIC VARIABLES
       ═══════════════════════════════════════════════════════════════════════════════
       Variables specifically for the profile modal component.
    */

    --balam-profile-modal-bg: #0f0f17;
    --balam-profile-modal-card: #1a1a24;
    --balam-profile-modal-card-hover: #1f1f2a;
    --balam-profile-modal-border: #2d2d3a;
    --balam-profile-modal-border-light: #3d3d4a;
    --balam-profile-modal-input: #15151d;
    --balam-profile-modal-text: #ffffff;
    --balam-profile-modal-text-secondary: #e5e7eb;
    --balam-profile-modal-text-muted: #9ca3af;
    --balam-profile-modal-text-dim: #6b7280;
    --balam-profile-gradient-primary: linear-gradient(135deg, #4361ee 0%, #3730a3 100%);
    --balam-profile-gradient-surface: linear-gradient(135deg, #1a1a24 0%, #15151d 100%);
    --balam-profile-shadow-glow: 0 0 40px rgba(67, 97, 238, 0.15);

    /* ═══════════════════════════════════════════════════════════════════════════════
       16. LEGACY VARIABLE ALIASES
       ═══════════════════════════════════════════════════════════════════════════════
       These aliases maintain backward compatibility with existing inline styles
       in template files (chat_history.html, assistants.html, etc.).
       Prefer using the --balam-* prefixed variables for new code.
    */

    /* Primary colors (used in templates) */
    --primary: var(--balam-primary);
    --primary-dark: var(--balam-primary-dark);
    --primary-light: rgba(67, 97, 238, 0.1);

    /* Semantic colors (used in templates) */
    --success: var(--balam-success);
    --success-light: var(--balam-success-bg);
    --danger: var(--balam-danger);
    --danger-light: var(--balam-danger-bg);
    --warning: var(--balam-warning);
    --info: var(--balam-info);

    /* Card variables (used in templates) */
    --card-bg: var(--balam-card-bg);
    --card-border: var(--balam-card-border);
    --card-shadow: var(--balam-card-shadow);
    --card-shadow-hover: var(--balam-card-shadow-hover);

    /* Text variables (used in templates) */
    --text-dark: var(--balam-text-dark);
    --text-gray: var(--balam-text-gray);
    --text-light: var(--balam-text-light);

    /* Modal variables (used in templates and components.css) */
    --modal-bg: var(--balam-modal-bg);
    --modal-card: var(--balam-modal-card);
    --modal-card-hover: var(--balam-modal-card-hover);
    --modal-border: var(--balam-modal-border);
    --modal-border-light: var(--balam-modal-border-light);
    --modal-input: var(--balam-modal-input);
    --modal-text: var(--balam-modal-text);
    --modal-text-secondary: var(--balam-modal-text-secondary);
    --modal-text-muted: var(--balam-modal-text-muted);
    --modal-text-dim: var(--balam-modal-text-dim);
    --modal-gradient-primary: var(--balam-modal-gradient-primary);
    --modal-gradient-surface: var(--balam-modal-gradient-surface);
    --modal-shadow-glow: var(--balam-modal-shadow-glow);

    /* Sidebar variables (used in dashboard.css) */
    --sidebar-width: var(--balam-sidebar-width);
    --sidebar-collapsed-width: var(--balam-sidebar-collapsed-width);
    --sidebar-bg: var(--balam-sidebar-bg);
    --sidebar-border: var(--balam-sidebar-border);

    /* Navigation variables (used in dashboard.css) */
    --nav-item-hover: var(--balam-nav-item-hover);
    --nav-item-active-bg: var(--balam-nav-item-active-bg);
    --nav-item-active-color: var(--balam-nav-item-active-color);
    --nav-text-color: var(--balam-nav-text-color);
    --nav-text-muted: var(--balam-nav-text-muted);

    /* Content area (used in dashboard.css) */
    --content-bg: var(--balam-content-bg);

    /* Transition speed (used in dashboard.css) */
    --transition-speed: 0.3s;

    /* Profile modal variables (used in dashboard.css) */
    --profile-modal-bg: var(--balam-profile-modal-bg);
    --profile-modal-card: var(--balam-profile-modal-card);
    --profile-modal-card-hover: var(--balam-profile-modal-card-hover);
    --profile-modal-border: var(--balam-profile-modal-border);
    --profile-modal-border-light: var(--balam-profile-modal-border-light);
    --profile-modal-input: var(--balam-profile-modal-input);
    --profile-modal-text: var(--balam-profile-modal-text);
    --profile-modal-text-secondary: var(--balam-profile-modal-text-secondary);
    --profile-modal-text-muted: var(--balam-profile-modal-text-muted);
    --profile-modal-text-dim: var(--balam-profile-modal-text-dim);
    --profile-gradient-primary: var(--balam-profile-gradient-primary);
    --profile-gradient-surface: var(--balam-profile-gradient-surface);
    --profile-shadow-glow: var(--balam-profile-shadow-glow);
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   DARK MODE OVERRIDES (Optional - for future full dark mode support)
   ═══════════════════════════════════════════════════════════════════════════════════
   Apply these overrides when [data-theme="dark"] is set on the html element.
   Currently used selectively in auth pages and sidebar.
*/

[data-theme="dark"] {
    /* Text colors become light */
    --balam-text-primary: #f1f5f9;
    --balam-text-secondary: #cbd5e1;
    --balam-text-muted: #94a3b8;

    /* Backgrounds become dark */
    --balam-bg-primary: #0f172a;
    --balam-bg-secondary: #1e293b;
    --balam-bg-tertiary: #334155;
    --balam-bg-surface: #1e293b;

    /* Borders become visible on dark */
    --balam-border-light: #334155;
    --balam-border-default: #475569;
    --balam-border-dark: #64748b;

    /* Card adjustments */
    --balam-card-bg: #1e293b;
    --balam-card-border: #334155;
    --balam-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --balam-card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   END OF DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════════════════════

   Button styles     → components/buttons.css
   Toggle switches   → components/toggle-switch.css
   Form controls     → components/forms.css
   Status indicators → components/status-indicator.css
   Toast alerts      → components/toast.css
   Modal system      → components/modal.css
   Accessibility     → base.css

   USAGE EXAMPLES:

   1. Colors:
      background: var(--balam-primary);
      color: var(--balam-text-primary);
      border: 1px solid var(--balam-border-default);

   2. Spacing:
      padding: var(--balam-spacing-md);
      margin: var(--balam-spacing-4) var(--balam-spacing-6);
      gap: var(--balam-spacing-sm);

   3. Typography:
      font-family: var(--balam-font-primary);
      font-size: var(--balam-text-lg);
      font-weight: var(--balam-font-semibold);

   4. Borders & Shadows:
      border-radius: var(--balam-radius-lg);
      box-shadow: var(--balam-shadow-md);

   5. Transitions:
      transition: var(--balam-transition-normal);

   6. Z-Index:
      z-index: var(--balam-z-modal);

   7. Gradients:
      background: var(--balam-gradient-primary);

   8. Component-specific:
      width: var(--balam-sidebar-width);
      height: var(--balam-input-height);

   ═══════════════════════════════════════════════════════════════════════════════════
*/