/*
 * Maldonado Gestão — tokens do design system.
 * Fonte única das cores/tipografia: app.css e tracking.css só consomem estas variáveis.
 *
 * As quatro cores de marca foram MEDIDAS na logo oficial (média de pixels por região):
 *   --brand-cyan   #00EDE7  símbolo "M" (topo) e subtítulo "DESIGNER GRAFICO"
 *   --brand-teal   #008095  wordmark "MALDONADO"
 *   --brand-petrol #00597B  base do "M" (lado direito; lado esquerdo #005175)
 *   --brand-deep   #003053  ponto mais escuro do degradê do "M"
 * Todo o resto (escalas, neutros, semânticas) deriva delas. Nada de cores avulsas nas telas.
 */
@font-face {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("/assets/fonts/outfit-latin.woff2") format("woff2");
}

:root {
    /* ---- Marca (extraídas da logo) ---- */
    --brand-cyan: #00ede7;
    --brand-teal: #008095;
    --brand-petrol: #00597b;
    --brand-deep: #003053;

    /* ---- Escala do primário (teal -> petróleo) ---- */
    --teal-50: #eaf7f9;
    --teal-100: #d3eef2;
    --teal-200: #a6dde6;
    --teal-500: #008095;   /* primário: botões, links, foco (contraste 4,65:1 com branco) */
    --teal-600: #006c80;   /* hover */
    --teal-700: #00597b;   /* pressionado / texto forte sobre claro */
    --teal-900: #003053;

    /* ---- Ciano: só destaque (nunca como texto sobre branco: contraste baixo) ---- */
    --cyan-50: #e6fffe;
    --cyan-100: #bffbf9;
    --cyan-400: #00ede7;

    /* ---- Neutros frios (mesmo matiz azul-petróleo da marca) ---- */
    --ink-900: #0b2433;    /* texto principal */
    --ink-700: #2b4350;
    --ink-500: #566e7c;    /* texto secundário (contraste 5,2:1 sobre branco) */
    --ink-300: #b6c8d0;
    --ink-200: #d6e3e8;    /* bordas */
    --ink-100: #e9f1f4;
    --ink-50: #f3f8fa;     /* fundo da aplicação */

    /* ---- Semânticas ---- */
    --ok-500: #1b8a5a;  --ok-bg: #e5f6ee;  --ok-text: #14633f;
    --warn-500: #b7791f; --warn-bg: #fff3d6; --warn-text: #7f5200;
    --err-500: #c23b32;  --err-bg: #fdecea;  --err-text: #8e2a24;
    /* WhatsApp: verde próprio da ação externa, escurecido para contraste 5,0:1 com texto branco */
    --wa-500: #178043;  --wa-600: #126b38;

    /* ---- Gradientes (o do "M": ciano -> teal -> petróleo) ---- */
    --gradient-mark: linear-gradient(180deg, #00ede7 0%, #008095 58%, #00597b 100%);
    --gradient-bar: linear-gradient(90deg, #00ede7 0%, #008095 55%, #00597b 100%);
    --gradient-cta: linear-gradient(135deg, #008095 0%, #00597b 100%);

    /* ---- Forma, sombra e tipografia ---- */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(0, 48, 83, .06);
    --shadow-md: 0 4px 16px rgba(0, 48, 83, .08);
    --shadow-lg: 0 12px 32px rgba(0, 48, 83, .14);
    --ring: 0 0 0 3px rgba(0, 237, 231, .35);
    --font-display: "Outfit", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /* ---- Apelidos usados pelas telas (mantêm o contrato anterior do CSS) ---- */
    --bg: var(--ink-50);
    --surface: #ffffff;
    --text: var(--ink-900);
    --muted: var(--ink-500);
    --border: var(--ink-200);
    --primary: var(--teal-500);
    --primary-hover: var(--teal-600);
    --primary-soft: var(--teal-50);
    --danger: var(--err-500);
    --danger-bg: var(--err-bg);
    --danger-text: var(--err-text);
    --success-bg: var(--ok-bg);
    --success-text: var(--ok-text);
    --info-bg: var(--teal-50);
    --info-text: var(--teal-700);
    --neutral-bg: var(--ink-100);
    --neutral-text: var(--ink-700);
    --focus: var(--teal-500);
    --sidebar-w: 248px;
}