/* ============================================================
   STUDIO FAD — SISTEMA — tokens de design
   Fonte: Design-UX-Sistema-StudioFad.md (seção 0).
   Base = tokens reais do site institucional (studiofad.com.br/css/style.css).
   Extensão = estados de produto (sucesso/erro/alerta/overlay) que o
   site institucional não precisava.
   NÃO redefinir estes tokens localmente em outro arquivo — sempre
   importar este CSS antes de qualquer folha de estilo de tela.
   ============================================================ */

:root {
  color-scheme: dark; /* barras de rolagem e campos nativos acompanham o tema */
  /* ---- base (idêntica ao site institucional) ---- */
  --bg: #0c0b0a;
  --bg-elevado: #131211;
  --surface: #1a1917;
  --surface-borda: rgba(255, 255, 255, 0.14);
  --texto: #e8e6df;
  --texto-suave: #8d8d8a;
  --texto-faint: #666663;
  --dourado: #c89b3c;
  --dourado-forte: #d9ae54;
  --creme: #f4f3ef;
  --preto-cta: #111111;

  /* ---- extensão de produto (0.2) ---- */
  --sucesso: #5c8a63;
  --sucesso-bg: rgba(92, 138, 99, 0.14);
  --erro: #b5453d;
  --erro-bg: rgba(181, 69, 61, 0.14);
  --alerta: var(--dourado-forte);
  --alerta-bg: rgba(217, 174, 84, 0.14);
  --overlay: rgba(12, 11, 10, 0.72);
  --hover-leve: rgba(255, 255, 255, 0.05);
  --hover-forte: rgba(255, 255, 255, 0.08);
  --borda-botao: rgba(255, 255, 255, 0.3);
  --sombra-flutuante: rgba(0, 0, 0, 0.4);
  --texto-erro-forte: #ff9c9c;

  /* ---- classificação de atendimento por tipo (item, backend-sistemas
     2026-09-17, lote de ajustes pedido pelo cliente) -- cor por tipo de
     serviço avulso + roxo pra pendência de pagamento. Plano usa --dourado
     (já existente, cor de marca) em vez de token novo. ---- */
  --laranja: #c9793c;
  --laranja-bg: rgba(201, 121, 60, 0.14);
  --azul: #4c7ea8;
  --azul-bg: rgba(76, 126, 168, 0.14);
  --verde-avulso: #6b9a5a;
  --verde-avulso-bg: rgba(107, 154, 90, 0.14);
  --roxo: #8c6bb0;
  --roxo-bg: rgba(140, 107, 176, 0.14);
  --amarelo: #d9a400;
  --teal: #2a9d9d;

  /* ---- tipografia (0.3) ---- */
  --fonte-display: "Anton", "Arial Narrow", sans-serif;
  --fonte-corpo: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fonte-credito: "Fraunces", "Georgia", serif;

  --display-lg: 2.5rem;
  --display-md: 1.75rem;
  --display-sm: 1.25rem;
  --corpo-lg: 1rem;
  --corpo-md: 0.9rem;
  --corpo-sm: 0.8rem;
  --label-size: 0.75rem;

  --radius: 14px;
  --radius-sm: 4px;
}

/* ============================================================
   TEMA CLARO (pedido do cliente Studio Fad, 12/10/2026: "tela muito escura").
   Só troca os tokens -- nenhuma tela define cor própria. Ligado por js/tema.js
   (atributo data-tema="claro" no <html>); o app do caixa e o do barbeiro abrem
   no claro por padrão, com botão para voltar ao escuro (lembrado no aparelho).
   ============================================================ */
:root[data-tema="claro"] {
  color-scheme: light;
  --bg: #f4f3ef;
  --bg-elevado: #ffffff;
  --surface: #ffffff;
  --surface-borda: rgba(20, 18, 14, 0.13);
  --texto: #1c1a16;
  --texto-suave: #5a5852;
  --texto-faint: #8b8983;
  --dourado: #9a6f12;
  --dourado-forte: #82590a;
  --creme: #1c1a16;
  --preto-cta: #ffffff;

  --sucesso: #2c7a3f;
  --sucesso-bg: rgba(44, 122, 63, 0.12);
  --erro: #b3261e;
  --erro-bg: rgba(179, 38, 30, 0.1);
  --alerta: #8a5a00;
  --alerta-bg: rgba(200, 140, 20, 0.16);
  --overlay: rgba(28, 26, 22, 0.45);
  --hover-leve: rgba(20, 18, 14, 0.045);
  --hover-forte: rgba(20, 18, 14, 0.08);
  --borda-botao: rgba(20, 18, 14, 0.28);
  --sombra-flutuante: rgba(28, 26, 22, 0.18);
  --texto-erro-forte: #a11f18;

  --laranja: #b4601c;
  --laranja-bg: rgba(180, 96, 28, 0.13);
  --azul: #2f6690;
  --azul-bg: rgba(47, 102, 144, 0.12);
  --verde-avulso: #3f7f35;
  --verde-avulso-bg: rgba(63, 127, 53, 0.13);
  --roxo: #6f4a99;
  --roxo-bg: rgba(111, 74, 153, 0.12);
  --amarelo: #c28f00;
  --teal: #1f7f7f;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: var(--fonte-corpo);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

button {
  font-family: inherit;
}