/**
 * Design Tokens - CSS Custom Properties
 *
 * This file contains all design tokens (CSS variables) used throughout the application.
 * Child applications can override this file entirely or use theme.yaml to customize tokens.
 *
 * Token Categories:
 * - Spacing: Consistent spacing scale
 * - Border Radius: Corner rounding values
 * - Transitions: Animation timing
 * - Layout: Structural dimensions
 * - Colors: Brand, status, and semantic colors
 * - Typography: Font settings
 * - Shadows: Elevation levels
 * - Sidebar: Navigation-specific tokens
 *
 * Theme Support:
 * - Uses CSS light-dark() function for automatic dark mode
 * - Fallback provided for older browsers
 * - data-theme="dark" or data-theme="light" forces specific theme
 */

/* ==========================================================================
   Design Tokens - Base Values
   ========================================================================== */
:root {
    /* Enable light-dark() function */
    color-scheme: light dark;

    /* ======================================================================
       Spacing Scale
       Base unit: 0.25rem (4px at 16px root)
       ====================================================================== */
    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-2xl: 3rem;     /* 48px */

    /* ======================================================================
       Border Radius
       ====================================================================== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* ======================================================================
       Transitions
       ====================================================================== */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;

    /* ======================================================================
       Layout Dimensions
       ====================================================================== */
    --sidebar-width: 0px;              /* Mobile: hidden */
    --sidebar-width-mini: 64px;        /* Tablet: icons only */
    --sidebar-width-full: 240px;       /* Desktop: full width */
    --header-height: 44px;
    --touch-target: 44px;              /* Minimum touch target size */

    /* ======================================================================
       Z-Index Scale
       Organized by layer purpose. Use these instead of magic numbers.
       ====================================================================== */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 100;
    --z-sidebar-overlay: 199;
    --z-sidebar: 200;
    --z-select: 1000;
    --z-drawer: 1100;
    --z-toast: 1200;
    --z-widget: 1300;                  /* Floating widgets (RAG chat) */
    --z-capture: 1400;                 /* Smart Capture overlay */
    --z-loading: 1500;                 /* Loading overlay - highest */

    /* ======================================================================
       Typography
       ====================================================================== */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-size-base: 16px;

    /* ======================================================================
       Brand Colors
       ====================================================================== */
    --color-primary: #3b82f6;
    --color-primary-hover: #2563eb;
    --color-primary-light: light-dark(#dbeafe, rgba(59, 130, 246, 0.2));

    /* ======================================================================
       Status Colors
       ====================================================================== */
    --color-danger: #ef4444;
    --color-danger-hover: #dc2626;
    --color-danger-light: light-dark(#fee2e2, rgba(239, 68, 68, 0.15));
    --color-danger-dark: light-dark(#991b1b, #fca5a5);

    --color-success: #22c55e;
    --color-success-hover: #16a34a;
    --color-success-light: light-dark(#dcfce7, rgba(34, 197, 94, 0.15));
    --color-success-dark: light-dark(#166534, #86efac);

    --color-warning: #f59e0b;
    --color-warning-hover: #d97706;
    --color-warning-light: light-dark(#fef3c7, rgba(245, 158, 11, 0.15));
    --color-warning-dark: light-dark(#92400e, #fcd34d);

    /* ======================================================================
       Semantic Colors (theme-aware using light-dark())
       Format: light-dark(light-value, dark-value)
       ====================================================================== */

    /* Backgrounds */
    --color-bg: light-dark(#f9fafb, #0f0f0f);
    --color-bg-elevated: light-dark(#ffffff, #1a1a1a);
    --color-bg-subtle: light-dark(#f3f4f6, #262626);
    --color-bg-muted: light-dark(#e5e7eb, #333333);
    --color-bg-hover: light-dark(#f3f4f6, #2a2a2a);

    /* Text - WCAG AA compliant (4.5:1 minimum contrast ratio) */
    --color-text: light-dark(#111827, #f5f5f5);
    --color-text-secondary: light-dark(#374151, #d4d4d4);
    --color-text-muted: light-dark(#52525b, #a3a3a3);
    --color-text-inverted: light-dark(#ffffff, #0a0a0a);

    /* Borders - WCAG 2.2 compliant contrast ratios
     * --color-border: ~1.8:1 - Cards, containers (with shadow)
     * --color-border-subtle: ~1.3:1 - Decorative separators only
     * --color-border-light: ~1.3:1 - Alias for subtle (deprecated)
     * --color-border-strong: ~4.6:1 - Inputs, interactive UI components (WCAG 3:1 min)
     */
    --color-border: light-dark(#b0b5bd, #4a4a4a);
    --color-border-subtle: light-dark(#d1d5db, #333333);
    --color-border-light: light-dark(#d1d5db, #3a3a3a);
    --color-border-strong: light-dark(#6b7280, #737373);

    /* ======================================================================
       Shadows (theme-aware)
       ====================================================================== */
    --shadow-sm: light-dark(
        0 1px 2px 0 rgb(0 0 0 / 0.05),
        0 1px 2px 0 rgb(0 0 0 / 0.3)
    );
    --shadow-md: light-dark(
        0 4px 6px -1px rgb(0 0 0 / 0.1),
        0 4px 6px -1px rgb(0 0 0 / 0.4)
    );
    --shadow-lg: light-dark(
        0 10px 15px -3px rgb(0 0 0 / 0.1),
        0 10px 15px -3px rgb(0 0 0 / 0.5)
    );
    --shadow-xl: light-dark(
        0 20px 25px -5px rgb(0 0 0 / 0.1),
        0 20px 25px -5px rgb(0 0 0 / 0.5)
    );

    /* Primary color RGB components (for rgba() usage) */
    --color-primary-rgb: 59, 130, 246;

    /* ======================================================================
       Sidebar Colors (theme-aware)
       ====================================================================== */
    --sidebar-bg: light-dark(#1f2937, #0a0a0a);
    --sidebar-text: light-dark(#d1d5db, #a1a1aa);
    --sidebar-text-active: #ffffff;
    --sidebar-border: light-dark(#374151, #262626);
    --sidebar-hover: light-dark(#374151, #1a1a1a);
    --sidebar-active: light-dark(#111827, #262626);
}

/* ==========================================================================
   Theme Overrides
   ========================================================================== */

/* Force dark mode when data-theme="dark" is set */
[data-theme="dark"] {
    color-scheme: dark;
}

/* Force light mode when data-theme="light" is set */
[data-theme="light"] {
    color-scheme: light;
}

/* ==========================================================================
   Fallback for browsers without light-dark() support
   Browser support: ~87% as of 2025
   ========================================================================== */
@supports not (color: light-dark(#000, #fff)) {
    :root {
        /* Light theme defaults - WCAG AA compliant */
        --color-primary-light: #dbeafe;

        /* Status color variants - light theme */
        --color-danger-light: #fee2e2;
        --color-danger-dark: #991b1b;
        --color-success-light: #dcfce7;
        --color-success-dark: #166534;
        --color-warning-light: #fef3c7;
        --color-warning-dark: #92400e;

        /* Backgrounds */
        --color-bg: #f9fafb;
        --color-bg-elevated: #ffffff;
        --color-bg-subtle: #f3f4f6;
        --color-bg-muted: #e5e7eb;
        --color-bg-hover: #f3f4f6;

        /* Text */
        --color-text: #111827;
        --color-text-secondary: #374151;
        --color-text-muted: #52525b;
        --color-text-inverted: #ffffff;

        /* Borders - WCAG 2.2 compliant */
        --color-border: #b0b5bd;
        --color-border-subtle: #d1d5db;
        --color-border-light: #d1d5db;
        --color-border-strong: #6b7280;

        /* Shadows */
        --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
        --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);

        /* Sidebar */
        --sidebar-bg: #1f2937;
        --sidebar-text: #d1d5db;
        --sidebar-border: #374151;
        --sidebar-hover: #374151;
        --sidebar-active: #111827;
    }

    /* Dark theme for browsers without light-dark() - WCAG AA compliant */
    [data-theme="dark"] {
        --color-primary-light: rgba(59, 130, 246, 0.2);

        /* Status color variants - dark theme */
        --color-danger-light: rgba(239, 68, 68, 0.15);
        --color-danger-dark: #fca5a5;
        --color-success-light: rgba(34, 197, 94, 0.15);
        --color-success-dark: #86efac;
        --color-warning-light: rgba(245, 158, 11, 0.15);
        --color-warning-dark: #fcd34d;

        /* Backgrounds */
        --color-bg: #0f0f0f;
        --color-bg-elevated: #1a1a1a;
        --color-bg-subtle: #262626;
        --color-bg-muted: #333333;
        --color-bg-hover: #2a2a2a;

        /* Text */
        --color-text: #f5f5f5;
        --color-text-secondary: #d4d4d4;
        --color-text-muted: #a3a3a3;
        --color-text-inverted: #0a0a0a;

        /* Borders - WCAG 2.2 compliant */
        --color-border: #4a4a4a;
        --color-border-subtle: #333333;
        --color-border-light: #3a3a3a;
        --color-border-strong: #737373;

        /* Shadows */
        --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);
        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
        --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5);

        /* Sidebar */
        --sidebar-bg: #0a0a0a;
        --sidebar-text: #a1a1aa;
        --sidebar-border: #262626;
        --sidebar-hover: #1a1a1a;
        --sidebar-active: #262626;
    }
}