/* isabela.tokens.css — v1.1 (12/nov/2026: General Sans em botões, tags e placeholders)
   Tokens da marca Isabela: cores, tipografia, forma e vidro.
   v1.0: fonte única Sentient (serifada) no lugar da Satoshi; material de vidro da landing v3 entra como token.
   Marca veste o contêiner; semântica e dados são paletas à parte.
   As fontes vêm de ../fonts/sentient/sentient.css e ../fonts/general-sans/general-sans.css (cópias locais). */
:root {

  /* ── Branding: primárias (fundos de cor: terracota ou terracota escura) ── */
  --terracota:#A3472B; --terracota-escura:#8C3B22; --linho:#F5EEE4;

  /* ── Branding: secundárias ── */
  --oliva:#626834; --salvia:#91A687; --laranja:#E17F20; /* pontual */ --cacau:#2A1711; /* pontual */ --castanha:#4A2A22; --argila:#D8B5A0; --areia:#E8D8C6; --taupe:#8A7567; --cobalto:#1E3FA8;

  /* ── Escala Terracota ── */
  --terracota-50:#FEF2EE; --terracota-100:#FFE0D7; --terracota-200:#FEC0AD; --terracota-300:#EDA28C; --terracota-400:#DA856C; --terracota-500:#C6684B; --terracota-600:#A3472B; --terracota-700:#8C3B22; --terracota-800:#672B18; --terracota-900:#46190A;

  /* ── Escala Laranja ── */
  --laranja-50:#FFF3EA; --laranja-100:#FEE2CD; --laranja-200:#FFC396; --laranja-300:#EEA56B; --laranja-400:#E17F20; --laranja-500:#C76B00; --laranja-600:#A55801; --laranja-700:#854500; --laranja-800:#623100; --laranja-900:#421E00;

  /* ── Escala Oliva ── */
  --oliva-50:#F5F7EA; --oliva-100:#E7EADC; --oliva-200:#D0D3C2; --oliva-300:#B6BC94; --oliva-400:#9DA375; --oliva-500:#858C57; --oliva-600:#6D7440; --oliva-700:#626834; --oliva-800:#3F4321; --oliva-900:#282B11;

  /* ── Escala Sálvia ── */
  --salvia-50:#F2F7F0; --salvia-100:#E4EAE2; --salvia-200:#CDD3CA; --salvia-300:#ADBDA6; --salvia-400:#91A687; --salvia-500:#798D70; --salvia-600:#627659; --salvia-700:#4D5E46; --salvia-800:#374431; --salvia-900:#232C1E;

  /* ── Escala Castanha e cacau ── */
  --castanha-50:#FEF2EF; --castanha-100:#F8E2DD; --castanha-200:#E4CAC4; --castanha-300:#CEB0A8; --castanha-400:#B8958D; --castanha-500:#A27C72; --castanha-600:#89655B; --castanha-700:#6E5048; --castanha-800:#4A2A22; --castanha-900:#2A1711;

  /* ── Escala Cobalto ── */
  --cobalto-50:#F1F5FE; --cobalto-100:#DEE8FE; --cobalto-200:#BCD1FE; --cobalto-300:#95B6FF; --cobalto-400:#729AFB; --cobalto-500:#547FEC; --cobalto-600:#3E66D0; --cobalto-700:#1E3FA8; --cobalto-800:#203980; --cobalto-900:#112459;

  /* ── Cinza quente ── */
  --cinza-50:#FDF9F6; --cinza-100:#F6EEE8; --cinza-200:#E9E1DB; --cinza-300:#D6CEC8; --cinza-400:#B7AFAA; --cinza-500:#928B85; --cinza-600:#716A65; --cinza-700:#554E49; --cinza-800:#3A342F; --cinza-900:#211C17; --cinza-950:#0F0A06;

  /* ── Papéis de texto e superfície ── */
  --texto:var(--cinza-900); --texto-secundario:var(--cinza-700); --texto-sutil:var(--cinza-600); --borda:var(--cinza-300); --divisor:var(--cinza-200); --superficie:var(--cinza-50); --superficie-2:var(--cinza-100); --fundo:var(--linho);

  /* ── Laranja de ação: a matiz do laranja, aprofundada até o texto branco passar AA (4,66:1; 4,45:1 contra o fundo) ── */
  --laranja-acao:#B15F02;

  /* ── Papéis de cor (usar o papel, não o hex) ──
     Títulos e números grandes: verde escuro e terracota. Terracota só no logotipo, nas captions e nos números.
     Ação: laranja de ação com texto branco. Laranja da marca só no grifo e em marcador. */
  --cor-titulo:var(--oliva-800); --cor-caption:var(--terracota-700); --cor-numero:var(--terracota-600);
  --cor-acao:var(--laranja-acao); --cor-acao-forte:var(--laranja-700); --cor-acao-sobre-escuro:var(--laranja-200); /* com texto cacau */
  --cor-apoio:var(--oliva-700); --cor-apoio-suave:var(--oliva-100); --cor-destaque:var(--laranja-400); /* grifo e marcador */
  --cor-link:var(--oliva-800); --cor-papel:var(--linho);
  /* nomes curtos usados nas páginas */
  --ink-titulo:var(--cor-titulo); --caption:var(--cor-caption);

  /* ── Semântica ── */
  --positivo-soft:#E7F5E2; --positivo-borda:#BBD8B2; --positivo-solido:#477735; --positivo-ink:#29491D;
  --atencao-soft:#F9F0DA; --atencao-borda:#DECCA1; --atencao-solido:#826401; --atencao-ink:#503D00;
  --negativo-soft:#FFEBE9; --negativo-borda:#F3BFBA; --negativo-solido:#9F4D48; --negativo-ink:#632D2A;
  --informacao-soft:#E5F2FF; --informacao-borda:#AFD2F4; --informacao-solido:#2D6DA5; --informacao-ink:#174268;

  /* ── Dados: categórica (ordem fixa), tint para fundo de área ── */
  --dado-1:#3C7DB7; --dado-2:#5C8E4A; --dado-3:#C27095; --dado-4:#978122; --dado-5:#098F9B; --dado-6:#B87739; --dado-7:#7B63AB; --dado-8:#C26C61;
  --dado-1-tint:#D7EBFE; --dado-2-tint:#DBEFD5; --dado-3-tint:#FEDEEA; --dado-4-tint:#F0E8CB; --dado-5-tint:#CAF0F5; --dado-6-tint:#FCE3CD; --dado-7-tint:#EAE3FF; --dado-8-tint:#FEE0DB;

  /* ── Dados: sequencial (magnitude contínua) ── */
  --seq-terracota-100:#FFE0D7; --seq-terracota-200:#FEC0AD; --seq-terracota-300:#EDA28C; --seq-terracota-400:#DA856C; --seq-terracota-500:#C6684B; --seq-terracota-600:#A3472B; --seq-terracota-700:#8C3B22;
  --seq-azul-100:#D7EBFE; --seq-azul-200:#ACD6FE; --seq-azul-300:#85BDF2; --seq-azul-400:#66A4DE; --seq-azul-500:#468BC9; --seq-azul-600:#2D6DA4; --seq-azul-700:#18507F;
  --seq-verde-100:#D4F3C9; --seq-verde-200:#BBDDAF; --seq-verde-300:#9EC492; --seq-verde-400:#83AC75; --seq-verde-500:#689459; --seq-verde-600:#4E7540; --seq-verde-700:#36572A;

  /* ── Dados: ordinal (5 degraus) ── */
  --ord-terracota-1:#DD8364; --ord-terracota-2:#BF6849; --ord-terracota-3:#A14D2F; --ord-terracota-4:#843312; --ord-terracota-5:#641C00;
  --ord-azul-1:#61A4E2; --ord-azul-2:#4588C5; --ord-azul-3:#286DA7; --ord-azul-4:#01538B; --ord-azul-5:#003A65;
  --ord-verde-1:#7FAD70; --ord-verde-2:#659155; --ord-verde-3:#4B763B; --ord-verde-4:#325C22; --ord-verde-5:#194305;

  /* ── Dados: divergente (azul ← neutro → terracota) ── */
  --div-azul-3:#2D6DA4; --div-azul-2:#66A4DE; --div-azul-1:#ACD6FE; --div-meio:#E9E1DB; --div-terra-1:#FEC0AD; --div-terra-2:#DA856C; --div-terra-3:#A3472B;

  /* ── Níveis de superfície (light mode, só escala de cinza) ── */
  --nivel-0:var(--cinza-50); --nivel-1:#FFFFFF; --nivel-2:var(--cinza-100); --nivel-3:var(--cinza-200);

  /* ── Tipografia: Sentient (serifada, Fontshare) em 400, 400 itálico, 500 e 700 para títulos, texto e números.
     Serifada pede menos peso e menos aperto que uma sem serifa: títulos e números em 500, não em 700.
     General Sans (sem serifa, Fontshare) em 500 e 600 só para botões, tags (rótulos, captions, badges) e placeholders.
     Hierarquia por tamanho, peso e cinza ── */
  --font-hero:'Sentient',Georgia,serif; --hero-peso:500; --hero-tracking:-.02em; --hero-entrelinha:1.06;
  --font-titulo:'Sentient',Georgia,serif; --titulo-peso:500; --titulo-tracking:-.012em; --titulo-entrelinha:1.16;
  --font-texto:'Sentient',Georgia,serif; --texto-peso:400; --texto-tracking:0; --texto-entrelinha:1.55;
  --font-ui:'General Sans',system-ui,sans-serif; /* botões, tags e placeholders */
  --peso-forte:500; --peso-caption:600; /* caption: rótulo em caixa-alta, em General Sans */
  --peso-numero:500; /* valor do número; a unidade vai em 400 itálico e .56em */
  /* escala: display 48→32 · h2 34→26 · h3 20 · lead 20→17 · corpo 16 e 15 · ui 15 · meta 13 e 12 · caption 11–12 caixa-alta +.12em */
  --display:clamp(32px,3.6vw,48px); --h2:clamp(26px,2.4vw,34px); --h3:20px; --lead:clamp(17px,1.6vw,20px);
  --corpo:16px; --corpo-s:15px; --ui:15px; --meta:13px; --caption-tam:12px;

  /* ── Raio: cantos generosos. Base em canto redondo; com corner-shape, a curva vira contínua (squircle) e o raio cresce ── */
  --radius-none:0; --radius-sm:8px; --radius-md:12px; --radius-lg:20px; --radius-xl:28px; --radius-full:9999px; --radius-pill:999px;

  /* ── Bordas ── */
  --borda-sutil:var(--cinza-200); --borda-media:var(--cinza-300); --borda-forte:var(--cinza-500); /* forte: 3:1 sobre branco, para campos */

  /* ── Interativo: link e foco no verde dos títulos (9,9:1). Ação primária: laranja de ação, com texto branco ── */
  --interativo:var(--oliva-800); --interativo-hover:var(--oliva-900);
  --focus-ring:0 0 0 3px rgba(63,67,33,.16);
  --acao:var(--laranja-acao); --acao-hover:var(--laranja-600); --acao-ativa:var(--laranja-700); --acao-texto:#FFFFFF;

  /* ── Espaçamento (base 8, herdada do DS GCB) ── */
  --spacing-01:2px; --spacing-02:4px; --spacing-03:8px; --spacing-04:12px; --spacing-05:16px;
  --spacing-06:24px; --spacing-07:32px; --spacing-08:40px; --spacing-09:48px; --spacing-10:64px;

  /* ── Layout ── */
  --container-max:1280px; --pad-lateral:64px; --pad-lateral-mobile:16px; --grid-gap:24px;
  /* breakpoints (Carbon): sm 320 · md 672 · lg 1056 · xl 1312 · max 1584 */

  /* ── Elevação (sombra em 2 camadas, tingida com cacau; repouso = cinza + borda, sem sombra) ── */
  --shadow-rgb:42,23,17;
  --elevation-01:0 1px 2px rgba(var(--shadow-rgb),.06), 0 1px 3px rgba(var(--shadow-rgb),.08);
  --elevation-02:0 2px 4px rgba(var(--shadow-rgb),.06), 0 4px 12px rgba(var(--shadow-rgb),.08);
  --elevation-03:0 4px 8px rgba(var(--shadow-rgb),.06), 0 12px 28px rgba(var(--shadow-rgb),.10);
  --elevation-04:0 8px 16px rgba(var(--shadow-rgb),.08), 0 24px 56px rgba(var(--shadow-rgb),.16);

  /* ── Vidro (glassmorphism): branco translúcido + desfoque com saturação + fio de luz no topo.
     Só funciona sobre algo com cor atrás (foto ou as manchas da paleta); sobre fundo liso vira um card branco ── */
  --glass-bg:linear-gradient(155deg,rgba(255,255,255,.66) 0%,rgba(255,255,255,.38) 100%);
  --glass-line:rgba(255,255,255,.78);
  --glass-blur:blur(24px) saturate(1.7);
  --glass-sombra:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(74,42,34,.04), 0 22px 44px -22px rgba(74,42,34,.26);
  --glass-sombra-alta:inset 0 1px 0 #fff, 0 1px 1px rgba(74,42,34,.05), 0 30px 60px -26px rgba(74,42,34,.34);

  /* ── Motion ── */
  --transition-fast:100ms; --transition-base:200ms; --transition-slow:400ms;
  --easing-standard:cubic-bezier(.2,0,.38,.9); --easing-entrance:cubic-bezier(0,0,.38,.9); --easing-exit:cubic-bezier(.2,0,1,.9);
}

/* curva contínua (squircle), onde o navegador suporta: mesmos papéis, raios maiores,
   porque a curva contínua parece menor que o raio nominal. Componentes aplicam corner-shape: squircle */
@supports (corner-shape: squircle) {
  :root { --radius-sm:12px; --radius-md:18px; --radius-lg:30px; --radius-xl:44px; }
}