/* Tokens do sistema (admin, revenda e portal).
   A ordem das camadas é declarada aqui, no primeiro arquivo carregado: camada posterior vence. */
@layer tokens, reset, base, layout, componentes, telas, utilitarios;

@layer tokens {
  :root {
    color-scheme: light dark;

    /* paleta fixa */
    --tinta-950: #0A1222;
    --tinta-900: #0E1A33;
    --tinta-800: #182848;
    --tinta-700: #2A3B5E;
    --azul: #2347B5;
    --azul-claro: #7FA2FF;
    --placa-azul: #1F4FA8;

    /* marca ativa: GLAM/Placa360 no admin e na revenda; no portal o JS troca pela do revendedor */
    --marca: var(--azul);
    --marca-forte: color-mix(in oklch, var(--marca), black 22%);
    --marca-suave: color-mix(in oklch, var(--marca) 12%, var(--superficie));
    --marca-2: var(--tinta-900);           /* cor secundária: faixas escuras, hero */
    --sobre-marca: #FFFFFF;                 /* texto sobre --marca (o JS recalcula pelo contraste) */
    --sobre-marca-2: #FFFFFF;
    --marca-texto-claro: var(--azul);       /* --marca usada como texto em fundo claro, já com 4.5:1 */
    --marca-texto-escuro: var(--azul-claro);/* idem em fundo escuro */
    --marca-texto: var(--marca-texto-claro);

    /* superfícies (claro) */
    --fundo: #F3F5F9;
    --superficie: #FFFFFF;
    --superficie-2: #ECEFF5;
    --superficie-3: #DFE4EC;
    --linha: #E2E6ED;
    --contorno: #8C95A8;    /* borda de campo: 3:1 contra a superfície (WCAG 1.4.11) */
    --texto: #0E1A33;
    --texto-2: #45506A;
    --texto-3: #5A647C;     /* 5.6:1 no branco, 5:1 no fundo */

    /* semáforo: texto (AA sobre o suave e o branco) e sinal (ponto, barra) */
    --verde: #16703D;
    --verde-suave: #E1F2E7;
    --verde-sinal: #1E9E57;
    --amarelo: #8A5300;
    --amarelo-suave: #FFF0D4;
    --amarelo-sinal: #EFA300;
    --vermelho: #B42318;
    --vermelho-suave: #FDE7E4;
    --vermelho-sinal: #DD3426;

    /* séries do gráfico (validadas: faixa de luminosidade, daltonismo e contraste) */
    --serie-1: #2347B5;
    --serie-2: #16703D;

    /* faixa escura da casca (lateral do painel): escura nos dois temas */
    --casca: var(--tinta-900);
    --casca-2: var(--tinta-800);
    --casca-3: var(--tinta-700);
    --casca-texto: #DCE3F0;
    --casca-suave: #A9B6D0;

    /* espaço e tipo fluidos (sempre com termo em rem: respeita o zoom) */
    --gutter: clamp(1rem, 0.5rem + 2vi, 2rem);
    --esp-1: 0.5rem;
    --esp-2: clamp(0.75rem, 0.65rem + 0.4vi, 1rem);
    --esp-3: clamp(1rem, 0.85rem + 0.6vi, 1.5rem);
    --esp-4: clamp(1.5rem, 1.1rem + 1.6vi, 2.5rem);

    --fs--1: 0.8125rem;
    --fs-0: 1rem;
    --fs-1: clamp(1.125rem, 1.05rem + 0.3vi, 1.25rem);
    --fs-2: clamp(1.375rem, 1.2rem + 0.8vi, 1.75rem);
    --fs-3: clamp(1.75rem, 1.4rem + 1.5vi, 2.375rem);

    --raio-s: 0.625rem;
    --raio-m: 0.875rem;
    --raio-l: 1.125rem;
    --sombra-1: 0 1px 2px rgb(14 26 51 / .06), 0 2px 8px rgb(14 26 51 / .05);
    --sombra-2: 0 10px 30px -10px rgb(14 26 51 / .25);
    --foco: #3B6BFF;
    --toque: 2.75rem;   /* 44 px: área mínima de toque no portal */
    --fonte: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --fundo: #0A1222;
      --superficie: #142039;
      --superficie-2: #1B2A48;
      --superficie-3: #2A3B5E;
      --linha: #24365C;
      --contorno: #6F7F9F;
      --texto: #EEF1F6;
      --texto-2: #C3CBDA;
      --texto-3: #A7B0C2;
      --verde: #7EE2A8;
      --verde-suave: #12352A;
      --amarelo: #FFCB66;
      --amarelo-suave: #3A2C0F;
      --vermelho: #FF9C92;
      --vermelho-suave: #43201F;
      --serie-1: #5A82EE;
      --serie-2: #2FAE6A;
      --marca-texto: var(--marca-texto-escuro);
      --marca-suave: color-mix(in oklch, var(--marca) 22%, var(--superficie));
      --casca: #0C1529;
      --casca-2: #142039;
      --casca-3: #24365C;
      --foco: #8FB0FF;
      --sombra-1: 0 1px 2px rgb(0 0 0 / .3);
    }
  }
  :root[data-theme="dark"] {
    --fundo: #0A1222;
    --superficie: #142039;
    --superficie-2: #1B2A48;
    --superficie-3: #2A3B5E;
    --linha: #24365C;
    --contorno: #6F7F9F;
    --texto: #EEF1F6;
    --texto-2: #C3CBDA;
    --texto-3: #A7B0C2;
    --verde: #7EE2A8;
    --verde-suave: #12352A;
    --amarelo: #FFCB66;
    --amarelo-suave: #3A2C0F;
    --vermelho: #FF9C92;
    --vermelho-suave: #43201F;
    --serie-1: #5A82EE;
    --serie-2: #2FAE6A;
    --marca-texto: var(--marca-texto-escuro);
    --marca-suave: color-mix(in oklch, var(--marca) 22%, var(--superficie));
    --casca: #0C1529;
    --casca-2: #142039;
    --casca-3: #24365C;
    --foco: #8FB0FF;
    --sombra-1: 0 1px 2px rgb(0 0 0 / .3);
  }
}

/* Onde a marca é trocada pelo JS (o :root do portal, a prévia na tela de marca), os tokens
   derivados precisam ser redeclarados ali: custom property herda o valor já resolvido no pai. */
@layer tokens {
  .com-marca {
    --marca-forte: color-mix(in oklch, var(--marca), black 22%);
    --marca-suave: color-mix(in oklch, var(--marca) 12%, var(--superficie));
    --marca-texto: var(--marca-texto-claro);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .com-marca,
    :root.com-marca:not([data-theme="light"]) {
      --marca-suave: color-mix(in oklch, var(--marca) 22%, var(--superficie));
      --marca-texto: var(--marca-texto-escuro);
    }
  }
  :root[data-theme="dark"] .com-marca,
  :root[data-theme="dark"].com-marca {
    --marca-suave: color-mix(in oklch, var(--marca) 22%, var(--superficie));
    --marca-texto: var(--marca-texto-escuro);
  }
}