/**
 * Alista — Design tokens compartilhados
 * Carregar antes dos demais CSS. Cores de tema claro/escuro ficam em index.html (data-theme).
 */

:root {
    /* Layout */
    --app-header-height: 56px;
    --app-bottom-bar-height: 64px;
    --app-token-bar-height: 28px;
    --app-spacing: 16px;
    --app-spacing-sm: 8px;
    --app-spacing-lg: 24px;
    --app-spacing-xl: 32px;
    --app-radius: 16px;
    --app-radius-sm: 10px;
    --app-radius-lg: 20px;
    --app-edge-inset: 2px;
    --app-edge-inset-x: 10px;
    --app-section-gap: 2px;
    --app-icon-size: 24px;
    --app-btn-min-height: 48px;
    --app-title-size: clamp(20px, 4.6vw, 24px);
    --app-text-size: clamp(14px, 3.6vw, 16px);
    --app-text-sm: 13px;
    --app-text-xs: 11px;

    /* Tipografia */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.65;

    /* Transições */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* Foco / acessibilidade */
    --focus-ring-width: 3px;
    --focus-ring-offset: 2px;
    --focus-ring-color: var(--accent-glow, rgba(37, 99, 235, 0.35));

    /* Z-index */
    --z-header: 80;
    --z-bottom-bar: 90;
    --z-overlay: 200;
    --z-side-menu: 300;
    --z-modal: 400;
    --z-toast: 950;
    --z-loading: 2000;

    /* Auth / marketing (telas escuras) */
    --twg-bg-deep: #0c1219;
    --twg-bg-mid: #151c27;
    --twg-bg-light: #1e2736;
    --twg-accent: #2563eb;
    --twg-accent-dark: #1d4ed8;
    --twg-accent-soft: rgba(37, 99, 235, 0.12);
    --twg-accent-glow: rgba(37, 99, 235, 0.28);
    --twg-text: #f1f5f9;
    --twg-text-muted: #94a3b8;
    --twg-border: rgba(255, 255, 255, 0.07);
    --twg-surface: rgba(21, 28, 39, 0.9);
    --twg-link: #60a5fa;
    --twg-link-hover: #93c5fd;
}