/* ============================================================
   LIOST — Site institucional · Design Tokens
   Fonte da verdade: Social LIOST/contexto.md (2026-07-23)
   Violeta âncora · limão tempero · esmeralda superfície.
   ============================================================ */

:root {
  /* ---- Marca ---- */
  --violeta: #A594D1;
  --limao:   #C4D97A;
  --esmeralda: #2C7A57;
  --nucleo:  #FFFFFF;

  /* ---- Escala violeta ---- */
  --violeta-50:#F4F1FA; --violeta-100:#E6E0F3; --violeta-200:#D0C6E8;
  --violeta-300:#A594D1; --violeta-400:#8B78BF; --violeta-500:#7361A6;
  --violeta-600:#5F4E96; --violeta-700:#4A3C77; --violeta-800:#362B58; --violeta-900:#241C3B;

  /* ---- Escala limão ---- */
  --limao-50:#F7FAEC; --limao-100:#EDF3D6; --limao-200:#DCE9B2;
  --limao-300:#C4D97A; --limao-400:#AAC257; --limao-500:#93AB41;
  --limao-600:#7F9A2E; --limao-700:#637826; --limao-800:#48571C; --limao-900:#2E3812;

  /* ---- Neutros (leve viés violeta) ---- */
  --n-0:#FFFFFF; --n-50:#F7F6F3; --n-100:#EFEDEA; --n-200:#DDDAD6; --n-300:#BFBBC4;
  --n-400:#8A8794; --n-500:#5F5C69; --n-600:#45424D; --n-700:#2E2C36; --n-800:#1F1E25; --n-900:#171717;

  /* ---- Papéis (tema escuro é o principal) ---- */
  --bg:        #171717;
  --bg-2:      #1F1E25;
  --surface:   #23222B;
  --ink:       #F4F2F7;
  --ink-dim:   #C4C0CC;
  --ink-mute:  #8F8B99;
  --line:      rgba(255,255,255,.10);
  --line-soft: rgba(255,255,255,.06);

  /* anel de foco: muda por superfície (o outline-offset o desenha
     sobre o fundo de trás, então ele precisa contrastar com ELE) */
  --focus:     #F2F0F5;

  /* papéis do tema claro (aplicados por .paper) */
  --paper-bg:   #F7F6F3;
  --paper-ink:  #1F1E25;
  --paper-dim:  #45424D;
  --paper-mute: #6E6B77;
  --paper-line: rgba(31,30,37,.14);

  /* ---- Tipografia ---- */
  --f-display: "Walkway", system-ui, sans-serif;
  --f-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --w-body: 400;
  --w-medium: 500;
  --w-semibold: 600;   /* Walkway SemiBold = mais leve na largura normal */
  --w-bold: 700;
  --w-black: 900;

  /* escala fluida — cresce do celular até a TV (px por vw, com piso e teto).
     antes era fixa, por isso as letras ficavam pequenas em monitor grande */
  --fs-hero:  clamp(2.3rem, 1.55rem + 3.4vw, 4.6rem);
  --fs-h2:    clamp(2rem, 1.5rem + 2.4vw, 3.6rem);
  --fs-h3:    clamp(1.35rem, 1.15rem + 1vw, 2.05rem);
  --fs-lead:  clamp(1.15rem, 1.05rem + 0.5vw, 1.55rem);
  --fs-body:  clamp(1.12rem, 1.04rem + 0.34vw, 1.4rem);
  --fs-sm:    clamp(0.94rem, 0.89rem + 0.2vw, 1.12rem);
  --fs-label: clamp(0.81rem, 0.78rem + 0.13vw, 0.95rem);

  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-body:  1.62;

  /* ---- Espaçamento (base 8) ---- */
  --s-1:4px; --s-2:8px; --s-3:16px; --s-4:24px; --s-5:32px;
  --s-6:48px; --s-7:64px; --s-8:96px; --s-9:128px; --s-10:176px;

  /* cresce nas telas grandes pra não sobrar tanto vão nas laterais;
     o texto continua com medida própria (ch), então não fica largo demais */
  --container: min(94vw, 1600px);
  --measure: 62ch;
  --gutter: clamp(20px, 5vw, 56px);
  --section-y: clamp(72px, 12vh, 160px);

  /* ---- Raio ---- */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* ---- Movimento ---- */
  --t-fast: 180ms;
  --t: 320ms;
  --t-slow: 640ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- z-index semântico ---- */
  --z-nav: 100;
  --z-overlay: 200;
}