/*
|--------------------------------------------------------------------------
| Design System Backoffice COMEPI — tokens semânticos
|--------------------------------------------------------------------------
|
| O que os componentes usam. O nome diz a FUNÇÃO, não a cor:
| --ds-color-danger-fg em vez de "vermelho escuro".
|
| Regra: nenhum componente ou tela usa hexadecimal. Se faltar um token,
| ele é criado aqui (com revisão), nunca inventado na tela.
|
*/

:root {
    /* Superfícies */
    --ds-color-bg: var(--ds-graphite-50);
    --ds-color-surface: var(--ds-graphite-0);
    --ds-color-surface-subtle: var(--ds-graphite-25);
    --ds-color-surface-sunken: var(--ds-graphite-100);
    --ds-color-surface-hover: var(--ds-graphite-50);
    --ds-color-surface-selected: var(--ds-pink-50);
    --ds-color-surface-readonly: var(--ds-graphite-50);

    /* Bordas e divisórias */
    --ds-color-border: var(--ds-graphite-200);
    --ds-color-border-subtle: var(--ds-graphite-150);
    --ds-color-border-strong: var(--ds-graphite-300);
    --ds-color-border-control: var(--ds-graphite-400);
    --ds-color-border-focus: var(--ds-pink-600);

    /* Texto */
    --ds-color-text: var(--ds-graphite-900);
    --ds-color-text-secondary: var(--ds-graphite-600);
    --ds-color-text-muted: var(--ds-graphite-500);
    --ds-color-text-disabled: var(--ds-graphite-400);
    --ds-color-text-placeholder: var(--ds-graphite-400);
    --ds-color-text-inverse: var(--ds-graphite-0);
    --ds-color-text-link: var(--ds-pink-600);
    --ds-color-text-link-hover: var(--ds-pink-800);

    /* Marca: o rosa da flor. Logo, indicador no menu escuro, detalhes de
       marca. Nunca como fundo de texto pequeno (contraste insuficiente). */
    --ds-color-brand: var(--ds-pink-500);

    /* Ação principal (framboesa) — no máximo uma por área de tela */
    --ds-color-primary: var(--ds-pink-600);
    --ds-color-primary-hover: var(--ds-pink-700);
    --ds-color-primary-active: var(--ds-pink-800);
    --ds-color-primary-subtle: var(--ds-pink-50);
    --ds-color-primary-subtle-border: var(--ds-pink-200);
    --ds-color-on-primary: var(--ds-graphite-0);

    /* Texto selecionado: sempre fundo claro + texto escuro (11,1:1), em
       qualquer superfície, inclusive o menu escuro */
    --ds-color-selection-bg: var(--ds-pink-200);
    --ds-color-selection-text: var(--ds-graphite-950);

    /* Ação secundária (neutra) */
    --ds-color-secondary: var(--ds-graphite-100);
    --ds-color-secondary-hover: var(--ds-graphite-150);
    --ds-color-secondary-active: var(--ds-graphite-200);
    --ds-color-on-secondary: var(--ds-graphite-900);

    /* Status (sempre com texto/ícone junto — nunca só a cor) */
    --ds-color-success-fg: var(--ds-green-700);
    --ds-color-success-bg: var(--ds-green-50);
    --ds-color-success-border: var(--ds-green-200);
    --ds-color-success-solid: var(--ds-green-600);
    --ds-color-success-icon: var(--ds-green-500);

    --ds-color-warning-fg: var(--ds-amber-700);
    --ds-color-warning-bg: var(--ds-amber-50);
    --ds-color-warning-border: var(--ds-amber-200);
    --ds-color-warning-icon: var(--ds-amber-500);

    --ds-color-danger-fg: var(--ds-red-700);
    --ds-color-danger-bg: var(--ds-red-50);
    --ds-color-danger-border: var(--ds-red-200);
    --ds-color-danger-solid: var(--ds-red-600);
    --ds-color-danger-solid-hover: var(--ds-red-700);
    --ds-color-danger-solid-active: var(--ds-red-800);

    --ds-color-info-fg: var(--ds-blue-700);
    --ds-color-info-bg: var(--ds-blue-50);
    --ds-color-info-border: var(--ds-blue-200);
    --ds-color-info-icon: var(--ds-blue-600);

    --ds-color-neutral-fg: var(--ds-graphite-700);
    --ds-color-neutral-bg: var(--ds-graphite-100);
    --ds-color-neutral-border: var(--ds-graphite-200);

    /* Navegação (sidebar escura) */
    --ds-color-nav-bg: var(--ds-graphite-950);
    --ds-color-nav-text: var(--ds-graphite-300);
    --ds-color-nav-text-active: var(--ds-graphite-0);
    --ds-color-nav-hover: rgba(255, 255, 255, .06);
    --ds-color-nav-indicator: var(--ds-color-brand);

    /* Foco (teclado): contorno framboesa com respiro */
    --ds-focus-ring: 0 0 0 3px rgba(191, 29, 96, .22);
    --ds-focus-outline: 2px solid var(--ds-color-border-focus);
    --ds-focus-offset: 2px;

    /* Tipografia — escala (tamanho / altura de linha / peso / espaçamento) */
    --ds-font: var(--ds-font-family-sans);

    --ds-text-display: 600 28px/36px var(--ds-font);
    --ds-text-display-tracking: -0.02em;
    --ds-text-page-title: 600 22px/28px var(--ds-font);
    --ds-text-page-title-tracking: -0.015em;
    --ds-text-section-title: 600 16px/24px var(--ds-font);
    --ds-text-section-title-tracking: -0.005em;
    --ds-text-heading: 600 14px/20px var(--ds-font);
    --ds-text-body: 400 14px/20px var(--ds-font);
    --ds-text-body-sm: 400 13px/18px var(--ds-font);
    --ds-text-label: 500 13px/18px var(--ds-font);
    --ds-text-caption: 400 12px/16px var(--ds-font);
    --ds-text-helper: 400 12px/16px var(--ds-font);

    /* Elevação: poucos níveis, sombras discretas */
    --ds-shadow-none: none;
    --ds-shadow-raised: 0 1px 2px rgba(23, 22, 31, .06);
    --ds-shadow-floating: 0 2px 4px rgba(23, 22, 31, .06), 0 8px 24px rgba(23, 22, 31, .12);
    --ds-shadow-overlay: 0 16px 48px rgba(23, 22, 31, .24);
    --ds-color-backdrop: rgba(23, 22, 31, .48);

    /* Camadas (alinhadas ao Bootstrap para conviver com ele) */
    --ds-z-dropdown: 1000;
    --ds-z-sticky: 1020;
    --ds-z-drawer: 1045;
    --ds-z-modal: 1055;
    --ds-z-popover: 1070;
    --ds-z-tooltip: 1080;
    --ds-z-toast: 1090;

    /* Layout */
    --ds-page-max-width: 1440px;
    --ds-page-gutter: var(--ds-space-6);
    --ds-sidebar-width: 260px;
    --ds-sidebar-width-collapsed: 72px;
    --ds-header-height: 64px;

    --ds-modal-sm: 400px;
    --ds-modal-md: 560px;
    --ds-modal-lg: 800px;
    --ds-modal-xl: 1140px;
    --ds-drawer-sm: 400px;
    --ds-drawer-md: 560px;
    --ds-drawer-lg: 720px;

    /* Densidade: confortável (padrão) */
    --ds-control-height: 36px;
    --ds-control-height-sm: 30px;
    --ds-control-height-lg: 40px;
    --ds-control-padding-x: var(--ds-space-3);
    --ds-table-cell-py: 10px;
    --ds-table-cell-px: var(--ds-space-3);
    --ds-field-gap: var(--ds-space-4);
    --ds-section-gap: var(--ds-space-6);
}

/*
 * Tema escuro: Preferências › Tema (html[data-theme="dark"]).
 * Só troca a FUNÇÃO das cores; os componentes não mudam. Contrastes
 * conferidos: texto 15,5:1 · apoio 5,2:1 · borda de campo 3,7:1 ·
 * link 7,3:1 · status ≥ 8,9:1. O primário (framboesa) é o mesmo do claro.
 */
:root[data-theme="dark"] {
    color-scheme: dark;

    --ds-color-bg: var(--ds-graphite-975);
    --ds-color-surface: var(--ds-graphite-900);
    --ds-color-surface-subtle: var(--ds-graphite-950);
    --ds-color-surface-sunken: var(--ds-graphite-950);
    --ds-color-surface-hover: var(--ds-graphite-800);
    --ds-color-surface-selected: rgba(238, 53, 131, .14);
    --ds-color-surface-readonly: var(--ds-graphite-950);

    --ds-color-border: var(--ds-graphite-800);
    --ds-color-border-subtle: var(--ds-graphite-800);
    --ds-color-border-strong: var(--ds-graphite-700);
    --ds-color-border-control: #76748A;
    --ds-color-border-focus: var(--ds-pink-400);

    --ds-color-text: var(--ds-graphite-50);
    --ds-color-text-secondary: var(--ds-graphite-300);
    --ds-color-text-muted: var(--ds-graphite-400);
    --ds-color-text-disabled: var(--ds-graphite-600);
    --ds-color-text-placeholder: var(--ds-graphite-500);
    --ds-color-text-inverse: var(--ds-graphite-950);
    --ds-color-text-link: var(--ds-pink-300);
    --ds-color-text-link-hover: var(--ds-pink-200);

    --ds-color-primary-subtle: rgba(238, 53, 131, .14);
    --ds-color-primary-subtle-border: var(--ds-pink-800);

    --ds-color-secondary: var(--ds-graphite-800);
    --ds-color-secondary-hover: var(--ds-graphite-700);
    --ds-color-secondary-active: var(--ds-graphite-600);
    --ds-color-on-secondary: var(--ds-graphite-50);

    --ds-color-success-fg: var(--ds-green-200);
    --ds-color-success-bg: rgba(42, 138, 90, .2);
    --ds-color-success-border: rgba(42, 138, 90, .45);

    --ds-color-warning-fg: var(--ds-amber-200);
    --ds-color-warning-bg: rgba(199, 125, 10, .2);
    --ds-color-warning-border: rgba(199, 125, 10, .45);

    --ds-color-danger-fg: var(--ds-red-200);
    --ds-color-danger-bg: rgba(184, 50, 28, .2);
    --ds-color-danger-border: rgba(184, 50, 28, .5);

    --ds-color-info-fg: var(--ds-blue-200);
    --ds-color-info-bg: rgba(36, 100, 172, .2);
    --ds-color-info-border: rgba(36, 100, 172, .5);

    --ds-color-neutral-fg: var(--ds-graphite-200);
    --ds-color-neutral-bg: var(--ds-graphite-800);
    --ds-color-neutral-border: var(--ds-graphite-700);

    --ds-color-nav-bg: var(--ds-graphite-1000);

    --ds-focus-ring: 0 0 0 3px rgba(230, 91, 149, .35);

    --ds-shadow-raised: 0 1px 2px rgba(0, 0, 0, .4);
    --ds-shadow-floating: 0 2px 4px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .5);
    --ds-shadow-overlay: 0 16px 48px rgba(0, 0, 0, .6);
    --ds-color-backdrop: rgba(0, 0, 0, .6);
}

/*
 * Densidade compacta: listas longas, telas de conferência, filtros extensos.
 * Uso: data-ds-density="compact" em qualquer contêiner.
 */
[data-ds-density="compact"] {
    --ds-control-height: 32px;
    --ds-control-height-sm: 28px;
    --ds-control-height-lg: 36px;
    --ds-control-padding-x: 10px;
    --ds-table-cell-py: 6px;
    --ds-table-cell-px: 10px;
    --ds-field-gap: var(--ds-space-3);
    --ds-section-gap: var(--ds-space-4);
}

/* Toque (tablet/celular): área mínima de toque */
@media (pointer: coarse) {
    :root {
        --ds-control-height: 40px;
        --ds-control-height-sm: 36px;
    }
}

@media (max-width: 991.98px) {
    :root {
        --ds-page-gutter: var(--ds-space-4);
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --ds-duration-fast: 0ms;
        --ds-duration-normal: 0ms;
        --ds-duration-slow: 0ms;
    }
}