/* CBS Design System — tokens (cópia de tokens/*.css). Não edite aqui sem atualizar o design system. */
@font-face{font-family:"Quicksand";src:url("../fonts/Quicksand-VariableFont_wght.ttf") format("truetype-variations"),url("../fonts/Quicksand-VariableFont_wght.ttf") format("truetype");font-weight:300 700;font-style:normal;font-display:swap}

/* ---- colors ---- */
/* ============================================================
   CORES — Manual de Identidade Visual CBS, out/2025, p.25
   3 principais + 2 secundárias. Os valores HEX são normativos.
   ============================================================ */
:root{
  /* --- Principais (normativas) --- */
  --cbs-roxo:#312783;          /* PRINCIPAL 1 · "azul escuro (roxo)" · CMYK 100 100 0 0 */
  --cbs-azul:#009cb4;          /* PRINCIPAL 2 · azul claro · CMYK 100 0 30 0 */
  --cbs-amarelo:#dc9c01;       /* PRINCIPAL 3 · o manual chama "amarelo"; os arquivos
                                  oficiais chamam "laranja". Hex amostrado do PNG
                                  oficial do cliente. CMYK 10 40 100 5 */
  --cbs-laranja:#dc9c01;       /* alias de --cbs-amarelo, pelo nome usado nos arquivos */
  /* --- Secundárias (normativas) --- */
  --cbs-cinza-azulado:#84a0af; /* SECUNDÁRIA 1 · CMYK 30 0 0 40 */
  --cbs-cinza-claro:#c8d3d9;   /* SECUNDÁRIA 2 · CMYK 10 0 0 20 */

  /* --- Extensões de UI (NÃO estão no manual) ---
     Derivadas por interpolação em oklch a partir das cores normativas,
     apenas para estados de interface: hover, press, fundos, bordas. */
  --cbs-roxo-900:#1d1750;
  --cbs-roxo-800:#261f68;
  --cbs-roxo-700:#2b2275;
  --cbs-roxo-600:#312783;
  --cbs-roxo-500:#463c95;
  --cbs-roxo-400:#6a61ad;
  --cbs-roxo-200:#b6b1d9;
  --cbs-roxo-100:#dedcef;
  --cbs-roxo-050:#f1f0f9;

  --cbs-azul-700:#00707f;
  --cbs-azul-600:#00889c;
  --cbs-azul-500:#009cb4;
  --cbs-azul-400:#3fb5c8;
  --cbs-azul-200:#9ad9e3;
  --cbs-azul-100:#cdecf1;
  --cbs-azul-050:#e9f7f9;

  --cbs-amarelo-700:#96690a;  /* escurecido p/ texto: 4,9:1 sobre branco, 4,6:1 sobre amarelo-050 */
  --cbs-amarelo-600:#c68a00;
  --cbs-amarelo-500:#dc9c01;
  --cbs-amarelo-400:#eab53c;
  --cbs-amarelo-200:#f5dc9b;
  --cbs-amarelo-100:#faeecd;
  --cbs-amarelo-050:#fdf8ea;

  --cbs-neutro-000:#ffffff;
  --cbs-neutro-025:#f7f9fa;
  --cbs-neutro-050:#eef2f4;
  --cbs-neutro-100:#e2e9ec;   /* tint de --cbs-cinza-claro */
  --cbs-neutro-200:#c8d3d9;   /* = SECUNDÁRIA 2 */
  --cbs-neutro-300:#a9bcc7;
  --cbs-neutro-400:#84a0af;   /* = SECUNDÁRIA 1 */
  --cbs-neutro-500:#5a7180;   /* escurecido p/ passar 4.5:1 sobre branco e sobre neutro-050 */
  --cbs-neutro-600:#4e626e;
  --cbs-neutro-700:#3a4a53;
  --cbs-neutro-800:#263138;
  --cbs-neutro-900:#141b1f;

  /* --- Semânticas de estado (extensão, fora do manual) --- */
  --cbs-sucesso:#0d7a54;      /* escurecido: 4,4:1 era insuficiente. Agora 5,3:1 sobre branco */
  --cbs-sucesso-bg:#e6f4ee;
  --cbs-atencao:#dc9c01;      /* reaproveita PRINCIPAL 3 */
  --cbs-atencao-bg:#fdf8ea;
  --cbs-erro:#c0392b;
  --cbs-erro-bg:#fbeceb;
  --cbs-info:#009cb4;         /* reaproveita PRINCIPAL 2 */
  --cbs-info-bg:#e9f7f9;

  /* ============ Aliases semânticos ============ */
  --brand-primary:var(--cbs-roxo);
  --brand-secondary:var(--cbs-azul);
  --brand-accent:var(--cbs-amarelo);

  --surface-page:var(--cbs-neutro-025);
  --surface-card:var(--cbs-neutro-000);
  --surface-raised:var(--cbs-neutro-000);
  --surface-sunken:var(--cbs-neutro-050);
  --surface-inverse:var(--cbs-roxo);
  --surface-inverse-deep:var(--cbs-roxo-900);
  --surface-subtle-brand:var(--cbs-roxo-050);
  --surface-subtle-info:var(--cbs-azul-050);
  /* Bloco azul que carrega TEXTO DE CORPO: --cbs-azul dá 3.3:1 com branco,
     só serve para tipo em escala de título. Para corpo, use o -deep. */
  --surface-info-deep:var(--cbs-azul-700);

  --text-heading:var(--cbs-roxo);
  --text-body:var(--cbs-neutro-800);
  /* Os três níveis abaixo passam 4.5:1 sobre branco EM QUALQUER TAMANHO.
     --cbs-neutro-400 (2.75:1) e --cbs-roxo-200 nunca são cor de texto sobre claro. */
  --text-muted:var(--cbs-neutro-600);    /* 6.4:1 · texto secundário */
  --text-faint:var(--cbs-neutro-500);    /* 5.1:1 · metadados, SKU, contagens */
  --text-label:var(--cbs-neutro-600);    /* 6.4:1 · micro rótulo em caixa alta */
  /* Texto sobre fundo roxo: neutro-400 dá só 4.4:1. Use estes. */
  --text-on-brand-muted:var(--cbs-roxo-200);  /* 5.9:1 sobre --cbs-roxo */
  --text-on-brand:var(--cbs-neutro-000);
  --text-on-accent:var(--cbs-neutro-900);
  --text-link:var(--cbs-azul-700);
  --text-link-hover:var(--cbs-roxo);

  --border-subtle:var(--cbs-neutro-100);
  --border-default:var(--cbs-neutro-200);
  --border-strong:var(--cbs-neutro-400);
  --border-brand:var(--cbs-roxo);

  --focus-ring:var(--cbs-azul);
}

/* ---- typography ---- */
/* ============================================================
   TIPOGRAFIA — Manual CBS p.21-23
   · Logotipo: letras desenhadas à mão — NÃO é fonte. Use os SVGs.
   · QUICKSAND é a fonte oficial do sistema (decisão do cliente) — texto
     corrido, títulos e tag lines (caixa alta). A Carbona do manual não é usada.
   · Quicksand — Bold / Medium / Light.
   · Preferir alinhamento à esquerda e entrelinha generosa.
   ============================================================ */
:root{
  --font-core:"Quicksand",system-ui,sans-serif;
  --font-tagline:var(--font-core);
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,monospace;

  --fw-light:300; 
  --fw-regular:400; 
  --fw-medium:500; 
  --fw-semibold:600; 
  --fw-bold:700; 

  /* escala 1.25 (major third) a partir de 16px */
  --fs-3xs:11px;
  --fs-2xs:12px;
  --fs-xs:13px;
  --fs-sm:14px;
  --fs-md:16px;
  --fs-lg:20px;
  --fs-xl:25px;
  --fs-2xl:31px;
  --fs-3xl:39px;
  --fs-4xl:49px;
  --fs-5xl:61px;
  --fs-6xl:76px;

  --lh-tight:1.1; 
  --lh-snug:1.25; 
  --lh-normal:1.5; 
  --lh-relaxed:1.7; 

  --ls-tight:-0.01em; 
  --ls-normal:0; 
  --ls-wide:0.04em; 
  --ls-caps:0.08em;    /* títulos em caixa alta, como no manual */

  /* --- papéis tipográficos --- */
  --type-display-font:var(--font-core); 
  --type-display-weight:var(--fw-bold); 
  --type-display-case:uppercase; 
  --type-display-ls:var(--ls-caps); 

  --type-title-weight:var(--fw-bold); 
  --type-subtitle-weight:var(--fw-medium); 
  --type-body-weight:var(--fw-light); 
  --type-ui-weight:var(--fw-medium); 
}

/* ---- spacing ---- */
/* Escala de espaçamento base 4px. A "área de proteção" da marca
   (manual p.13) equivale ao dobro do quadrado do símbolo: --logo-clearspace. */
:root{
  --sp-0:0; 
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-8:32px;
  --sp-10:40px;
  --sp-12:48px;
  --sp-16:64px;
  --sp-20:80px;
  --sp-24:96px;
  --sp-32:128px;

  --gutter-page:var(--sp-6);
  --gutter-page-lg:var(--sp-12);
  --max-content:1200px; 
  --max-prose:68ch; 

  /* marca */
  --logo-clearspace:2em;   /* 2× o lado do quadrado, relativo ao tamanho da marca */
  --logo-min-screen:140px; /* horizontal · manual p.16 */
  --logo-min-print:25mm; 
  --selo-min-screen:230px; /* selo · manual p.16 */
  --selo-min-print:40mm; 
}

/* ---- radii ---- */
/* A marca é construída com um QUADRADO de cantos vivos. O raio é,
   portanto, contido: 4-8px em UI, 0 em elementos que citam o símbolo. */
:root{
  --radius-none:0;
  --radius-xs:2px;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:20px;
  --radius-pill:999px;
  --radius-card:var(--radius-md);
  --radius-control:var(--radius-sm);
  --radius-square:var(--radius-none);  /* citações do quadrado da marca */

  --border-width-hairline:1px;
  --border-width-thick:2px;
  --border-width-rule:3px;
}

/* ---- elevation ---- */
/* Sombras discretas e frias, tingidas com o roxo institucional.
   Nada de sombras difusas escuras: a marca é clara e leve. */
:root{
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(49,39,131,.06);
  --shadow-sm:0 1px 3px rgba(49,39,131,.08),0 1px 2px rgba(49,39,131,.04);
  --shadow-md:0 4px 12px rgba(49,39,131,.10);
  --shadow-lg:0 12px 28px rgba(49,39,131,.14);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.6);
  --ring-focus:0 0 0 3px rgba(0,156,180,.35);
  --ring-error:0 0 0 3px rgba(192,57,43,.25);
}

/* ---- motion ---- */
/* Movimento é conceito de marca ("gente que move o cuidado"): as
   letras curvas simbolizam caminho. Animações deslizam, não pulam. */
:root{
  --dur-instant:80ms; 
  --dur-fast:140ms; 
  --dur-base:220ms; 
  --dur-slow:360ms; 
  --dur-deliberate:600ms; 

  --ease-standard:cubic-bezier(.2,.6,.25,1); 
  --ease-out:cubic-bezier(.16,1,.3,1); 
  --ease-in:cubic-bezier(.5,0,.9,.4); 
  --ease-move:cubic-bezier(.33,0,.15,1);   /* curva do "movimento" CBS */

  --transition-control:color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard); 
}

/* ---- base ---- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-core);font-weight:var(--fw-light);font-size:var(--fs-md);line-height:var(--lh-relaxed);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4,h5,h6{font-family:var(--font-core);color:var(--text-heading);margin:0 0 var(--sp-3);line-height:var(--lh-snug);font-weight:var(--fw-bold);text-wrap:balance}
h1{font-size:var(--fs-3xl);text-transform:uppercase;letter-spacing:var(--ls-caps)}
h2{font-size:var(--fs-2xl);text-transform:uppercase;letter-spacing:var(--ls-wide)}
h3{font-size:var(--fs-xl);font-weight:var(--fw-medium)}
h4{font-size:var(--fs-lg);font-weight:var(--fw-medium)}
h5,h6{font-size:var(--fs-md);font-weight:var(--fw-semibold)}
p{margin:0 0 var(--sp-4);max-width:var(--max-prose)}
strong{font-weight:var(--fw-semibold)}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--text-link) 35%,transparent);transition:var(--transition-control)}
a:hover{color:var(--text-link-hover);border-bottom-color:var(--text-link-hover)}
a:focus-visible{outline:none;box-shadow:var(--ring-focus);border-radius:var(--radius-xs)}
small{font-size:var(--fs-sm)}
code,kbd{font-family:var(--font-mono);font-size:.9em}
hr{border:none;border-top:var(--border-width-hairline) solid var(--border-subtle);margin:var(--sp-8) 0}
::selection{background:var(--cbs-azul-200);color:var(--cbs-roxo-900)}
:focus-visible{outline:none;box-shadow:var(--ring-focus)}