/*
 * gocasa · tokens.css — A ÚNICA fonte de valores visuais (D20).
 * Visual Leve (D80, do Meu Bem; revê a D39): fundo areia, petróleo na marca e na navegação, terracota só no botão
 * principal, coral só de enfeite, Outfit, texto de 16px, botões em pílula, cartões com cantos de 20px e sem sombra.
 * Cores, tipografia, espaçamentos, raios, sombras, movimento, camadas e medidas.
 * Nenhum outro CSS escreve um valor à mão: tudo é var(--token).
 * Para mudar a cara do sistema, mude aqui (ou crie um tema em temas/<nome>.css que sobrescreva estes tokens).
 */
:root {
  /* ---------- Cores de base (areia) ---------- */
  --cor-fundo: #fbfaf8;              /* background: a página */
  --cor-superficie: #ffffff;         /* card, popover, campos */
  --cor-superficie-2: #f3f1ed;       /* muted: hover de botão, rodapé de cartão, abas */
  --cor-superficie-3: #e9e5df;       /* um degrau acima do anterior (hover do secundário) */
  --cor-fundo-recuado: #f3f1ed;      /* coluna do quadro de tarefas: um degrau abaixo dos cartões */
  --cor-texto: #1d2d33;              /* foreground */
  --cor-texto-suave: #5b6b71;        /* muted-foreground: ajuda, legendas, metadados */
  --cor-texto-fraco: #6a777c;        /* o que está apagado (linha arquivada, ícone de estado vazio) */
  --cor-borda: #e6e2dc;              /* border: cartões, tabelas, divisórias */
  --cor-borda-forte: #8c8780;        /* input: borda de campo e de botão contornado (3:1 sobre branco) */
  --cor-sobreposicao: rgba(15, 30, 35, 0.55);
  --cor-linha-hover: #f7f5f2;        /* row-hover */
  --cor-linha-selecionada: #e3eef0;  /* row-selected */

  /* ---------- Marca (petróleo) ---------- */
  --cor-marca: #0f4c5c;              /* área ativa, foco, links, avatar */
  --cor-marca-forte: #0b3b48;        /* hover; também texto sobre o suave */
  --cor-marca-suave: #e3eef0;        /* fundo do que está escolhido */
  --cor-sobre-marca: #ffffff;
  --cor-marca-viva: #2e7d8f;         /* petróleo médio: só a área sob a curva da usina */
  --cor-marca-tinta: #0f4c5c;        /* reservado para o lettering da marca em material impresso (hoje igual a --cor-marca) */
  --cor-enfeite: #e8826a;            /* coral: só de enfeite, nunca texto sobre fundo claro */

  /* ---------- Ação principal (terracota): um botão por tela ---------- */
  --cor-acao: #b5472f;
  --cor-acao-forte: #963a26;
  --cor-sobre-acao: #ffffff;

  /* ---------- Destaque (o cartão petróleo do mês, RN-M14-10) ---------- */
  --cor-destaque: #0f4c5c;
  --cor-sobre-destaque: #ffffff;
  --cor-sobre-destaque-suave: #d3e2e5;   /* texto secundário sobre o destaque */
  --cor-sobre-destaque-acento: #f0b49f;  /* "inclui R$ … já vencidos" */
  --cor-destaque-trilha: #2e6a78;        /* trilho da barra de progresso */

  /* ---------- Semânticas (estado), separadas da marca ----------
   * Cada estado tem três tons: o sólido (ponto, barra, ícone), o -suave (fundo) e o -texto (texto sobre o -suave).
   * Nunca só cor: todo estado vai com palavra (e ponto, no selo). */
  --cor-sucesso: #2f7d4f;
  --cor-sucesso-suave: #e9f4ec;
  --cor-sucesso-texto: #24613d;
  --cor-aviso: #b7791f;
  --cor-aviso-suave: #fbf3e2;
  --cor-aviso-texto: #7a4f12;
  --cor-erro: #b3362b;               /* destructive: também texto de erro (6:1 sobre branco) */
  --cor-erro-forte: #962c23;         /* destructive-hover */
  --cor-erro-suave: #fbeeea;
  --cor-erro-texto: #9f2f25;
  --cor-sobre-erro: #ffffff;         /* texto sobre o vermelho sólido (contador do sino) */
  --cor-info: #2e6a78;
  --cor-info-suave: #e5eef0;
  --cor-info-texto: #0f4c5c;
  --cor-pendente: #7a8487;
  --cor-pendente-suave: #f3f1ed;
  --cor-pendente-texto: #4f5c60;
  --cor-foco: #0f4c5c;               /* ring */

  /* ---------- Navegação (topo, sub-abas, barra de baixo e Menu do celular; RN-M17-34) ---------- */
  --menu-fundo: #fbfaf8;
  --menu-texto: #33454b;
  --menu-hover: #f0ede8;
  --menu-ativo: #0f4c5c;
  --menu-ativo-texto: #ffffff;
  --menu-borda: #e6e2dc;

  /* ---------- Gráficos (barras dos relatórios) ---------- */
  --grafico-1: #0f4c5c;
  --grafico-2: #b5472f;
  --grafico-3: #b7791f;
  --grafico-4: #6b8e3a;
  --grafico-5: #e8826a;

  /* ---------- Paleta de pessoas, núcleos e grupos (10 cores nomeadas) ---------- */
  --paleta-azul: #2f6fd1;
  --paleta-verde: #2f9e5b;
  --paleta-laranja: #e07c1f;
  --paleta-roxo: #7c4dcf;
  --paleta-rosa: #d64f8a;
  --paleta-vermelho: #d33a3a;
  --paleta-amarelo: #d9a400;
  --paleta-ciano: #1a9fb5;
  --paleta-marrom: #8c6239;
  --paleta-cinza: #7a8594;

  /* ---------- Tipografia (Outfit variável, servida pelo próprio sistema) ---------- */
  --fonte-texto: "Outfit Variable", Outfit, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fonte-titulo: var(--fonte-texto);
  --fonte-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fonte-recursos: normal;
  --texto-xs: 0.8125rem;   /* 13px · metadados, selos */
  --texto-sm: 0.875rem;    /* 14px · cabeçalho de tabela, erro de campo, código */
  --texto-md: 1rem;        /* 16px · corpo do app */
  --texto-lg: 1.125rem;    /* 18px · título de cartão, descrição da página */
  --texto-xl: 1.375rem;    /* 22px · título de seção */
  --texto-2xl: 2rem;       /* 32px · título da página e número de contador */
  --texto-2xl-celular: 1.75rem; /* 28px · título da página abaixo de 768px */
  --texto-saudacao: 2.5rem;     /* 40px · "Boa tarde, Gui." no Hoje (RN-M14-01) */
  --texto-saudacao-celular: 2rem; /* 32px */
  --texto-destaque: 2.75rem;    /* 44px · o número do mês (RN-M14-10) */
  --texto-destaque-celular: 2.125rem; /* 34px */
  --texto-dialogo: 1.25rem;     /* 20px · título de diálogo e de estado vazio */
  --peso-leve: 300;
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-forte: 600;
  --peso-titulo: 500;
  --altura-linha: 1.5;
  --altura-linha-titulo: 1.2;
  --espaco-letras-titulo: -0.01em;
  --espaco-letras-secao: -0.005em;

  /* ---------- Espaçamento (escala de 4px) ---------- */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4rem;

  /* ---------- Raios, bordas, sombras ---------- */
  --raio-xs: 4px;          /* caixa de marcar */
  --raio-sm: 8px;          /* miniaturas, item de lista */
  --raio-md: 12px;         /* campos, caixinhas */
  --raio-lg: 20px;         /* cartões, diálogos, alertas */
  --raio-botao: 9999px;    /* botões e pílulas */
  --raio-pill: 9999px;     /* selos, avatares, barras */
  --borda-fina: 1px;
  --borda-grossa: 2px;
  --sombra-1: none;                                                                  /* cartão em repouso: sem sombra */
  --sombra-2: 0 6px 16px -4px rgba(15, 30, 35, 0.14), 0 2px 4px -2px rgba(15, 30, 35, 0.08);  /* menus abertos */
  --sombra-3: 0 16px 32px -8px rgba(15, 30, 35, 0.22), 0 4px 8px -4px rgba(15, 30, 35, 0.1); /* diálogo */
  --anel-foco: 0 0 0 2px var(--cor-fundo), 0 0 0 4px var(--cor-foco);               /* 2px de folga + 2px de petróleo */

  /* ---------- Movimento (effects.css usa; prefers-reduced-motion zera) ---------- */
  --dur-rapida: 150ms;
  --dur-normal: 200ms;
  --dur-lenta: 300ms;
  --curva: ease;

  /* ---------- Camadas ---------- */
  --z-menu: 30;
  --z-faixa: 40;
  --z-dialogo: 50;
  --z-aviso: 100;

  /* ---------- Medidas de layout ---------- */
  --largura-max: 1320px;
  --largura-leitura: 68ch;
  --altura-cabecalho: 72px;
  --altura-barra-baixo: 64px;     /* barra de baixo do celular (RN-M17-34) */
  --altura-controle: 44px;
  --altura-controle-pequeno: 36px;
  --altura-controle-grande: 48px;
  --altura-item-menu: 40px;       /* área e sub-aba */
  --altura-linha-tabela: 52px;
  --altura-grafico: 120px;  /* curva do dia da usina (M24) */
  --altura-barra-progresso: 8px;  /* barra do que já foi pago no mês (RN-M14-10) */
  --largura-tile-pequeno: 140px;  /* números da usina: dois por linha no celular (M24) */
  --largura-contador: 170px;      /* contadores do Hoje (RN-M14-11) */
  --largura-dia: 72px;            /* coluna do dia em Esta semana (RN-M14-12) */
  --marca-pequena: 32px;   /* altura da marca no topo do celular (130px de largura) */
  --marca-media: 36px;     /* altura da marca no topo do computador (146px) */
  --marca-grande: 48px;    /* altura da marca na entrada e nas páginas de erro (195px) */
  --avatar: 40px;
  --avatar-imovel: 44px;   /* iniciais do imóvel em "Imóveis que pedem atenção" */
  --foto-pessoa-p: 32px;   /* foto da pessoa na lista (D48) */
  --foto-pessoa-m: 56px;   /* no formulário */
  --foto-pessoa-g: 72px;   /* no cabeçalho da ficha */
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --largura-busca: 240px;         /* caixa "Buscar" do cabeçalho (RN-M17-24) */
  --largura-busca-painel: 440px;  /* resultados embaixo dela */
  --botao-mais: 52px;             /* o "+" no meio da barra de baixo (RN-M17-26) */
  --largura-pergunta: 320px;      /* pergunta curta aberta por um botão (ex.: aceitar a proposta, RN-M25-10) */
  --largura-menu-folha: 320px;    /* engrenagem e menu da pessoa */

  color-scheme: light;
}