/* ═══════════════════════════════════════════════════════════════════════
   CAMADA DE MARCA — o único arquivo que muda de cliente para cliente.

   Preset: CINZA + LARANJA CVCJ — os DOIS polos do logo, e só eles.
   O logo.png tem exatamente duas cores, em proporção 50/50:
       #B3B3B3  cinza neutro puro
       #FF6600  laranja vivo
   Nenhum creme, nenhum marrom. Por isso o chão aqui é um cinza-claro
   quase neutro (o mesmo das paredes e do piso da clínica), as áreas
   escuras são grafite (o letreiro preto da fachada), e o laranja fica
   exclusivo da ação. O "metal" do design system é, neste cliente, o
   próprio cinza do logo — a segunda cor da marca já é o contraponto,
   e um dourado seria a terceira cor que o sistema proíbe.
   Ver references/brand-presets.md, caso "Areia e cobre".
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Fundos: cinza-claro quase neutro, nunca branco puro ────────────── */
  --fundo:        #F7F6F4;   /* seção clara — o chão da página */
  --fundo-2:      #EDEBE7;   /* seção alternada, um passo mais fechado */
  --papel:        #FEFDFC;   /* cartões e superfícies elevadas */

  /* ── Marca: dois polos do logo — grafite no escuro, laranja na ação ─── */
  --marca-950:    #212020;   /* rodapé — grafite, como o letreiro */
  --marca-900:    #2F2D2C;   /* títulos, seção escura */
  --marca-700:    #B34908;   /* cor de ação — o laranja mais fundo que passa 4.5:1 como texto */
  --marca-500:    #FF6600;   /* O laranja do logo, literal — botão principal */
  --marca-200:    #F0C4A4;   /* traço leve, texto sobre fundo escuro */
  --marca-050:    #FBEDE3;   /* lavagem de fundo */

  /* ── Metal: o cinza do logo, em dose homeopática ─────────────────────── */
  --metal:        #B3B3B3;   /* = o cinza exato do logo */
  --metal-claro:  #D4D4D4;
  --metal-escuro: #6E6E6E;   /* 4.7:1 sobre --fundo — não clareie */

  /* ── Tinta ──────────────────────────────────────────────────────────── */
  --tinta:        #1B1A19;
  --tinta-suave:  #55524E;
  --tinta-fraca:  #918D88;   /* placeholders */

  /* ── Sobre fundo escuro ─────────────────────────────────────────────── */
  --claro:        #FDFCFB;   /* títulos e texto de botão */
  --claro-suave:  #EAE8E5;   /* corpo de texto */
  --alerta:       #FFD9C7;   /* mensagem de erro do formulário */

  /* ── Triplas RGB — combinadas com alfa dentro de components.css ─────── */
  --rgb-marca:        179, 73, 8;      /* = --marca-700 */
  --rgb-marca-escura: 47, 45, 44;      /* = --marca-900, base das sombras (grafite) */
  --rgb-marca-clara:  240, 196, 164;   /* = --marca-200 */
  --rgb-metal:        179, 179, 179;   /* = o cinza do logo */
  --rgb-metal-claro:  212, 212, 212;
  --rgb-fundo:        247, 246, 244;   /* = --fundo, para gradientes que somem */
  --rgb-papel:        254, 253, 252;
  --rgb-superficie:   250, 249, 247;   /* vidro da navbar */
  --rgb-claro:        234, 232, 229;   /* = --claro-suave */

  /* ── Tipografia ─────────────────────────────────────────────────────── */
  --display:  "Playfair Display", "Iowan Old Style", Georgia, serif;
  --texto:    "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  --script:   "Sacramento", "Segoe Script", cursive;

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --largura:    1160px;
  --gutter:     clamp(1.25rem, 5vw, 3rem);
  --raio:       20px;
  --nav-altura: 76px;

  /* ── Movimento: curva única de todo o site ──────────────────────────── */
  --mola: cubic-bezier(.22, 1, .36, 1);

  /* ── Sombras: luz de estúdio, difusa e baixa ────────────────────────── */
  --sombra-nav:       0 14px 40px -22px rgba(var(--rgb-marca-escura), .55),
                      0 2px 8px -4px rgba(var(--rgb-marca-escura), .18);
  --sombra-menu:      0 26px 50px -26px rgba(var(--rgb-marca-escura), .6);
  --sombra-botao:     0 12px 26px -16px rgba(var(--rgb-marca-escura), .9);
  --sombra-retrato:   0 42px 70px -46px rgba(var(--rgb-marca-escura), .7);
  --sombra-foto:      0 34px 60px -42px rgba(var(--rgb-marca-escura), .65);
  --sombra-badge:     0 16px 34px -22px rgba(var(--rgb-marca-escura), .6);
  --sombra-cartao:    0 26px 46px -34px rgba(var(--rgb-marca-escura), .6);
  --sombra-flutuante: 0 16px 32px -14px rgba(var(--rgb-marca-escura), .8);

  /* ── Superfícies translúcidas ───────────────────────────────────────── */
  --vidro-nav:   rgba(var(--rgb-superficie), .72);
  --vidro-menu:  rgba(var(--rgb-superficie), .94);
  --campo-fundo: rgba(var(--rgb-papel), .96);

  /* ── Linhas ─────────────────────────────────────────────────────────── */
  --linha:        rgba(var(--rgb-marca), .16);
  --linha-fraca:  rgba(var(--rgb-marca), .14);
  --linha-forte:  rgba(var(--rgb-marca), .30);
  --linha-clara:  rgba(var(--rgb-marca-clara), .25);
  --linha-metal:  rgba(var(--rgb-metal), .50);
}