/* tokens.css: Madeireira Rio Branco
   Âncora da marca: #9F2C2A = oklch(0.472 0.152 26). Creme da marca: #F8F3EA.
   Tudo no CSS usa os PAPÉIS (--fundo, --texto, --acao...), nunca a escala direta. */

:root {
  --h-marca: 26;
  --h-creme: 80;

  --tijolo-100: oklch(0.930 0.036 var(--h-marca));
  --tijolo-200: oklch(0.860 0.068 var(--h-marca));
  --tijolo-300: oklch(0.760 0.103 var(--h-marca));
  --tijolo-400: oklch(0.640 0.137 var(--h-marca));
  --tijolo-500: oklch(0.472 0.152 var(--h-marca));   /* #9F2C2A */
  --tijolo-600: oklch(0.410 0.140 var(--h-marca));
  --tijolo-700: oklch(0.340 0.118 var(--h-marca));
  --tijolo-800: oklch(0.270 0.085 var(--h-marca));
  --tijolo-900: oklch(0.210 0.055 var(--h-marca));

  --creme-50:  oklch(0.985 0.006 var(--h-creme));
  --creme-100: oklch(0.965 0.012 var(--h-creme));   /* #F8F3EA */
  --creme-200: oklch(0.925 0.022 var(--h-creme));   /* areia */
  --creme-300: oklch(0.870 0.030 var(--h-creme));
  --creme-500: oklch(0.640 0.030 var(--h-creme));
  --creme-600: oklch(0.520 0.028 var(--h-creme));
  --creme-700: oklch(0.400 0.020 var(--h-creme));
  --creme-900: oklch(0.220 0.008 60);                /* #1F1F1D carvão */
  --creme-950: oklch(0.160 0.008 60);

  --zap-500: oklch(0.760 0.190 150);                 /* verde do WhatsApp */
  --zap-600: oklch(0.680 0.180 150);
  --zap-900: oklch(0.300 0.090 150);
  --madeira: oklch(0.620 0.120 60);
  --branco: oklch(1 0 0);

  --sucesso: oklch(0.525 0.150 150);
  --alerta:  oklch(0.525 0.150 75);
  --erro:    oklch(0.525 0.190 25);

  /* PAPÉIS */
  --fundo:            var(--creme-100);
  --superficie:       var(--branco);
  --superficie-2:     var(--creme-200);
  --texto:            var(--creme-900);
  --texto-suave:      var(--creme-700);
  --texto-sobre-marca: var(--branco);
  --texto-sobre-zap:  var(--creme-950);
  --borda:            var(--creme-300);
  --borda-controle:   var(--creme-500);
  --marca:            var(--tijolo-500);
  --marca-hover:      var(--tijolo-600);
  --marca-profunda:   var(--tijolo-800);
  --marca-suave:      var(--tijolo-100);
  --acao:             var(--zap-500);
  --acao-hover:       var(--zap-600);
  --foco:             var(--tijolo-500);
  --link:             var(--tijolo-600);

  /* TIPOGRAFIA: uma família, a da marca */
  --f-display: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-corpo:   'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --escala: 1.25;
  --t--1: 0.875rem;
  --t-0:  1.0625rem;
  --t-1:  calc(var(--t-0) * var(--escala));
  --t-2:  calc(var(--t-1) * var(--escala));
  --t-3:  calc(var(--t-2) * var(--escala));
  --t-4:  calc(var(--t-3) * var(--escala));
  --t-5:  clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);

  --lh-titulo: 1.08;  --lh-corpo: 1.6;
  --ls-display: -0.03em;  --medida: 64ch;

  --e-1: .5rem; --e-2: 1rem; --e-3: 1.5rem; --e-4: 2rem;
  --e-5: 3rem;  --e-6: 4rem; --e-7: 6rem;   --e-8: 8rem;
  --secao-y: clamp(var(--e-5), 4vw + 1rem, var(--e-7));

  --raio-1: 4px; --raio-2: 8px; --raio-3: 14px; --raio-cheio: 9999px;

  --sombra-1: 0 1px 2px oklch(0 0 0/.05);
  --sombra-2: 0 1px 2px oklch(0 0 0/.05), 0 2px 6px oklch(0 0 0/.05);
  --sombra-3: 0 1px 2px oklch(0 0 0/.04), 0 2px 4px oklch(0 0 0/.04),
              0 4px 8px oklch(0 0 0/.04), 0 8px 16px oklch(0 0 0/.04);

  --d-rapido: .18s; --d-normal: .32s; --d-lento: .6s;
  --ease-ui:      cubic-bezier(.4, 0, .2, 1);
  --ease-entrada: cubic-bezier(.16, 1, .3, 1);
}

/* ESCURO: paleta própria (carvão quente), a marca sobe de L para não sumir */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: var(--creme-950); --superficie: oklch(0.215 0.010 60); --superficie-2: oklch(0.260 0.012 60);
    --texto: oklch(0.940 0.010 var(--h-creme)); --texto-suave: oklch(0.760 0.020 var(--h-creme));
    --borda: oklch(0.320 0.012 60); --borda-controle: oklch(0.600 0.020 var(--h-creme));
    --marca: var(--tijolo-300); --marca-hover: var(--tijolo-200); --marca-profunda: var(--tijolo-900);
    --marca-suave: oklch(0.280 0.060 var(--h-marca)); --link: var(--tijolo-300); --foco: var(--tijolo-300);
    --texto-sobre-marca: var(--creme-950);
    --sombra-1: none; --sombra-2: none; --sombra-3: none;
  }
}
:root[data-tema="escuro"] {
  --fundo: var(--creme-950); --superficie: oklch(0.215 0.010 60); --superficie-2: oklch(0.260 0.012 60);
  --texto: oklch(0.940 0.010 var(--h-creme)); --texto-suave: oklch(0.760 0.020 var(--h-creme));
  --borda: oklch(0.320 0.012 60); --borda-controle: oklch(0.600 0.020 var(--h-creme));
  --marca: var(--tijolo-300); --marca-hover: var(--tijolo-200); --marca-profunda: var(--tijolo-900);
  --marca-suave: oklch(0.280 0.060 var(--h-marca)); --link: var(--tijolo-300); --foco: var(--tijolo-300);
  --texto-sobre-marca: var(--creme-950);
  --sombra-1: none; --sombra-2: none; --sombra-3: none;
}

@supports not (color: oklch(0 0 0)) {
  :root { --marca: #9F2C2A; --marca-hover: #86211F; --marca-profunda: #4A1210; --marca-suave: #F3DEDC;
          --fundo: #F8F3EA; --superficie: #fff; --superficie-2: #EDE4D3;
          --texto: #1F1F1D; --texto-suave: #4E4A42; --borda: #D9CDB8; --borda-controle: #8C8474;
          --acao: #25D366; --acao-hover: #1DB85A; --link: #86211F; --foco: #9F2C2A; --madeira: #B8773A; }
}