/*
  MY SDR IMOB: tokens de marca e interface
  Versão 1.2, 09/11/2026 (símbolo de planta baixa no lugar do balão). Fonte da verdade: marca/BRAND-BOOK.md.

  Três camadas:
    1. Primitivo  (--p-*)  valor bruto. Ninguém usa direto em componente.
    2. Semântico  (--cor-*, --texto-*, --espaco-*)  papel na interface. Muda com o tema.
    3. Componente (--botao-*, --card-*, --balao-*, --badge-*, --campo-*, --tabela-*).

  Tema: claro por padrão. Escuro com [data-tema="escuro"] no <html> ou pela
  preferência do sistema (quando não houver data-tema="claro").

  Fontes (Google Fonts, licença OFL). Carregar na página:
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@100..125,500..900&family=Public+Sans:wght@400;500;600;700&display=swap">

  Cada OKLCH abaixo tem o HEX equivalente em comentário (conversão medida em 09/11/2026).
*/

:root {
  /* ===================== 1. PRIMITIVOS ===================== */

  /* Verde Escritura (primária). O 700 é o mesmo verde do painel atual. */
  --p-verde-50:  oklch(0.972 0.014 162); /* #EEF9F3 */
  --p-verde-100: oklch(0.935 0.03 162);  /* #D9F0E3 */
  --p-verde-200: oklch(0.865 0.05 162);  /* #B6DDC9 */
  --p-verde-300: oklch(0.76 0.07 162);   /* #89BFA4 */
  --p-verde-400: oklch(0.64 0.08 162);   /* #5D9C7D */
  --p-verde-500: oklch(0.53 0.075 161);  /* #41795E */
  --p-verde-700: oklch(0.415 0.065 160); /* #28573F */
  --p-verde-800: oklch(0.335 0.052 162); /* #1A3F2E */
  --p-verde-900: oklch(0.255 0.04 165);  /* #0D291E */
  --p-verde-950: oklch(0.195 0.03 166);  /* #061912 */

  /* Âmbar Placa (secundária). Nunca como texto sobre claro. */
  --p-ambar-100: oklch(0.965 0.04 88);   /* #FFF3D6 */
  --p-ambar-200: oklch(0.92 0.075 86);   /* #FBE2AB */
  --p-ambar-400: oklch(0.83 0.15 78);    /* #FCBA43 */
  --p-ambar-500: oklch(0.76 0.155 72);   /* #ED9E20 */
  --p-ambar-700: oklch(0.5 0.1 62);      /* #8B551C */

  /* Neutros Papel e Grafite */
  --p-neutro-0:   oklch(1 0 0);           /* #FFFFFF */
  --p-neutro-50:  oklch(0.982 0.004 100); /* #FAF9F6 */
  --p-neutro-100: oklch(0.955 0.005 100); /* #F1F0EC */
  --p-neutro-200: oklch(0.912 0.006 100); /* #E3E2DE */
  --p-neutro-300: oklch(0.84 0.008 110);  /* #CBCBC5 */
  --p-neutro-500: oklch(0.6 0.01 130);    /* #7E817B */
  --p-neutro-600: oklch(0.48 0.012 150);  /* #59605A */
  --p-neutro-800: oklch(0.31 0.014 160);  /* #2A332E */
  --p-neutro-900: oklch(0.22 0.015 165);  /* #141D19 */

  /* Estados */
  --p-sucesso-100: oklch(0.955 0.04 150); /* #DEF8E2 */
  --p-sucesso-600: oklch(0.53 0.13 150);  /* #218041 */
  --p-sucesso-700: oklch(0.43 0.11 150);  /* #10602D */
  --p-erro-100:    oklch(0.962 0.018 27); /* #FFEEEC */
  --p-erro-600:    oklch(0.53 0.19 27);   /* #C22826 */
  --p-erro-700:    oklch(0.47 0.17 27);   /* #A51F1E */

  /* Superfícies do tema escuro */
  --p-escuro-superficie: oklch(0.235 0.03 166); /* #0F231B */
  --p-escuro-borda:      oklch(0.33 0.03 166);  /* #263A32 */
  --p-escuro-texto-2:    oklch(0.76 0.02 160);  /* #A7B5AD */
  --p-escuro-borda-forte:   oklch(0.42 0.03 166); /* #3E5349 */
  --p-escuro-sucesso:       oklch(0.82 0.11 150); /* #8FD89E */
  --p-escuro-sucesso-fundo: oklch(0.3 0.06 150);  /* #14361D */
  --p-escuro-alerta-fundo:  oklch(0.32 0.06 70);  /* #462D0B */
  --p-escuro-erro:          oklch(0.82 0.08 27);  /* #F4B1A8 */
  --p-escuro-erro-fundo:    oklch(0.3 0.08 27);   /* #4F1A17 */

  /* Tipografia */
  --p-fonte-display: "Archivo", "Arial Black", system-ui, sans-serif;
  --p-fonte-texto: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --p-fonte-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --p-largura-display: 125%;   /* eixo wdth do Archivo: Expanded */
  --p-fs-12: 0.75rem;
  --p-fs-14: 0.875rem;
  --p-fs-16: 1rem;
  --p-fs-18: 1.125rem;
  --p-fs-20: 1.25rem;
  --p-fs-24: 1.5rem;
  --p-fs-32: 2rem;
  --p-fs-40: 2.5rem;
  --p-fs-56: 3.5rem;
  --p-fs-72: 4.5rem;
  --p-peso-400: 400;
  --p-peso-500: 500;
  --p-peso-600: 600;
  --p-peso-700: 700;
  --p-peso-800: 800;

  /* Espaço: base 4 px */
  --p-esp-1: 0.25rem;  /* 4 */
  --p-esp-2: 0.5rem;   /* 8 */
  --p-esp-3: 0.75rem;  /* 12 */
  --p-esp-4: 1rem;     /* 16 */
  --p-esp-5: 1.5rem;   /* 24 */
  --p-esp-6: 2rem;     /* 32 */
  --p-esp-7: 3rem;     /* 48 */
  --p-esp-8: 4rem;     /* 64 */
  --p-esp-9: 6rem;     /* 96 */

  /* Raio de componente de interface (o símbolo da marca tem canto vivo) */
  --p-raio-1: 4px;
  --p-raio-2: 8px;
  --p-raio-3: 12px;
  --p-raio-4: 20px;
  --p-raio-total: 999px;
  /* Forma da porta: um canto em arco em cima à esquerda, como o giro da porta do símbolo,
     e três cantos vivos, como as paredes. Usar em CTA, selo, marcador e item de lista de peça social. */
  --p-forma-porta-1: 6px 0 0 0;
  --p-forma-porta-2: 12px 0 0 0;
  --p-forma-porta-3: 20px 0 0 0;

  /* Sombra: só para elevar o que flutua (menu, modal). Card usa borda. */
  --p-sombra-1: 0 1px 2px oklch(0.22 0.015 165 / 0.08);
  --p-sombra-2: 0 8px 24px oklch(0.22 0.015 165 / 0.12);

  --p-duracao: 160ms;

  /* ===================== 2. SEMÂNTICOS (tema claro) ===================== */
  color-scheme: light;
  --cor-fundo: var(--p-neutro-50);
  --cor-superficie: var(--p-neutro-0);
  --cor-superficie-2: var(--p-neutro-100);
  --cor-texto: var(--p-neutro-900);
  --cor-texto-2: var(--p-neutro-600);
  --cor-borda: var(--p-neutro-200);
  --cor-borda-forte: var(--p-neutro-300);

  --cor-acao: var(--p-verde-700);
  --cor-acao-hover: var(--p-verde-800);
  --cor-acao-texto: var(--p-neutro-0);
  --cor-acao-suave: var(--p-verde-100);
  --cor-acao-suave-texto: var(--p-verde-800);
  --cor-link: var(--p-verde-700);
  --cor-foco: var(--p-ambar-500);

  --cor-destaque: var(--p-ambar-400);
  --cor-destaque-texto: var(--p-verde-900);

  --cor-marca-fundo: var(--p-verde-900);
  --cor-marca-texto: var(--p-neutro-0);
  --cor-marca-parede: var(--p-verde-700);
  --cor-marca-porta: var(--p-ambar-400);

  --cor-sucesso: var(--p-sucesso-700);
  --cor-sucesso-fundo: var(--p-sucesso-100);
  --cor-alerta: var(--p-ambar-700);
  --cor-alerta-fundo: var(--p-ambar-100);
  --cor-erro: var(--p-erro-700);
  --cor-erro-fundo: var(--p-erro-100);
  --cor-erro-acao: var(--p-erro-600);

  --cor-chat-fundo: var(--p-neutro-100);
  --cor-balao-recebido: var(--p-neutro-0);
  --cor-balao-enviado: var(--p-verde-100);
  --cor-balao-texto: var(--p-neutro-900);

  --texto-display: var(--p-fonte-display);
  --texto-corpo: var(--p-fonte-texto);
  --texto-largura-display: var(--p-largura-display);
  --texto-legenda: var(--p-fs-12);
  --texto-pequeno: var(--p-fs-14);
  --texto-base: var(--p-fs-16);
  --texto-destaque: var(--p-fs-18);
  --texto-titulo-card: var(--p-fs-20);
  --texto-titulo-secao: var(--p-fs-24);
  --texto-titulo-pagina: var(--p-fs-32);
  --texto-chamada: var(--p-fs-40);
  --texto-chamada-grande: var(--p-fs-56);
  --entrelinha-corpo: 1.5;
  --entrelinha-titulo: 1.1;
  --entrelinha-display: 1;
  --tracking-display: 0.01em;
  --tracking-rotulo: 0.06em;

  --espaco-1: var(--p-esp-1);
  --espaco-2: var(--p-esp-2);
  --espaco-3: var(--p-esp-3);
  --espaco-4: var(--p-esp-4);
  --espaco-5: var(--p-esp-5);
  --espaco-6: var(--p-esp-6);
  --espaco-7: var(--p-esp-7);
  --espaco-8: var(--p-esp-8);
  --espaco-9: var(--p-esp-9);
  --raio-controle: var(--p-raio-2);
  --raio-card: var(--p-raio-3);
  --raio-painel: var(--p-raio-4);
  --raio-porta-marca-pequeno: var(--p-forma-porta-1);
  --raio-porta-marca: var(--p-forma-porta-2);
  --raio-porta-marca-grande: var(--p-forma-porta-3);
  --sombra-flutuante: var(--p-sombra-2);

  /* ===================== 3. COMPONENTES ===================== */
  --botao-altura: 44px;
  --botao-altura-pequeno: 36px;
  --botao-padding-x: var(--espaco-5);
  --botao-raio: var(--raio-controle);
  --botao-fonte: var(--texto-corpo);
  --botao-tamanho: var(--texto-pequeno);
  --botao-peso: var(--p-peso-600);
  --botao-primario-fundo: var(--cor-acao);
  --botao-primario-fundo-hover: var(--cor-acao-hover);
  --botao-primario-texto: var(--cor-acao-texto);
  --botao-secundario-fundo: var(--cor-superficie);
  --botao-secundario-borda: var(--cor-borda-forte);
  --botao-secundario-texto: var(--cor-texto);
  --botao-destaque-fundo: var(--cor-destaque);
  --botao-destaque-texto: var(--cor-destaque-texto);
  --botao-perigo-fundo: var(--cor-erro-acao);
  --botao-perigo-texto: var(--p-neutro-0);

  --card-fundo: var(--cor-superficie);
  --card-borda: var(--cor-borda);
  --card-raio: var(--raio-card);
  --card-padding: var(--espaco-4);
  --card-imovel-foto-proporcao: 4 / 3;
  --card-imovel-preco-cor: var(--cor-texto);
  --card-imovel-preco-tamanho: var(--texto-titulo-card);

  --balao-raio: 10px;
  --balao-padding: var(--espaco-2) var(--espaco-3);
  --balao-max: 82%;
  --balao-recebido-fundo: var(--cor-balao-recebido);
  --balao-enviado-fundo: var(--cor-balao-enviado);
  --balao-texto: var(--cor-balao-texto);
  --balao-hora: var(--cor-texto-2);

  --badge-altura: 24px;
  --badge-raio: var(--p-raio-1);
  --badge-tamanho: var(--texto-legenda);
  --badge-peso: var(--p-peso-600);

  --campo-altura: 44px;
  --campo-fundo: var(--cor-superficie);
  --campo-borda: var(--cor-borda-forte);
  --campo-borda-foco: var(--cor-acao);
  --campo-anel-foco: var(--cor-foco);
  --campo-raio: var(--raio-controle);
  --campo-tamanho: var(--texto-base);   /* 16 px: evita zoom no iPhone */

  --tabela-cabecalho-fundo: var(--cor-superficie-2);
  --tabela-borda: var(--cor-borda);
  --tabela-destaque-fundo: var(--cor-marca-fundo);
  --tabela-destaque-texto: var(--cor-marca-texto);
}

/* ===================== TEMA ESCURO (só a camada semântica muda) ===================== */
:root[data-tema="escuro"] {
  color-scheme: dark;
  --cor-fundo: var(--p-verde-950);
  --cor-superficie: var(--p-escuro-superficie);
  --cor-superficie-2: var(--p-verde-900);
  --cor-texto: var(--p-neutro-50);
  --cor-texto-2: var(--p-escuro-texto-2);
  --cor-borda: var(--p-escuro-borda);
  --cor-borda-forte: var(--p-escuro-borda-forte);
  --cor-acao: var(--p-ambar-400);
  --cor-acao-hover: var(--p-ambar-200);
  --cor-acao-texto: var(--p-verde-950);
  --cor-acao-suave: var(--p-verde-800);
  --cor-acao-suave-texto: var(--p-verde-100);
  --cor-link: var(--p-verde-300);
  --cor-foco: var(--p-ambar-400);
  --cor-destaque: var(--p-ambar-400);
  --cor-destaque-texto: var(--p-verde-950);
  --cor-marca-fundo: var(--p-verde-900);
  --cor-marca-texto: var(--p-neutro-0);
  --cor-marca-parede: var(--p-neutro-50);
  --cor-marca-porta: var(--p-ambar-400);
  --cor-sucesso: var(--p-escuro-sucesso);
  --cor-sucesso-fundo: var(--p-escuro-sucesso-fundo);
  --cor-alerta: var(--p-ambar-200);
  --cor-alerta-fundo: var(--p-escuro-alerta-fundo);
  --cor-erro: var(--p-escuro-erro);
  --cor-erro-fundo: var(--p-escuro-erro-fundo);
  --cor-erro-acao: var(--p-erro-600);
  --cor-chat-fundo: var(--p-verde-950);
  --cor-balao-recebido: var(--p-escuro-superficie);
  --cor-balao-enviado: var(--p-verde-800);
  --cor-balao-texto: var(--p-neutro-50);
  --sombra-flutuante: 0 8px 24px oklch(0 0 0 / 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --cor-fundo: var(--p-verde-950);
    --cor-superficie: var(--p-escuro-superficie);
    --cor-superficie-2: var(--p-verde-900);
    --cor-texto: var(--p-neutro-50);
    --cor-texto-2: var(--p-escuro-texto-2);
    --cor-borda: var(--p-escuro-borda);
    --cor-borda-forte: var(--p-escuro-borda-forte);
    --cor-acao: var(--p-ambar-400);
    --cor-acao-hover: var(--p-ambar-200);
    --cor-acao-texto: var(--p-verde-950);
    --cor-acao-suave: var(--p-verde-800);
    --cor-acao-suave-texto: var(--p-verde-100);
    --cor-link: var(--p-verde-300);
    --cor-foco: var(--p-ambar-400);
    --cor-destaque: var(--p-ambar-400);
    --cor-destaque-texto: var(--p-verde-950);
    --cor-marca-fundo: var(--p-verde-900);
    --cor-marca-texto: var(--p-neutro-0);
    --cor-marca-parede: var(--p-neutro-50);
    --cor-marca-porta: var(--p-ambar-400);
    --cor-sucesso: var(--p-escuro-sucesso);
    --cor-sucesso-fundo: var(--p-escuro-sucesso-fundo);
    --cor-alerta: var(--p-ambar-200);
    --cor-alerta-fundo: var(--p-escuro-alerta-fundo);
    --cor-erro: var(--p-escuro-erro);
    --cor-erro-fundo: var(--p-escuro-erro-fundo);
    --cor-erro-acao: var(--p-erro-600);
    --cor-chat-fundo: var(--p-verde-950);
    --cor-balao-recebido: var(--p-escuro-superficie);
    --cor-balao-enviado: var(--p-verde-800);
    --cor-balao-texto: var(--p-neutro-50);
    --sombra-flutuante: 0 8px 24px oklch(0 0 0 / 0.4);
  }
}