/* =====================================================================
   Private Cosméticos — tokens para o app interno (logística / qualidade)
   Base: identidade v2 do site oficial (privatecosmeticos.com.br,
   projeto Vercel private-cosmeticos-site, app/globals.css + docs/DESIGN.md).
   Preto · dourado · off-white + IBM Plex Sans / IBM Plex Serif.

   Adaptações para uso operacional (iPad no chão de fábrica e PC):
   - estados semânticos (ok / alerta / erro / info) que o site não tem;
   - alvos de toque de 48 px no mínimo (56 px nos botões principais);
   - borda de campo com contraste 3:1 (a "line" do site é decorativa, 1,3:1);
   - dourado claro NUNCA como texto em fundo claro (2,4:1). Texto dourado
     em fundo claro usa --pc-gold-deep (4,5:1 sobre off-white).
   Contrastes WCAG medidos estão comentados ao lado de cada par.
   ===================================================================== */

/* Fontes: as mesmas do site (Google Fonts, licença OFL).
   Opção A (online):
   @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Serif:ital,wght@0,500;0,600;1,500&display=swap");
   Opção B (offline, recomendada para tablet em rede instável): usar os woff2
   copiados em design/assets/site/fonts/ (subconjunto latin, cobre PT-BR). */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("assets/site/fonts/IBMPlexSans-latin-var-400-600.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("assets/site/fonts/IBMPlexSerif-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("assets/site/fonts/IBMPlexSerif-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ---------- Marca (valores exatos do site oficial) ---------- */
  --pc-ink: #0e0d0b;          /* preto da marca: texto principal, botão primário em fundo claro */
  --pc-coal: #1b1813;         /* superfície escura (barra lateral, cabeçalho) */
  --pc-coal-2: #26221b;       /* superfície escura elevada / hover em fundo escuro */
  --pc-offwhite: #f7f4ee;     /* fundo padrão da aplicação */
  --pc-cream: #efeae0;        /* faixas, cabeçalho de tabela, área agrupada */
  --pc-paper: #fbf8f2;        /* fundo alternativo bem claro */
  --pc-white: #ffffff;        /* cartões e campos */
  --pc-gold: #c39a55;         /* destaque. Fundo de botão (texto ink 7,5:1) e texto em fundo escuro (7,5:1) */
  --pc-gold-deep: #8c6a3f;    /* texto/ícone dourado em fundo claro (4,5:1 off-white, 4,9:1 branco) */
  --pc-gold-soft: #e2c893;    /* hover do botão dourado, realce de seleção */
  --pc-graytext: #6b655c;     /* texto secundário (5,25:1 off-white) */
  --pc-line: #ddd6c9;         /* divisórias decorativas (NÃO usar como borda de campo) */
  --pc-line-dark: #3a342a;    /* divisórias em fundo escuro */
  --pc-wpp: #25d366;          /* só ícone de WhatsApp */

  /* ---------- Papéis (use estes nos componentes) ---------- */
  --bg: var(--pc-offwhite);
  --bg-sunken: var(--pc-cream);
  --surface: var(--pc-white);
  --surface-inverse: var(--pc-coal);
  --text: var(--pc-ink);                 /* 17,7:1 sobre off-white */
  --text-muted: var(--pc-graytext);      /* 5,25:1 */
  --text-inverse: var(--pc-offwhite);
  --text-accent: var(--pc-gold-deep);
  --border: var(--pc-line);              /* separadores, contorno de cartão */
  --border-strong: #8a8173;              /* campos, checkbox, controles (3,5:1 sobre off-white) */
  --accent: var(--pc-gold);
  --accent-hover: var(--pc-gold-soft);
  --on-accent: var(--pc-ink);
  --primary: var(--pc-ink);              /* ação principal em tela clara (padrão do site) */
  --primary-hover: var(--pc-coal);
  --on-primary: var(--pc-offwhite);
  --focus-ring: var(--pc-gold-deep);

  /* ---------- Estados operacionais (novos, harmonizados com a paleta quente) ----------
     Regra: estado nunca só por cor. Sempre cor + ícone + palavra ("Conferido", "Divergência"). */
  --ok: #2d7a3e;              /* verde já usado no site (--color-success). Branco sobre ele 5,3:1 */
  --ok-text: #1f6b36;         /* texto verde sobre --ok-bg: 5,7:1 */
  --ok-bg: #e6f2e8;
  --warn: #c98a2d;            /* âmbar (pigmento "amber" do site). Fundo de faixa com texto ink */
  --warn-text: #8a5100;       /* texto âmbar sobre --warn-bg: 5,75:1 */
  --warn-bg: #fcf1d9;
  --danger: #b42318;          /* erro/bloqueio. Branco sobre ele 6,6:1 */
  --danger-text: #a8201a;     /* texto vermelho sobre --danger-bg: 6,2:1 */
  --danger-bg: #fbe9e7;
  --info: #1e5aa8;            /* informação neutra. Branco sobre ele 6,8:1 */
  --info-text: #1b4f94;       /* sobre --info-bg: 6,9:1 */
  --info-bg: #e5eef9;

  /* ---------- Tipografia ---------- */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "IBM Plex Serif", Georgia, serif;   /* só títulos de tela/página, peso 500 */
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace; /* códigos de lote, NF, SKU */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Escala para app operacional (corpo 17 px: leitura em tablet a ~50 cm) */
  --fs-xs: 0.8125rem;   /* 13 px — rodapé de tabela, carimbo de hora */
  --fs-sm: 0.9375rem;   /* 15 px — texto secundário, rótulo de campo */
  --fs-base: 1.0625rem; /* 17 px — corpo e células de tabela */
  --fs-lg: 1.25rem;     /* 20 px — valores em destaque (peso, quantidade) */
  --fs-xl: 1.5rem;      /* 24 px — título de seção */
  --fs-2xl: 2rem;       /* 32 px — título de tela (serif) */
  --fs-num: 2.5rem;     /* 40 px — número grande de balança / contagem */
  --lh-tight: 1.15;
  --lh-base: 1.45;
  --tracking-display: -0.02em;  /* igual ao .h-display do site */
  --tracking-eyebrow: 0.18em;   /* igual ao .eyebrow do site (usar 12 px mínimo no app) */

  /* ---------- Raio, borda, sombra (iguais ao site) ---------- */
  --radius-sm: 0.5rem;    /* 8 px  — chips, badges */
  --radius-md: 0.75rem;   /* 12 px — campos */
  --radius-lg: 1rem;      /* 16 px — cartões (rounded-2xl do site) */
  --radius-xl: 1.5rem;    /* 24 px — modais/sheets */
  --radius-pill: 9999px;  /* botões (padrão "pill" do site) */
  --border-width: 1px;
  --border-width-strong: 2px;  /* campo com foco/erro, linha selecionada */
  --shadow-card: 0 1px 2px rgba(27, 24, 19, 0.05);           /* cartão do site */
  --shadow-raised: 0 4px 12px rgba(14, 13, 11, 0.08), 0 12px 24px rgba(14, 13, 11, 0.06);
  --shadow-overlay: 0 24px 48px -24px rgba(27, 24, 19, 0.35); /* modal (valor do site) */

  /* ---------- Espaçamento (base 4 px, igual ao Tailwind do site) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* ---------- Toque / densidade ---------- */
  --tap-min: 48px;          /* qualquer alvo tocável */
  --tap-primary: 56px;      /* botão de ação principal (Receber, Separar, Pesar, Confirmar) */
  --row-height: 56px;       /* linha de lista/tabela em modo tablet */
  --row-height-compact: 40px; /* modo PC (densidade alta, via [data-density="compact"]) */
  --gap-touch: 12px;        /* espaço mínimo entre dois alvos vizinhos */

  /* ---------- Movimento (curvas do site) ---------- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quad: cubic-bezier(0.45, 0, 0.55, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
}

/* Densidade compacta para PC (escritório): */
[data-density="compact"] {
  --fs-base: 0.9375rem;
  --row-height: var(--row-height-compact);
  --tap-primary: 44px;
}

/* ---------- Modo escuro (opcional) ----------
   O site institucional é só claro; o app interno pode ter escuro para turno
   noturno / ambiente com pouca luz. Valores derivados das faixas ink/coal do
   site e alinhados à Central Financeira (que já é escura). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e0d0b;
  --bg-sunken: #0b0a08;
  --surface: #1b1813;
  --surface-inverse: #f7f4ee;
  --text: #efeae0;          /* 16,2:1 */
  --text-muted: #b4ab9b;    /* 8,2:1 sobre #14120e */
  --text-inverse: #0e0d0b;
  --text-accent: #d6b06a;   /* 9,2:1 */
  --border: #3a342a;
  --border-strong: #8a8173; /* 4,9:1 */
  --accent: #c39a55;
  --accent-hover: #e2c893;
  --on-accent: #0e0d0b;
  --primary: #c39a55;       /* em fundo escuro o botão principal vira dourado (regra do site) */
  --primary-hover: #e2c893;
  --on-primary: #0e0d0b;
  --focus-ring: #c39a55;

  --ok: #6fcf97;   --ok-text: #6fcf97;   --ok-bg: rgba(111, 207, 151, 0.12);
  --warn: #f3b94a; --warn-text: #f3b94a; --warn-bg: rgba(243, 185, 74, 0.12);
  --danger: #ff7a63; --danger-text: #ff7a63; --danger-bg: rgba(255, 122, 99, 0.12);
  --info: #86b4ff; --info-text: #86b4ff; --info-bg: rgba(134, 180, 255, 0.12);

  --shadow-card: none;
  --shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.45);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --bg: #0e0d0b; --bg-sunken: #0b0a08; --surface: #1b1813; --surface-inverse: #f7f4ee;
    --text: #efeae0; --text-muted: #b4ab9b; --text-inverse: #0e0d0b; --text-accent: #d6b06a;
    --border: #3a342a; --border-strong: #8a8173;
    --accent: #c39a55; --accent-hover: #e2c893; --on-accent: #0e0d0b;
    --primary: #c39a55; --primary-hover: #e2c893; --on-primary: #0e0d0b; --focus-ring: #c39a55;
    --ok: #6fcf97; --ok-text: #6fcf97; --ok-bg: rgba(111, 207, 151, 0.12);
    --warn: #f3b94a; --warn-text: #f3b94a; --warn-bg: rgba(243, 185, 74, 0.12);
    --danger: #ff7a63; --danger-text: #ff7a63; --danger-bg: rgba(255, 122, 99, 0.12);
    --info: #86b4ff; --info-text: #86b4ff; --info-bg: rgba(134, 180, 255, 0.12);
    --shadow-card: none; --shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.45);
  }
}

/* ---------- Base mínima sugerida ---------- */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;   /* site: "Números: sempre tnum" */
}
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
::selection { background: var(--pc-gold); color: var(--pc-ink); }