/*
 * Tokens do design system do Hub (Missão) — ver DESIGN.md.
 * Único arquivo com cor crua e com seletor de tema. Claro é o padrão
 * (:root, também com data-theme="light"); data-theme="dark" no <html> liga o
 * escuro (static/js/tema-inicial.js e tema.js). Os nomes são os do Hub, sem o
 * prefixo --color-* do Tailwind.
 */

/* Fontes locais (SIL OFL 1.1, licenças em ../fonts/). url() sempre relativa,
   para herdar o endereço versionado /static/v-<hash>/. Subconjunto latin. */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Roboto variável: um arquivo cobre todos os pesos. */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/roboto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tema claro (padrão) */
:root,
[data-theme="light"] {
  color-scheme: light;

  --missao-primary: #fcbe26;
  --missao-header: oklch(0.09 0 0);

  --chart-1: #2a78d6;
  --chart-2: #008300;
  --chart-3: #e87ba4;
  --chart-4: #eda100;
  --chart-5: #1baf7a;
  --chart-6: #eb6834;
  --chart-7: #4a3aa7;
  --chart-8: #e34948;

  --background: #f7f8fa;
  --background-paper: oklch(1 0 0);
  --background-surface: #eef1f4;
  --background-muted: #f3f5f7;
  --background-text: oklch(0.175 0 0);
  --border: #e3e7ec;
  --muted: #f3f5f7;
  --muted-foreground: #5b6472;
  --ring: #b57d0f;
  --link: #9c680b;
  --input: #f3f5f7;
  --sidebar-background: #f9fafb;

  --surface-page: var(--background);
  --surface-card: var(--background-paper);
  --surface-subtle: var(--background-muted);
  /* srgb, como no Hub compilado e no Pulse: em oklch o branco/cinza tem matiz 0 e puxa o amarelo para o rosa. */
  --surface-selected: color-mix(in srgb, var(--missao-primary) 14%, var(--background-paper));

  --text-primary: var(--background-text);
  --text-secondary: #475467;
  --text-muted: var(--muted-foreground);
  --text-inverse: oklch(0.985 0 0);

  --state-info-bg: #eef4ff;
  --state-info-border: #b2ccff;
  --state-info-text: #175cd3;
  --state-neutral-bg: var(--background-muted);
  --state-neutral-border: var(--border);
  --state-neutral-text: var(--muted-foreground);
  --state-warning-bg: var(--warning-100);
  --state-warning-border: var(--warning-200);
  --state-warning-text: var(--warning-700);
  --state-danger-bg: var(--danger-100);
  --state-danger-border: var(--danger-200);
  --state-danger-text: var(--danger-700);
  --state-success-bg: var(--success-100);
  --state-success-border: var(--success-200);
  --state-success-text: var(--success-700);

  --action-primary: var(--missao-primary);
  --action-primary-hover: var(--primary-600);
  --action-primary-foreground: oklch(0.175 0 0);
  --action-secondary: var(--background-surface);
  --action-secondary-hover: var(--border);
  --action-secondary-foreground: var(--background-text);

  --elevation-card: 0 1px 2px -1px rgb(17 17 17 / 0.08), 0 2px 6px -1px rgb(17 17 17 / 0.08);
  --elevation-raised: 0 2px 4px -1px rgb(17 17 17 / 0.1), 0 6px 14px -2px rgb(17 17 17 / 0.12);
  --elevation-overlay: 0 4px 10px -2px rgb(17 17 17 / 0.12), 0 10px 24px -4px rgb(17 17 17 / 0.16);
  --elevation-modal: 0 8px 20px -6px rgb(17 17 17 / 0.2), 0 20px 48px -12px rgb(17 17 17 / 0.28);

  --primary-100: #fff7e0;
  --primary-200: #ffebb0;
  --primary-300: #ffdd7d;
  --primary-400: #ffce4a;
  --primary-500: #fcbe26;
  --primary-600: #dfa119;
  --primary-700: #b57d0f;
  --primary-800: #8f5f08;
  --primary-900: #734804;

  --secondary-100: #f9eef3;
  --secondary-200: #f1d6e3;
  --secondary-300: #e6b1cc;
  --secondary-400: #dc8eb9;
  --secondary-500: #d46ba8;
  --secondary-600: #b7538e;
  --secondary-700: #873b68;
  --secondary-800: #53223f;
  --secondary-900: #200916;

  --warning-100: #ffeedc;
  --warning-200: #fed9a7;
  --warning-300: #f8b920;
  --warning-400: #daa21b;
  --warning-500: #bd8c16;
  --warning-600: #966f0f;
  --warning-700: #6d4f08;
  --warning-800: #422f03;
  --warning-900: #190f00;

  --success-100: #eefdf7;
  --success-200: #8bf0cf;
  --success-300: #00e4ba;
  --success-400: #00cda7;
  --success-500: #00b190;
  --success-600: #008c72;
  --success-700: #006551;
  --success-800: #003c2f;
  --success-900: #00150f;

  --danger-100: #fbeeed;
  --danger-200: #f7d5d3;
  --danger-300: #f1ada9;
  --danger-400: #ed8780;
  --danger-500: #ea5d4e;
  --danger-600: #cb4939;
  --danger-700: #a83b2e;
  --danger-800: #6e241b;
  --danger-900: #250704;

  /* Vermelho sólido para fundo com texto branco (contraste AA). */
  --danger-solid: var(--danger-700);
  --danger-solid-hover: var(--danger-800);

  /* Extras do CRM */
  --skeleton: #e7ebf1;
  --skeleton-brilho: rgb(255 255 255 / 0.6);
}

/* Tema escuro */
[data-theme="dark"] {
  color-scheme: dark;

  --missao-primary: #fcbe26;
  --missao-header: oklch(1 0 0);

  --chart-1: #3987e5;
  --chart-2: #008300;
  --chart-3: #d55181;
  --chart-4: #c98500;
  --chart-5: #199e70;
  --chart-6: #d95926;
  --chart-7: #9085e9;
  --chart-8: #e66767;

  --background: oklch(0.09 0 0);
  --background-paper: oklch(0.145 0 0);
  --background-surface: oklch(0.205 0 0);
  --background-muted: oklch(0.18 0 0);
  --background-text: oklch(0.985 0 0);
  --border: oklch(0.25 0 0);
  --muted: oklch(0.205 0 0);
  --muted-foreground: oklch(0.68 0 0);
  --ring: var(--missao-primary);
  --link: var(--missao-primary);
  --input: oklch(0.205 0 0);
  --sidebar-background: oklch(0.125 0 0);

  --surface-page: var(--background);
  --surface-card: var(--background-paper);
  --surface-subtle: var(--background-muted);
  --surface-selected: color-mix(in srgb, var(--missao-primary) 16%, var(--background-paper));

  --text-primary: var(--background-text);
  --text-secondary: oklch(0.78 0 0);
  --text-muted: var(--muted-foreground);
  --text-inverse: oklch(0.175 0 0);

  --state-info-bg: #102a56;
  --state-info-border: #194185;
  --state-info-text: #84adff;
  --state-neutral-bg: var(--background-muted);
  --state-neutral-border: var(--border);
  --state-neutral-text: var(--muted-foreground);
  --state-warning-bg: var(--warning-100);
  --state-warning-border: var(--warning-300);
  --state-warning-text: var(--warning-800);
  --state-danger-bg: var(--danger-100);
  --state-danger-border: var(--danger-300);
  --state-danger-text: var(--danger-800);
  --state-success-bg: var(--success-100);
  --state-success-border: var(--success-300);
  --state-success-text: var(--success-800);

  --action-primary: var(--missao-primary);
  --action-primary-hover: var(--primary-400);
  --action-primary-foreground: oklch(0.175 0 0);
  --action-secondary: var(--background-surface);
  --action-secondary-hover: color-mix(in oklch, var(--background-surface) 82%, var(--background-text));
  --action-secondary-foreground: var(--background-text);

  --elevation-card: 0 1px 2px -1px rgb(0 0 0 / 0.5), 0 2px 6px -1px rgb(0 0 0 / 0.5);
  --elevation-raised: 0 2px 6px -1px rgb(0 0 0 / 0.6), 0 8px 18px -4px rgb(0 0 0 / 0.6);
  --elevation-overlay: 0 6px 16px -4px rgb(0 0 0 / 0.6), 0 12px 28px -6px rgb(0 0 0 / 0.7);
  --elevation-modal: 0 12px 28px -8px rgb(0 0 0 / 0.7), 0 24px 56px -16px rgb(0 0 0 / 0.8);

  /* A marca não muda entre temas. */
  --primary-100: #fff7e0;
  --primary-200: #ffebb0;
  --primary-300: #ffdd7d;
  --primary-400: #ffce4a;
  --primary-500: #fcbe26;
  --primary-600: #dfa119;
  --primary-700: #b57d0f;
  --primary-800: #8f5f08;
  --primary-900: #734804;

  /* As demais escalas são espelhadas: 100 vira o tom mais escuro. */
  --secondary-100: #200916;
  --secondary-200: #53223f;
  --secondary-300: #873b68;
  --secondary-400: #b7538e;
  --secondary-500: #d46ba8;
  --secondary-600: #dc8eb9;
  --secondary-700: #e6b1cc;
  --secondary-800: #f1d6e3;
  --secondary-900: #f9eef3;

  --warning-100: #190f00;
  --warning-200: #422f03;
  --warning-300: #6d4f08;
  --warning-400: #966f0f;
  --warning-500: #bd8c16;
  --warning-600: #daa21b;
  --warning-700: #f8b920;
  --warning-800: #fed9a7;
  --warning-900: #ffeedc;

  --success-100: #00150f;
  --success-200: #003c2f;
  --success-300: #006551;
  --success-400: #008c72;
  --success-500: #00b190;
  --success-600: #00cda7;
  --success-700: #00e4ba;
  --success-800: #00fed0;
  --success-900: #b9ffe8;

  --danger-100: #250704;
  --danger-200: #6e241b;
  --danger-300: #a83b2e;
  --danger-400: #cb4939;
  --danger-500: #ea5d4e;
  --danger-600: #ed8780;
  --danger-700: #f1ada9;
  --danger-800: #f7d5d3;
  --danger-900: #fbeeed;

  --danger-solid: var(--danger-300);
  --danger-solid-hover: var(--danger-200);

  /* Extras do CRM */
  --skeleton: oklch(0.225 0 0);
  --skeleton-brilho: rgb(255 255 255 / 0.08);
}

/* Iguais nos dois temas: fontes, forma e extras do CRM */
:root {
  --font-sans: "Roboto", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --raio-badge: 4px;
  --raio-md: 6px;
  --raio-lg: 8px;
  --raio-xl: 12px;
  --altura-controle: 36px;
  --altura-cabecalho: 56px;
  --largura-lateral: 17rem;

  --veu: rgb(0 0 0 / 0.1);
  --branco: #ffffff;
  /* Placa do logo (preto) na lateral e no login: branca nos dois temas, como no Pulse. */
  --placa-logo: #ffffff;
}

/* Lateral mais estreita em telas médias (mesma quebra do Pulse). */
@media (max-width: 1180px) {
  :root {
    --largura-lateral: 240px;
  }
}