/* =========================================================================
   Tokens do design system (KORPO). So variaveis e as duas fontes: nenhuma
   regra de seletor aqui. Carrega DEPOIS do app.css (que e do upstream e nao
   se mexe) e sobrescreve por ordem, sem !important.

   COMO TROCAR A MARCA (outra empresa): mude o bloco MARCA (6 linhas). Botoes,
   links, barra do topo, avisos e login derivam dele. Para outro TOM de fundo
   e texto (ex.: marfim), mude tambem o bloco NEUTROS (opcional), logo abaixo:
   6 variaveis = marca; marca + neutros = outro tom. O escuro e separado.
   ========================================================================= */

/* ------------------------------------------------------------- fontes ---- */
/* As fontes ficam aqui (e so aqui): a CSP so aceita o proprio dominio. */
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/Geist-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "Unbounded"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("/static/fonts/Unbounded-Variable.woff2") format("woff2");
}

/* =========================================================== TEMA CLARO === */
:root {
  /* ---- MARCA: troque aqui por empresa (6 linhas) ----------------------- */
  --brand-accent: #2f6feb;            /* cor de acao: botao principal, foco, links */
  --brand-accent-strong: #1f56c3;     /* a mesma, mais escura: hover e texto sobre claro */
  --brand-chrome: #17233d;            /* barra do topo e fundo da tela de entrada */
  --brand-mark: url("/static/img/e5-marca.svg");   /* simbolo da marca (SVG) */
  --font-display: "Unbounded", "Geist", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Geist", -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- NEUTROS (opcional): so mude para trocar o TOM (ex.: marfim) ------ */
  /* Sao 5 cores + a base da sombra; fundo afundado, hover, borda forte e
     dica de campo saem delas (bloco "Neutros" mais abaixo). */
  --bg-app: #f4f5f7;                  /* fundo da tela */
  --bg-surface: #ffffff;              /* cartoes e campos */
  --line: #dfe1e6;                    /* bordas */
  --text: #172b4d;                    /* texto */
  --text-soft: #536179;               /* texto de apoio */
  --shadow-base: #091e42;             /* cor das sombras e da pelicula */

  /* ---- Derivados da marca (nao mexer ao trocar de empresa) ------------- */
  --accent: var(--brand-accent);
  --accent-strong: var(--brand-accent-strong);
  --accent-text: var(--brand-accent-strong);   /* acento quando e TEXTO (precisa de contraste) */
  --accent-bg: color-mix(in srgb, var(--brand-accent) 10%, #ffffff);
  --on-accent: #ffffff;                        /* texto sobre fundo de acento */
  --topbar: var(--brand-chrome);
  --topbar-hover: color-mix(in srgb, var(--brand-chrome) 90%, #ffffff);
  --on-topbar: #ffffff;
  --font: var(--font-body);
  --auth-bg: linear-gradient(150deg,
               color-mix(in srgb, var(--brand-chrome) 55%, #000000),
               var(--brand-chrome) 55%,
               color-mix(in srgb, var(--brand-accent-strong) 70%, var(--brand-chrome)));

  /* ---- Neutros derivados dos 5 do bloco NEUTROS (nao mexer) ------------ */
  --bg-card: var(--bg-surface);      /* usado pelo upstream (Financeiro) e nunca definido */
  --bg-sunken: color-mix(in srgb, var(--bg-app) 96%, var(--text));
  --bg-hover: color-mix(in srgb, var(--bg-app) 92.6%, var(--text));
  --text-placeholder: color-mix(in srgb, var(--text-soft) 92%, var(--bg-surface));
  --line-strong: color-mix(in srgb, var(--line) 85.5%, var(--text));
  --scrim: color-mix(in srgb, var(--shadow-base) 62%, transparent);
  --paper: #ffffff;                  /* papel: sempre branco nos 2 temas (QR code precisa) */
  --accent-hover-edge: var(--accent-strong);   /* borda do botao principal no hover (escuro: clara) */
  --toast-border: transparent;                 /* aviso rapido: borda so no escuro */

  /* ---- Estados: texto/icone (--x), fundo cheio (--x-solid), aviso (-bg/-fg) */
  --ok: #1f845a;       --ok-solid: #177148;      --ok-bg: #e2f4ec;      --ok-fg: #176b47;
  --warn: #b45309;     --warn-solid: #a24a08;    --warn-bg: #fdf1e3;    --warn-fg: #8f4106;
  --danger: #c9372c;   --danger-solid: #c9372c;  --danger-bg: #fdecea;  --danger-fg: #a52a20;
  --info: var(--accent-text);
  --info-bg: var(--accent-bg);
  --info-fg: var(--accent-text);
  --neutral-bg: var(--bg-sunken);
  --neutral-fg: var(--text-soft);

  /* ---- Marca de terceiro: botao "abrir no Zapia". Igual em qualquer marca. - */
  --zapia: #0f7e74;    --zapia-strong: #0c6a62;

  /* ---- Espaco, tipografia, forma --------------------------------------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 48px;

  --fs-xs: 12px;  --fs-sm: 13px;  --fs-md: 14px;  --fs-lg: 16px;
  --fs-xl: 20px;  --fs-2xl: 24px; --fs-3xl: 32px;
  --fw-normal: 400; --fw-medium: 500; --fw-strong: 600;
  --lh-tight: 1.2;  --lh: 1.45;

  --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; --radius-pill: 9999px;
  --shadow-card: 0 1px 1px color-mix(in srgb, var(--shadow-base) 25%, transparent),
                 0 0 1px color-mix(in srgb, var(--shadow-base) 15%, transparent);
  --shadow-pop: 0 8px 16px -4px color-mix(in srgb, var(--shadow-base) 25%, transparent),
                0 0 1px color-mix(in srgb, var(--shadow-base) 30%, transparent);

  /* ---- Controles: altura dos botoes/campos e alvo de toque ------------- */
  --control-sm: 32px; --control: 40px; --control-lg: 44px;
  --touch: 44px;                         /* minimo em tela de toque (WCAG 2.5.5) */

  /* ---- Camadas, foco, movimento ---------------------------------------- */
  --z-topbar: 40; --z-popover: 60; --z-modal: 100; --z-toast: 300;
  --focus-color: var(--accent-text);
  --focus-width: 2px;
  --focus-offset: 2px;
  --dur: 160ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ========================================================== TEMA ESCURO === */
/* Duas portas, o mesmo conteudo: preferencia do sistema (se a pessoa nao
   escolheu "claro") e escolha manual com data-theme="dark". Um teste exige
   que os dois blocos sejam identicos: mudou um, mude o outro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* IGUAL ao bloco :root[data-theme="dark"] logo abaixo: mudou um, mude o outro
       (o teste test_escuro_identico_na_media_query_e_no_data_theme reprova se divergirem). */
    --accent-text: color-mix(in srgb, var(--brand-accent) 60%, #ffffff);
    --accent-bg: color-mix(in srgb, var(--brand-accent) 18%, #22272b);
    --topbar: var(--brand-chrome);
    --topbar-hover: color-mix(in srgb, var(--brand-chrome) 90%, #ffffff);

    --bg-app: #1d2125; --bg-surface: #22272b; --bg-sunken: #282e33; --bg-hover: #2c333a;
    --text: #b6c2cf; --text-soft: #9fadbc; --text-placeholder: #8c9bab;
    --line: #38414a; --line-strong: #4c5763;
    --scrim: rgba(0, 0, 0, .62);
    --shadow-card: 0 1px 1px rgba(0, 0, 0, .5);
    --shadow-pop: 0 8px 16px -4px rgba(0, 0, 0, .6), 0 0 1px rgba(0, 0, 0, .7);

    --ok: #4bce97;     --ok-bg: #1f3329;     --ok-fg: #4bce97;
    --warn: #e2a03f;   --warn-bg: #3a2f1c;   --warn-fg: #e2a03f;
    --danger: #ff8f85; --danger-bg: #3a2523; --danger-fg: #ff8f85;

    /* Fundos cheios: um degrau mais claros para nao sumirem no cartao escuro (>= 3:1). */
    --ok-solid: #1f845a; --warn-solid: #b8590b;
    --zapia: #108379;    --zapia-strong: #0f7e74;
    --accent-hover-edge: var(--accent-text);   /* hover do principal: fundo igual + borda clara */
    --toast-border: var(--line-strong);

    /* Etiquetas do upstream usadas como fundo de aviso: tom escuro no escuro. */
    --l-green-subtle: #28403b;  --l-yellow-subtle: #42402f; --l-orange-subtle: #433a33;
    --l-red-subtle: #423234;    --l-purple-subtle: #353748; --l-blue-subtle: #2a394b;
    --l-sky-subtle: #2d3e46;    --l-lime-subtle: #333f2f;   --l-pink-subtle: #403341;
    --l-black-subtle: #31373d;
    --l-blue-bold: #85b8ff; --l-purple-bold: #b8acf6; --l-green-bold: #7ee2b8; --l-yellow-bold: #f5cd47;
  }
}
:root[data-theme="dark"] {
  /* IGUAL ao bloco @media (prefers-color-scheme: dark) acima: mudou um, mude o outro. */
  --accent-text: color-mix(in srgb, var(--brand-accent) 60%, #ffffff);
  --accent-bg: color-mix(in srgb, var(--brand-accent) 18%, #22272b);
  --topbar: var(--brand-chrome);
  --topbar-hover: color-mix(in srgb, var(--brand-chrome) 90%, #ffffff);

  --bg-app: #1d2125; --bg-surface: #22272b; --bg-sunken: #282e33; --bg-hover: #2c333a;
  --text: #b6c2cf; --text-soft: #9fadbc; --text-placeholder: #8c9bab;
  --line: #38414a; --line-strong: #4c5763;
  --scrim: rgba(0, 0, 0, .62);
  --shadow-card: 0 1px 1px rgba(0, 0, 0, .5);
  --shadow-pop: 0 8px 16px -4px rgba(0, 0, 0, .6), 0 0 1px rgba(0, 0, 0, .7);

  --ok: #4bce97;     --ok-bg: #1f3329;     --ok-fg: #4bce97;
  --warn: #e2a03f;   --warn-bg: #3a2f1c;   --warn-fg: #e2a03f;
  --danger: #ff8f85; --danger-bg: #3a2523; --danger-fg: #ff8f85;

  --ok-solid: #1f845a; --warn-solid: #b8590b;
  --zapia: #108379;    --zapia-strong: #0f7e74;
  --accent-hover-edge: var(--accent-text);
  --toast-border: var(--line-strong);

  --l-green-subtle: #28403b;  --l-yellow-subtle: #42402f; --l-orange-subtle: #433a33;
  --l-red-subtle: #423234;    --l-purple-subtle: #353748; --l-blue-subtle: #2a394b;
  --l-sky-subtle: #2d3e46;    --l-lime-subtle: #333f2f;   --l-pink-subtle: #403341;
  --l-black-subtle: #31373d;
  --l-blue-bold: #85b8ff; --l-purple-bold: #b8acf6; --l-green-bold: #7ee2b8; --l-yellow-bold: #f5cd47;
}

/* ============================================================ IMPRESSAO === */
/* Papel e claro mesmo com o sistema no escuro: RDO e relatorios saem com fundo
   branco e texto escuro. Mesmo seletor dos dois blocos escuros, mais abaixo no
   arquivo, entao vence por ordem. Valores = tema claro. */
@media print {
  :root:not([data-theme="light"]), :root[data-theme="dark"] {
    --accent-text: var(--brand-accent-strong);
    --accent-bg: color-mix(in srgb, var(--brand-accent) 10%, #ffffff);
    --bg-app: #f4f5f7; --bg-surface: #ffffff;
    --bg-sunken: color-mix(in srgb, var(--bg-app) 96%, var(--text));
    --bg-hover: color-mix(in srgb, var(--bg-app) 92.6%, var(--text));
    --text: #172b4d; --text-soft: #536179;
    --text-placeholder: color-mix(in srgb, var(--text-soft) 92%, var(--bg-surface));
    --line: #dfe1e6; --line-strong: color-mix(in srgb, var(--line) 85.5%, var(--text));
    --shadow-card: 0 1px 1px rgba(9, 30, 66, .25);
    --ok: #1f845a;     --ok-bg: #e2f4ec;     --ok-fg: #176b47;
    --warn: #b45309;   --warn-bg: #fdf1e3;   --warn-fg: #8f4106;
    --danger: #c9372c; --danger-bg: #fdecea; --danger-fg: #a52a20;
    --l-green-subtle: #baf3db;  --l-yellow-subtle: #f8e6a0; --l-orange-subtle: #fedec8;
    --l-red-subtle: #ffd5d2;    --l-purple-subtle: #dfd8fd; --l-blue-subtle: #cce0ff;
    --l-sky-subtle: #c6edfb;    --l-lime-subtle: #d3f1a7;   --l-pink-subtle: #fdd0ec;
    --l-black-subtle: #dcdfe4;
    --l-blue-bold: #0c66e4; --l-purple-bold: #6e5dc6; --l-green-bold: #1f845a; --l-yellow-bold: #946f00;
  }
}