/* Theme Variables - Aspec Captura PWA */

:root {
    /* Primary Colors */
    --color-primary: #1E5AA8;
    --color-primary-dark: #174B8D;
    --color-background: #F7F8FB;
    --color-surface: #FFFFFF;
    --color-border: #E6EAF2;
    --color-text-primary: #111827;
    --color-text-secondary: #6B7280;
    --color-text-disabled: #9CA3AF;
    --color-success: #16A34A;
    --color-warning: #F59E0B;
    --color-info: #3B82F6;
    --color-danger: #EF4444;
    --color-primary-light: #E8F1FF;

    /* Legacy compatibility (Mapping to new tokens) */
    --primary-color: var(--color-primary);
    --primary-dark: var(--color-primary-dark);
    --background-color: var(--color-background);
    --surface-color: var(--color-surface);
    --text-primary: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --text-disabled: var(--color-text-disabled);
    --success-color: var(--color-success);
    --warning-color: var(--color-warning);
    --info-color: var(--color-info);
    --error-color: var(--color-danger);
    --divider-color: var(--color-border);
    --primary-light: var(--color-primary-light);

    /* Spacing (8px grid) */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 20px;
    --spacing-xl: 24px;
    
    /* Typography */
    --font-family: 'Inter', sans-serif;
    --font-family-display: 'Space Grotesk', 'Inter', sans-serif;
    --font-size-small: 12px;
    --font-size-body: 14px;
    --font-size-title-md: 16px;
    --font-size-title-lg: 20px;
    
    /* Legacy font mapping */
    --font-size-xs: var(--font-size-small);
    --font-size-sm: var(--font-size-body);
    --font-size-md: var(--font-size-title-md);
    --font-size-lg: var(--font-size-title-lg);
    
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 600;
    
    /* Border Radius */
    --radius-input: 12px;
    --radius-card: 16px;
    
    /* Legacy radius mapping */
    --radius-sm: 4px;
    --radius-md: var(--radius-input);
    --radius-lg: var(--radius-card);
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    
    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 300ms ease-in-out;
    --transition-slow: 400ms ease-in-out;
    
    /* Z-Index Layers */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* Touch Targets */
    --touch-target-min: 44px;
    
    /* Layout */
    --header-height: 64px;
    --bottom-nav-height: 64px;
    --max-content-width: 1200px;
    
    /* iOS Safe Area Support */
    --safe-area-inset-top: env(safe-area-inset-top);
    --safe-area-inset-right: env(safe-area-inset-right);
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
    --safe-area-inset-left: env(safe-area-inset-left);
}

/* Dark mode support - controlled by MudBlazor ThemeProvider, not system preference */
[data-theme='dark'] {
    --color-primary: #5DA3FF;
    --color-primary-dark: #2D7BE8;
    --color-background: #0B1220;
    --color-surface: #0F1B33;
    --color-border: #22314D;
    --color-text-primary: #E5E7EB;
    --color-text-secondary: #A7B0C0;
    --color-text-disabled: #64748B;
    --color-primary-light: rgba(93, 163, 255, 0.16);

    --background-color: var(--color-background);
    --surface-color: var(--color-surface);
    --text-primary: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --text-disabled: var(--color-text-disabled);
    --divider-color: var(--color-border);
    --primary-color: var(--color-primary);
    --primary-dark: var(--color-primary-dark);
}