/* =============================================================================
   Acelerador de Autoridade — Design Tokens
   =============================================================================
   Fonte única de verdade da identidade visual.
   Quaisquer cores, tamanhos ou espaçamentos usados na app DEVEM vir daqui.
   ============================================================================= */

:root {
    /* ----- Cores fixas da marca (não mudam entre dark/light) ----- */
    --brand-surface-light: #eff0f1;
    --brand-surface-dark: #242b3b;
    --brand-accent: #f3298a;
    --brand-accent-hover: #d61f78;
    --brand-accent-active: #b5176a;

    /* ----- Paleta secundária pastel ----- */
    /* Cada cor tem uma versão "primary" (escura) e "soft" (clara) */
    --pastel-success: #7BB8A8;
    --pastel-success-soft: #C5E0D7;
    --pastel-success-deep: #2a5a4a;

    --pastel-warning: #D9B96E;
    --pastel-warning-soft: #F0DCAA;
    --pastel-warning-deep: #6e5418;

    --pastel-danger: #E07856;
    --pastel-danger-soft: #F8D5C7;
    --pastel-danger-deep: #8B3A22;

    --pastel-info: #6B9DC9;
    --pastel-info-soft: #C8DCEC;
    --pastel-info-deep: #234a73;

    --pastel-category: #9B8FBC;
    --pastel-category-soft: #D5CFE2;
    --pastel-category-deep: #3f365e;

    /* ----- Tipografia ----- */
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;

    /* ----- Cantos arredondados (4-6px conforme decidido) ----- */
    --radius-sm: 3px;
    --radius-md: 5px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-pill: 9999px;

    /* ----- Espaçamento (escala 4px) ----- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ----- Tamanhos de fonte ----- */
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 15px;
    --text-lg: 17px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 30px;
    --text-4xl: 38px;

    /* ----- Pesos ----- */
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* ----- Transições ----- */
    --transition-fast: 120ms ease;
    --transition-base: 180ms ease;
    --transition-slow: 280ms ease;

    /* ----- z-index ----- */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal-backdrop: 900;
    --z-modal: 1000;
    --z-toast: 1100;

    /* ----- Larguras de container ----- */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1440px;
}

/* ============================================================================
   Light mode — padrão quando não há preferência ou data-theme="light"
   ============================================================================ */
:root,
:root[data-theme="light"] {
    --bg-base: var(--brand-surface-light);
    --bg-elevated: #ffffff;
    --bg-elevated-2: #f8f9fa;
    --bg-hover: rgba(36, 43, 59, 0.04);
    --bg-active: rgba(36, 43, 59, 0.08);
    --bg-overlay: rgba(36, 43, 59, 0.55);

    --border-subtle: rgba(36, 43, 59, 0.08);
    --border-default: rgba(36, 43, 59, 0.14);
    --border-strong: rgba(36, 43, 59, 0.28);

    --text-primary: #242b3b;
    --text-secondary: #5a6477;
    --text-tertiary: #8a96ad;
    --text-on-accent: #ffffff;

    --shadow-xs: 0 1px 2px rgba(36, 43, 59, 0.04);
    --shadow-sm: 0 2px 4px rgba(36, 43, 59, 0.06);
    --shadow-md: 0 4px 12px rgba(36, 43, 59, 0.08);
    --shadow-lg: 0 12px 28px rgba(36, 43, 59, 0.12);

    /* Status fills usam a versão "soft" sobre fundo claro */
    --status-success-bg: var(--pastel-success-soft);
    --status-success-text: var(--pastel-success-deep);
    --status-warning-bg: var(--pastel-warning-soft);
    --status-warning-text: var(--pastel-warning-deep);
    --status-danger-bg: var(--pastel-danger-soft);
    --status-danger-text: var(--pastel-danger-deep);
    --status-info-bg: var(--pastel-info-soft);
    --status-info-text: var(--pastel-info-deep);
    --status-category-bg: var(--pastel-category-soft);
    --status-category-text: var(--pastel-category-deep);
}

/* ============================================================================
   Dark mode — quando data-theme="dark" OU preferência do SO se não houver toggle manual
   ============================================================================ */
:root[data-theme="dark"] {
    --bg-base: var(--brand-surface-dark);
    --bg-elevated: #2d3548;
    --bg-elevated-2: #3a4255;
    --bg-hover: rgba(239, 240, 241, 0.04);
    --bg-active: rgba(239, 240, 241, 0.08);
    --bg-overlay: rgba(0, 0, 0, 0.65);

    --border-subtle: rgba(239, 240, 241, 0.06);
    --border-default: rgba(239, 240, 241, 0.10);
    --border-strong: rgba(239, 240, 241, 0.22);

    --text-primary: #eff0f1;
    --text-secondary: #8a96ad;
    --text-tertiary: #6b7385;
    --text-on-accent: #ffffff;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.32);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.45);

    /* Status fills usam tom "primary" com transparência sobre fundo escuro */
    --status-success-bg: rgba(123, 184, 168, 0.18);
    --status-success-text: #95d4c2;
    --status-warning-bg: rgba(217, 185, 110, 0.18);
    --status-warning-text: #e8cf90;
    --status-danger-bg: rgba(224, 120, 86, 0.20);
    --status-danger-text: #F2B19A;
    --status-info-bg: rgba(107, 157, 201, 0.18);
    --status-info-text: #a3c4e0;
    --status-category-bg: rgba(155, 143, 188, 0.18);
    --status-category-text: #c1b6db;
}

/* Dark mode automático via SO se o usuário não tem preferência manual */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --bg-base: var(--brand-surface-dark);
        --bg-elevated: #2d3548;
        --bg-elevated-2: #3a4255;
        --bg-hover: rgba(239, 240, 241, 0.04);
        --bg-active: rgba(239, 240, 241, 0.08);
        --bg-overlay: rgba(0, 0, 0, 0.65);

        --border-subtle: rgba(239, 240, 241, 0.06);
        --border-default: rgba(239, 240, 241, 0.10);
        --border-strong: rgba(239, 240, 241, 0.22);

        --text-primary: #eff0f1;
        --text-secondary: #8a96ad;
        --text-tertiary: #6b7385;

        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20);
        --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.32);
        --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.45);

        --status-success-bg: rgba(123, 184, 168, 0.18);
        --status-success-text: #95d4c2;
        --status-warning-bg: rgba(217, 185, 110, 0.18);
        --status-warning-text: #e8cf90;
        --status-danger-bg: rgba(224, 120, 86, 0.20);
        --status-danger-text: #F2B19A;
        --status-info-bg: rgba(107, 157, 201, 0.18);
        --status-info-text: #a3c4e0;
        --status-category-bg: rgba(155, 143, 188, 0.18);
        --status-category-text: #c1b6db;
    }
}