/* =========================================================
   ATIVA MKT  |  Design System  |  tokens.css
   Fonte da verdade: cores, tipografia, espaço, forma, motion.
   Importe este arquivo antes de ativa-ds.css.
   ========================================================= */

/* ---------- Fontes da marca ---------- */
@font-face { font-family: "Margem"; src: url("../fonts/Margem-Light.woff") format("woff");   font-weight: 300; font-display: swap; }
@font-face { font-family: "Margem"; src: url("../fonts/Margem-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Margem"; src: url("../fonts/Margem-Italic.woff") format("woff");  font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Margem"; src: url("../fonts/Margem-Medium.woff") format("woff");  font-weight: 500; font-display: swap; }
@font-face { font-family: "Margem"; src: url("../fonts/Margem-Bold.woff") format("woff");    font-weight: 700; font-display: swap; }
@font-face { font-family: "Margem"; src: url("../fonts/Margem-XBold.woff") format("woff");   font-weight: 800; font-display: swap; }
@font-face { font-family: "Margem"; src: url("../fonts/Margem-Black.woff") format("woff");   font-weight: 900; font-display: swap; }
@font-face { font-family: "Margem Rounded"; src: url("../fonts/MargemRounded-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Brassiere"; src: url("../fonts/Brassiere.woff") format("woff"); font-weight: 400; font-display: swap; }

:root {
  /* ---------- Cor: núcleo da marca (PDF oficial) ---------- */
  --lima:          #99EB00;   /* R153 G235 B0  | cor de ação */
  --ardosia:       #2D4049;   /* R45  G64  B73 | cor de base */

  /* ---------- Cor: escalas derivadas ---------- */
  --lima-100: #EEFBD1;
  --lima-200: #D6F68F;
  --lima-300: #BDF24D;
  --lima-500: #99EB00;
  --lima-600: #7FC400;
  --lima-700: #5E9200;        /* lima legível sobre fundo claro (AA texto grande) */

  --ardosia-50:  #F1F4F8;     /* névoa: fundo claro do PDF */
  --ardosia-100: #DDE4E9;
  --ardosia-200: #B8C6CE;
  --ardosia-300: #8FA3AD;
  --ardosia-400: #647D88;
  --ardosia-500: #44606D;
  --ardosia-600: #36505B;
  --ardosia-700: #2D4049;     /* = --ardosia */
  --ardosia-800: #22323A;
  --ardosia-900: #18242A;     /* fundo escuro principal */
  --ardosia-950: #10191D;

  --branco: #FEFEFE;

  /* ---------- Cor: papéis (tema escuro é o padrão) ---------- */
  --fundo:          var(--ardosia-900);
  --fundo-elevado:  var(--ardosia-800);
  --superficie:     var(--ardosia-700);
  --linha:          rgb(254 254 254 / .12);
  --linha-forte:    rgb(254 254 254 / .28);
  --texto:          var(--branco);
  --texto-suave:    var(--ardosia-200);
  --texto-mudo:     var(--ardosia-300);
  --acao:           var(--lima);
  --acao-texto:     var(--ardosia-900);
  --foco:           var(--lima);
  --vidro:          rgb(24 36 42 / .55);
  --vidro-borda:    rgb(254 254 254 / .14);
  --brilho-lima:    0 0 0 1px rgb(153 235 0 / .35), 0 18px 60px -18px rgb(153 235 0 / .55);
  --sombra-1:       0 1px 2px rgb(0 0 0 / .25), 0 8px 24px -12px rgb(0 0 0 / .45);
  --sombra-2:       0 30px 80px -30px rgb(0 0 0 / .65);

  /* ---------- Tipografia ---------- */
  --fonte-base:    "Margem", "Poppins", system-ui, sans-serif;
  --fonte-arredon: "Margem Rounded", "Margem", "Poppins", sans-serif;
  --fonte-display: "Brassiere", "Margem", serif;   /* só para palavras de impacto */

  /* escala 1.25 (terça maior) a partir de 16px, títulos fluidos */
  --t-xs:   0.8rem;      /* 12.8 */
  --t-sm:   0.9rem;      /* 14.4 */
  --t-base: 1rem;        /* 16   */
  --t-md:   1.25rem;     /* 20   */
  --t-lg:   1.5625rem;   /* 25   */
  --t-xl:   clamp(1.75rem, 1.2rem + 1.6vw, 2.44rem);
  --t-2xl:  clamp(2.2rem, 1.4rem + 3vw, 3.81rem);
  --t-3xl:  clamp(2.8rem, 1.2rem + 6vw, 5.96rem);
  --t-mega: clamp(4rem, 1rem + 13vw, 13rem);

  --peso-leve: 300; --peso-regular: 400; --peso-medio: 500; --peso-forte: 700; --peso-extra: 800; --peso-black: 900;
  --entrelinha-justa: 1.02;
  --entrelinha-titulo: 1.1;
  --entrelinha-texto: 1.6;
  --medida: 64ch;       /* largura máxima de parágrafo */

  /* ---------- Espaço (base 4px) ---------- */
  --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-5: 1.5rem;
  --e-6: 2rem;   --e-7: 3rem;  --e-8: 4rem;   --e-9: 6rem; --e-10: 8rem; --e-11: 12rem;
  --secao: clamp(5rem, 3rem + 8vw, 11rem);
  --margem-lateral: clamp(1rem, .4rem + 3vw, 3.5rem);
  --largura-max: 1320px;

  /* ---------- Forma ---------- */
  --raio-xs: 6px;
  --raio-sm: 10px;
  --raio-md: 18px;
  --raio-lg: 32px;
  --raio-pill: 999px;
  /* ângulo da perna do "A" do símbolo (≈ 71°): usado em cortes, máscaras e riscos de luz */
  --angulo-a: 71deg;
  --inclinacao-a: 34%;   /* deslocamento horizontal equivalente em polígonos de 100% de altura */

  /* ---------- Motion ---------- */
  --ease-saida:   cubic-bezier(.16, 1, .3, 1);     /* expo out: entradas e revelações */
  --ease-entrada: cubic-bezier(.7, 0, .84, 0);     /* saídas */
  --ease-mola:    cubic-bezier(.34, 1.56, .64, 1); /* micro interações, leve rebote */
  --ease-suave:   cubic-bezier(.65, 0, .35, 1);    /* loops e parallax */
  --d-rapida: 180ms;
  --d-media:  420ms;
  --d-lenta:  900ms;
  --d-cena:   1400ms;
  --escalonar: 70ms;     /* atraso entre itens em sequência */

  /* ---------- Camadas ---------- */
  --z-fundo: -1; --z-base: 1; --z-flutuante: 10; --z-nav: 50; --z-cursor: 100;

  color-scheme: dark;
}

/* ---------- Tema claro (aplicar em <html>, <section> ou qualquer bloco) ---------- */
[data-tema="claro"] {
  --fundo:         var(--ardosia-50);
  --fundo-elevado: var(--branco);
  --superficie:    var(--ardosia-100);
  --linha:         rgb(45 64 73 / .14);
  --linha-forte:   rgb(45 64 73 / .32);
  --texto:         var(--ardosia-700);
  --texto-suave:   var(--ardosia-500);
  --texto-mudo:    var(--ardosia-400);
  --acao:          var(--ardosia-700);
  --acao-texto:    var(--lima);
  --foco:          var(--ardosia-700);
  --vidro:         rgb(254 254 254 / .6);
  --vidro-borda:   rgb(45 64 73 / .12);
  --sombra-1:      0 1px 2px rgb(45 64 73 / .08), 0 10px 30px -14px rgb(45 64 73 / .3);
  --sombra-2:      0 30px 80px -30px rgb(45 64 73 / .4);
  color-scheme: light;
}

/* ---------- Tema lima (blocos de chamada) ---------- */
[data-tema="lima"] {
  --fundo:       var(--lima);
  --fundo-elevado: var(--lima-300);
  --linha:       rgb(24 36 42 / .18);
  --linha-forte: rgb(24 36 42 / .4);
  --texto:       var(--ardosia-900);
  --texto-suave: var(--ardosia-700);
  --texto-mudo:  var(--ardosia-600);
  --acao:        var(--ardosia-900);
  --acao-texto:  var(--lima);
  --foco:        var(--ardosia-900);
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-rapida: 1ms; --d-media: 1ms; --d-lenta: 1ms; --d-cena: 1ms; --escalonar: 0ms; }
}