/*
 * Unitax: tokens do template de painel (fonte unica de verdade).
 * Origem das decisoes: template de referencia em tons de verde, medido em
 * 2026-11-09 (ver 04-tokens/TOKENS.md no pacote da tarefa). Sem !important:
 * todo estilo do template deriva destes tokens.
 *
 * Camadas:
 *   1. :root                      paleta clara (padrao) e escalas
 *   2. [data-utx-role=...]        acento por tipo de acesso
 *   3. [data-utx-theme="dark"]    paleta escura (definida, ainda nao ativada)
 */

:root {
    /* Escala de verdes (claro -> escuro) */
    --utx-green-50: #F4F9F4;
    --utx-green-100: #EEF5EE;
    --utx-green-150: #E8F2E8;
    --utx-green-200: #E1EFDD;
    --utx-green-300: #B2CBBE;
    --utx-green-500: #236B45;
    --utx-green-600: #285D3E;
    --utx-green-700: #195333;
    --utx-green-800: #19382A;
    --utx-green-900: #13221A;

    /* Superficies */
    --utx-bg: var(--utx-green-150);
    --utx-panel: var(--utx-green-50);
    --utx-surface: #FFFFFF;
    --utx-surface-2: var(--utx-green-100);
    --utx-soft: var(--utx-green-200);
    --utx-border: var(--utx-green-300);

    /* Texto */
    --utx-text: var(--utx-green-800);
    --utx-muted: #44584C;
    --utx-faint: #53675A;
    --utx-ink: var(--utx-green-600);

    /* Marca (acao principal) */
    --utx-primary: var(--utx-green-500);
    --utx-primary-hover: var(--utx-green-700);
    --utx-primary-active: #14452A;
    --utx-primary-subtle: var(--utx-green-200);
    --utx-on-primary: #FFFFFF;
    /* Texto sobre o solido de aviso: --utx-green-900 da 5,61:1 em --utx-warning
       (o --utx-text da referencia dava 4,35:1; divergencia D2). */
    --utx-on-warning: var(--utx-green-900);
    --utx-primary-rgb: 35, 107, 69;
    --utx-focus: var(--utx-green-500);
    --utx-control-border: var(--utx-green-500);

    /* Sidebar */
    --utx-sidebar-bg: var(--utx-bg);
    --utx-sidebar-text: var(--utx-muted);
    --utx-sidebar-text-hover: var(--utx-text);
    --utx-sidebar-hover-bg: rgba(25, 56, 42, 0.05);
    --utx-sidebar-active-bg: var(--utx-surface);
    --utx-sidebar-active-text: var(--utx-ink);
    --utx-sidebar-active-ring: var(--utx-border);
    --utx-sidebar-cap: var(--utx-faint);
    --utx-sidebar-icon-bg: rgba(225, 239, 221, 0.62);
    --utx-sidebar-icon-fg: var(--utx-ink);
    --utx-sidebar-icon-active-bg: var(--utx-primary);
    --utx-sidebar-icon-active-fg: var(--utx-on-primary);

    /* Feedback: solido / fundo suave / texto (ink) */
    --utx-success: #2B7A64;
    --utx-success-soft: #E0EFE9;
    --utx-success-ink: #22634F;
    --utx-danger: #B0412B;
    --utx-danger-soft: #F7E6E1;
    --utx-danger-ink: #9A3824;
    --utx-warning: #C98A1E;
    --utx-warning-soft: #F8EEDA;
    --utx-warning-ink: #8F5D0C;
    --utx-info: #3567C9;
    --utx-info-soft: #E3ECFB;
    --utx-info-ink: #234F9E;
    --utx-neutral-soft: rgba(25, 56, 42, 0.05);
    --utx-neutral-ink: var(--utx-muted);
    --utx-disabled-bg: rgba(25, 56, 42, 0.05);
    --utx-disabled-text: var(--utx-faint);

    /* Linhas e aneis (bordas sao aneis de box-shadow, como na referencia) */
    --utx-line: rgba(25, 56, 42, 0.09);
    --utx-ring: rgba(25, 56, 42, 0.16);
    --utx-ring-soft: rgba(25, 56, 42, 0.08);
    /* Contorno de campo: 53% de --utx-text da 3,03:1 sobre branco (WCAG 1.4.11);
       os 16% da referencia davam 1,35:1 (ver 04-tokens/TOKENS.md, divergencia D1). */
    --utx-ring-control: rgba(25, 56, 42, 0.53);

    /* Tipografia */
    --utx-font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --utx-font-display: "Bricolage Grotesque", "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
    --utx-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --utx-text-xs: 12px;
    --utx-text-sm: 13px;
    --utx-text-md: 14px;
    --utx-text-lg: 15px;
    --utx-text-title: 22px;
    --utx-leading: 1.5;
    --utx-weight-regular: 400;
    --utx-weight-medium: 500;
    --utx-weight-semibold: 600;
    --utx-weight-bold: 700;
    --utx-tracking-title: -0.02em;

    /* Espacos */
    --utx-space-1: 4px;
    --utx-space-2: 8px;
    --utx-space-3: 12px;
    --utx-space-4: 16px;
    --utx-space-5: 20px;
    --utx-space-6: 24px;
    --utx-space-8: 32px;

    /* Raios */
    --utx-radius-xs: 8px;
    --utx-radius-sm: 10px;
    --utx-radius-md: 12px;
    --utx-radius-lg: 16px;
    --utx-radius-xl: 24px;
    --utx-radius-pill: 999px;

    /* Sombras */
    --utx-shadow-card: 0 0 0 1px rgba(25, 56, 42, 0.09), 0 1px 0 0 rgba(25, 56, 42, 0.06);
    --utx-shadow-control: 0 0 0 1px var(--utx-ring-control);
    --utx-shadow-btn: 0 1px 2px rgba(18, 24, 56, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    --utx-shadow-btn-secondary: 0 0 0 1px rgba(25, 56, 42, 0.16), 0 1px 2px rgba(18, 24, 56, 0.05);
    --utx-shadow-pop: 0 28px 70px -22px rgba(25, 56, 42, 0.15), 0 2px 8px rgba(25, 56, 42, 0.08);
    --utx-shadow-focus: 0 0 0 1px var(--utx-focus), 0 0 0 4px var(--utx-soft);
    --utx-backdrop: rgba(9, 12, 28, 0.42);

    /* Medidas do shell */
    --utx-sidebar-w: 264px;
    --utx-sidebar-w-collapsed: 78px;
    --utx-drawer-w: min(300px, 86vw);
    --utx-topbar-h: 60px;
    --utx-tabbar-h: 62px;
    --utx-panel-gap: 10px;
    --utx-gutter: 24px;
    --utx-control-h: 38px;
    --utx-btn-h: 36px;
    --utx-target-min: 24px;

    /* Breakpoints (referencia; CSS usa os literais em @media) */
    --utx-bp-drawer: 991.98px;
    --utx-bp-tabbar: 720px;
    --utx-bp-compact: 560px;

    /* Camadas */
    --utx-z-topbar: 20;
    --utx-z-dropdown: 1000;
    --utx-z-backdrop: 1030;
    --utx-z-tabbar: 1035;
    --utx-z-drawer: 1040;
    --utx-z-modal: 1055;
    --utx-z-toast: 2050;

    /* Movimento */
    --utx-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --utx-dur-fast: 0.12s;
    --utx-dur-base: 0.2s;
    --utx-dur-collapse: 0.35s;
    --utx-dur-enter: 0.5s;

    color-scheme: light;
}

/* Acento por tipo de acesso: todos na familia verde, todos com AA sobre branco
   (texto branco sobre o solido >= 4,5:1). */
[data-utx-role="admin"] {
    --utx-primary: #1E4D36;
    --utx-primary-hover: #163B29;
    --utx-primary-active: #11301F;
    --utx-primary-rgb: 30, 77, 54;
    --utx-focus: #1E4D36;
    --utx-control-border: #1E4D36;
}

[data-utx-role="agent"] {
    --utx-primary: #1D6656;
    --utx-primary-hover: #154F42;
    --utx-primary-active: #114236;
    --utx-primary-rgb: 29, 102, 86;
    --utx-focus: #1D6656;
    --utx-control-border: #1D6656;
}

/* Paleta escura: definida a partir da referencia, mantida inativa porque o
   conteudo legado das telas ainda tem cores fixas (ver relatorio). */
[data-utx-theme="dark"] {
    --utx-bg: #13221A;
    --utx-panel: #172D21;
    --utx-surface: #1C3427;
    --utx-surface-2: #213C2D;
    --utx-soft: #254D35;
    --utx-border: #3A6B4E;
    --utx-text: #E6F0E8;
    --utx-muted: #B6CDBD;
    --utx-faint: #A3BCAB;
    --utx-ink: #96D5AB;
    --utx-focus: #96D5AB;
    --utx-control-border: #96D5AB;
    --utx-line: rgba(0, 0, 0, 0.35);
    --utx-ring: rgba(150, 213, 171, 0.22);
    --utx-ring-soft: rgba(150, 213, 171, 0.12);
    --utx-ring-control: rgba(150, 213, 171, 0.52);
    --utx-sidebar-icon-bg: rgba(37, 77, 53, 0.62);
    --utx-sidebar-hover-bg: rgba(255, 255, 255, 0.05);
    color-scheme: dark;
}