/* ============================================================================
   Men Upgrade — design tokens
   Espelham MpPalette do app (shared/core/src/commonMain/kotlin/com/menupgrade/
   core/ui/theme/MpColor.kt). NÃO inventar cor nova: se faltar um tom, derive
   destes ou peça a inclusão no guia — o app e o site têm que bater.
   ========================================================================== */

:root {
  /* ── Núcleo da marca ───────────────────────────────────────────────────── */
  --mu-navy:            #031832;  /* fundo principal */
  --mu-navy-deep:       #06141B;  /* degradês e superfícies mais baixas */
  --mu-graphite:        #141414;

  /* ── Superfícies elevadas, da mais alta à mais próxima do fundo ───────── */
  --mu-surface-raised:  #253745;
  --mu-surface-mid:     #17293A;
  --mu-surface-low:     #11212D;
  --mu-surface-base:    #0A1E33;

  /* Fundo exclusivo desta direção: navy puxado para o preto de sala escura */
  --mu-stage:           #04101C;

  /* ── Tinta ─────────────────────────────────────────────────────────────── */
  --mu-ink:             #FAFAFA;  /* texto principal */
  --mu-ink-2:           #CCD0CF;  /* realce, prata clara */
  --mu-ink-3:           #9BA8AB;  /* apoio */
  --mu-ink-4:           #8A95A0;  /* rótulos, legendas */
  --mu-slate:           #4A5C6A;  /* bordas e contornos */

  /* ── Estado (semântico — nunca é "a cor da série 3") ──────────────────── */
  --mu-positive:        #96D096;  /* confirmado, ativo — e a cor de ação aqui */
  --mu-warning:         #E8A468;
  --mu-negative:        #E8836F;

  /* ── Metalizado: é GRADIENTE, nunca cor chapada ───────────────────────── */
  /* Regra do guia: usar em fio, borda e texto. Área grande em prata quebra
     a identidade. Ver MpBrandTokens.metal / metalLine. */
  --mu-metal:      linear-gradient(105deg,#E4E8E9,#CCD0CF,#8A95A0,#4A5C6A,#9BA8AB);
  --mu-metal-line: linear-gradient(90deg,transparent,#8A95A0,#CCD0CF,#8A95A0,transparent);

  /* ── Tipografia ────────────────────────────────────────────────────────── */
  /* As mesmas faces de shared/core/src/commonMain/composeResources/font.
     A figura grande usa a face de CORPO, nunca a display. */
  --mu-font-display: "Big Shoulders Display","Big Shoulders","Arial Narrow",sans-serif;
  --mu-font-body:    "Jost","Avenir Next","Segoe UI",system-ui,sans-serif;

  /* Escala — clamp(min, fluido, max) */
  --mu-t-hero:   clamp(46px, 9.7vw, 142px);
  --mu-t-h2:     clamp(34px, 5.2vw,  64px);
  --mu-t-h3:     clamp(30px, 4.4vw,  52px);
  --mu-t-item:   clamp(26px, 3.4vw,  40px);
  --mu-t-lead:   17px;
  --mu-t-body:   15px;
  --mu-t-small:  13.5px;
  --mu-t-label:  15px;   /* eyebrow: display, 600, letter-spacing .26em, caixa alta */

  /* ── Espaçamento ───────────────────────────────────────────────────────── */
  --mu-gutter:   clamp(20px, 5vw, 72px);   /* respiro lateral da página */
  --mu-block:    clamp(52px, 8vw, 100px);  /* distância entre seções */
  --mu-gap:      14px;

  /* ── Forma ─────────────────────────────────────────────────────────────── */
  --mu-radius-photo: 3px;    /* foto é quase reta: é cinema, não app */
  --mu-radius-card:  14px;
  --mu-radius-pill:  30px;
  --mu-hairline:     #15293A;

  /* ── Movimento ─────────────────────────────────────────────────────────── */
  --mu-ease:       cubic-bezier(.22,.9,.24,1);
  --mu-dur-cut:    1.05s;   /* corte de navalha */
  --mu-dur-scis:   .9s;     /* tesoura */
  --mu-dur-quick:  .18s;    /* hover */
}

/* A marca é dark-first por definição do guia: não existe tema claro.
   Se um dia existir, ele é um conjunto novo de tokens, não uma inversão. */

/* ── Faces servidas do próprio domínio ──────────────────────────────────────
   Recorte latino (woff2) dos .ttf de shared/core/src/commonMain/composeResources/font
   do monorepo. Licença SIL OFL 1.1: ver OFL-*.txt nesta mesma pasta.        */
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/big_shoulders_display_medium.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/big_shoulders_display_semibold.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/big_shoulders_display_bold.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/big_shoulders_display_extrabold.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/jost_light.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/jost_regular.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/jost_medium.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/jost_semibold.woff2") format("woff2"); }