/* ==========================================================================
   Design Tokens — copiados fielmente do sysrep
   Alterar aqui reflete em todo o sistema.
   ========================================================================== */

:root {
    /* ---- Cores principais (idênticas ao sysrep) ---- */
    --primary-color:   #64748b;
    --primary-hover:   #475569;
    --secondary-color: #94a3b8;

    --sidebar-bg:    #4b5563;
    --sidebar-hover: #374151;

    --text-light: #f8fafc;
    /* Dois degraus do mesmo branco para hierarquia de TEXTO sobre painel escuro
       (rotulo secundario, legenda). Alfa e proposital: eles precisam deixar o
       fundo escuro atravessar, entao nao sao cinza chapado. */
    --text-light-soft:  rgba(248, 250, 252, 0.78);
    --text-light-muted: rgba(248, 250, 252, 0.65);
    --text-dark:  #1e293b;
    /* Superficie quase-preta: fundo de marca (painel do login). Existe porque
       --text-dark e token de TEXTO — usa-lo como fundo era erro de semantica, e
       nao havia nada mais escuro na escala. */
    --surface-deep: #0f172a;
    /* Veu de drawer e modal. Preto translucido de proposito: o trabalho dele e
       escurecer o que esta ATRAS, entao nao pode ser cor da paleta. */
    --scrim: rgba(0, 0, 0, 0.5);
    --text-muted: #64748b;

    --border-color: #cbd5e1;
    --border-light: #e2e8f0;

    --bg-gray: #f1f5f9;
    --bg-page: #f8fafc;
    --input-bg: #ffffff;

    /* ---- Sombras ---- */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.25);
    /* Três sombras que não são degrau de elevação de superfície: cada uma faz um
       trabalho que sm/md/lg não fazem, por isso não entram na escala. --shadow-pop
       destaca peça pequena que flutua (botão redondo, marca sobre painel escuro);
       --shadow-drag é o card enquanto está sendo arrastado; --shadow-bar projeta
       para CIMA, para barra fixa no pé da tela. */
    --shadow-pop:  0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-drag: 0 10px 24px rgba(2, 6, 23, 0.2);
    --shadow-bar:  0 -4px 12px rgba(0, 0, 0, 0.15);
    /* --shadow-bar-soft é o mesmo papel do --shadow-bar (barra fixa no pé da
       tela) para quando ela precisa ser discreta, não chamar atenção. */
    --shadow-bar-soft: 0 -2px 6px rgba(0, 0, 0, 0.05);

    /* ---- Tipografia ---- */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* ---- Dimensões do shell ---- */
    --sidebar-width:           220px;
    --sidebar-collapsed-width: 56px;  /* rail fixo de ícones (estilo Zendesk) */

    /* ---- Raios ---- */
    --radius-sm:   2px;
    --radius:      4px;
    --radius-md:   6px;
    --radius-lg:   8px;
    --radius-pill: 999px; /* pílula — badge, chip, toggle, segmented control */

    /* ---- Cores de status ---- */
    --color-blue:   #3b82f6;
    --color-green:  #10b981;
    --color-red:    #ef4444;
    --color-amber:  #f59e0b;
    --color-indigo: #6366f1;

    /* ---- Ramos de cor p/ superficies de feedback (DESIGN.md) ----
       fundo tingido + borda/icone "mid" + texto "text" da mesma familia.
       Usados por componentes de alerta (ex.: toast) que precisam de
       contraste de texto adequado sobre fundo colorido. */
    --color-red-bg:    #fee2e2;
    --color-red-mid:   #dc2626;
    --color-red-text:  #991b1b;
    --color-amber-bg:   #fef3c7;
    --color-amber-mid:  #d97706;
    --color-amber-text: #92400e;
    --color-green-bg:   #d1fae5;
    --color-green-mid:  #16a34a;
    --color-green-text: #065f46;
    --color-blue-bg:    #dbeafe;
    --color-blue-mid:   #2563eb;
    --color-blue-text:  #1e3a8a;

    /* ---- Degraus que faltavam nas famílias de status ----
       A rampa saltava do fundo tingido (-bg) direto para a borda (-mid) e o texto
       (-text). Sem o claro de realce, o tom de borda e o escuro de ênfase, cada tela
       escolhia sozinha um hexadecimal vizinho — e a família deixava de ser família.
       Ordem do claro ao escuro: -soft, -bg, -line, -mid, -deep, -text. */
    --color-green-soft: #ecfdf5;
    --color-green-line: #a7f3d0;
    --color-green-deep: #047857;
    --color-amber-soft: #fffbeb;
    --color-amber-line: #fde68a;
    --color-amber-deep: #b45309;
    --color-red-soft:   #fef2f2;
    --color-red-line:   #fca5a5;
    --color-red-deep:   #b91c1c;
    --color-blue-soft:  #eff6ff;
    --color-blue-deep:  #1d4ed8;

    /* ---- Tinta translúcida ----
       Chip e realce que precisam deixar a superfície de baixo aparecer. É canal alfa,
       não cor da paleta: o valor final depende do que está atrás, então nenhum
       hexadecimal chapado faz o mesmo trabalho — mesma razão do --scrim.
       Quatro degraus por família. Se um tom novo não couber em nenhum, o degrau é que
       está errado — não crie um alfa avulso. */
    --wash-green-soft:   rgba(16, 185, 129, 0.06);
    --wash-green:        rgba(16, 185, 129, 0.12);
    --wash-green-strong: rgba(16, 185, 129, 0.18);
    --wash-green-heavy:  rgba(16, 185, 129, 0.30);

    --wash-blue-soft:    rgba(59, 130, 246, 0.06);
    --wash-blue:         rgba(59, 130, 246, 0.12);
    --wash-blue-strong:  rgba(59, 130, 246, 0.18);
    --wash-blue-heavy:   rgba(59, 130, 246, 0.30);

    --wash-amber-soft:   rgba(245, 158, 11, 0.06);
    --wash-amber:        rgba(245, 158, 11, 0.12);
    --wash-amber-strong: rgba(245, 158, 11, 0.18);
    --wash-amber-heavy:  rgba(245, 158, 11, 0.30);

    --wash-red-soft:     rgba(239, 68, 68, 0.06);
    --wash-red:          rgba(239, 68, 68, 0.12);
    --wash-red-strong:   rgba(239, 68, 68, 0.18);
    --wash-red-heavy:    rgba(239, 68, 68, 0.30);

    /* Slate da cor primária — anel de foco e realce neutro. */
    --wash-primary:        rgba(100, 116, 139, 0.12);
    --wash-primary-strong: rgba(100, 116, 139, 0.18);

    /* Branco sobre superfície escura (painel de marca, seletor). */
    --wash-light-soft:   rgba(255, 255, 255, 0.06);
    --wash-light:        rgba(255, 255, 255, 0.12);
    --wash-light-strong: rgba(255, 255, 255, 0.18);
    --wash-light-heavy:  rgba(255, 255, 255, 0.30);

    /* Preto neutro. Só dois degraus: o resto dos pretos do projeto é sombra
       (--shadow-*) ou máscara, não tinta. */
    --wash-ink-soft: rgba(0, 0, 0, 0.06);
    --wash-ink:      rgba(0, 0, 0, 0.12);

    /* ---- Impressão ----
       Papel não usa a paleta de tela: o cinza slate sai lavado na impressora e o
       preto de tela não é preto de tinta. Escala própria, curta de propósito. */
    --print-paper:  #fff;
    --print-ink:    #000;
    --print-ink-2:  #222;
    --print-ink-3:  #444;
    --print-ink-4:  #555;
    --print-mute:   #888;
    --print-rule:   #ccc;
    --print-band:   #eee;
    --print-link:   var(--color-blue-deep);
    --print-shadow: rgba(0, 0, 0, 0.08);
}