/* Theme Variables - Aspec Captura PWA */

/* Este arquivo carrega DEPOIS de design-tokens.css (ver index.html), que já
 * define --color-primary, --color-surface, --color-border,
 * --color-text-primary, --color-text-secondary, --color-text-disabled,
 * --color-success, --color-warning e --color-info tanto para :root (claro)
 * quanto para [data-theme="dark"] (escuro).
 *
 * O bloco abaixo redeclara os mesmos nomes com valores próprios. Como
 * :root e [data-theme="dark"] têm a mesma especificidade CSS, a regra
 * carregada por último vencia sempre — prendendo esses tokens no valor
 * claro mesmo com o tema escuro ativo, e com ele qualquer texto/fundo que
 * dependesse de var(--color-text-primary), var(--color-surface) etc. sem um
 * override manual em dark-mode.css.
 *
 * Como os valores aqui não são idênticos aos de design-tokens.css (ex.:
 * --color-primary), mudar o seletor para design-tokens.css decidir sozinho
 * alteraria a paleta hoje visível no tema claro. Em vez disso, o escopo foi
 * restrito a :root:not([data-theme="dark"]): a aparência do tema claro
 * continua exatamente a mesma, e no tema escuro esta regra deixa de
 * competir, permitindo que design-tokens.css resolva corretamente. */
:root:not([data-theme="dark"]) {
    /* 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;
}

/* --color-background e --color-danger não existem em design-tokens.css (lá
 * são --color-bg e --color-error); sem este bloco, ficariam presos no valor
 * claro acima também no tema escuro. --color-danger já é igual em ambos os
 * temas em design-tokens.css, mas --color-bg escurece — daí o valor próprio
 * aqui em vez de um alias. */
[data-theme="dark"] {
    --color-background: #0F172A;
    --color-danger: #EF4444;
}

:root {
    /* 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 tokens unificados em design-tokens.css (fonte única de verdade) */