/* Design tokens do santinho (Material 3) — portados da variante c-cartao-fisico
   (docs/prototypes/001-santinho-estatico/c-cartao-fisico/NOTAS.md). Todo valor visual vive aqui;
   santinho.css só consome custom properties. */

/* Urbanist variável 500–900, subconjunto latin, servida localmente (sem Google Fonts: não vaza IP — LGPD).
   Licença: fontes/OFL.txt. */
@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url("fontes/urbanist-latin-var.woff2") format("woff2");
}

:root {
  /* ── Paleta de referência (NOTAS.md, seção 1) ── */
  --ref-marinho: #2D4492;
  --ref-ciano: #38B8E9;
  --ref-papel: #FFFFFF;
  --ref-nevoa: #E4ECF6;
  --ref-tinta: #16224F;
  --ref-tinta-rgb: 22 34 79;
  --ref-erro: #B3261E;

  /* ── Papéis de cor M3 ── */
  --md-sys-color-primary: var(--ref-marinho);
  --md-sys-color-on-primary: var(--ref-papel);
  --md-sys-color-primary-container: #D5DEF5;
  --md-sys-color-secondary: var(--ref-ciano);
  --md-sys-color-on-secondary: var(--ref-tinta);
  --md-sys-color-tertiary: #0B6A8F;
  --md-sys-color-surface: var(--ref-nevoa);
  --md-sys-color-on-surface: var(--ref-tinta);
  --md-sys-color-on-surface-variant: #45506E;
  --md-sys-color-surface-container-lowest: var(--ref-papel);
  --md-sys-color-surface-container-highest: #C3D0E4;
  --md-sys-color-outline: #6B7897;
  --md-sys-color-error: var(--ref-erro);
  --md-sys-color-scrim: rgb(var(--ref-tinta-rgb) / 0.62);
  --md-sys-state-hover-opacity: 8%;
  --md-sys-state-pressed-opacity: 14%;
  --foco: var(--md-sys-color-primary);

  /* ── Tipo: uma família (Urbanist). Escala M3 como atalhos de font ── */
  --fonte-marca: "Urbanist", ui-sans-serif, system-ui, sans-serif;
  --md-sys-typescale-title-large: 800 1.375rem/1.75rem var(--fonte-marca);
  --md-sys-typescale-title-medium: 650 1.0625rem/1.4rem var(--fonte-marca);
  --md-sys-typescale-body-large: 500 1.0625rem/1.65rem var(--fonte-marca);
  --md-sys-typescale-body-medium: 500 0.9375rem/1.35rem var(--fonte-marca);
  --md-sys-typescale-label-large: 700 0.9375rem/1.25rem var(--fonte-marca);
  --md-sys-typescale-label-medium: 600 0.8125rem/1.05rem var(--fonte-marca);
  /* Extensão herói: medida em cqi (largura do cartão), cresce junto com ele */
  --tipo-heroi-nome: 900 19.5cqi/0.84 var(--fonte-marca);
  --tipo-heroi-sobrenome: 800 8.4cqi/1 var(--fonte-marca);
  --tipo-heroi-numero: 900 22cqi/0.8 var(--fonte-marca);
  --tipo-heroi-cargo: 700 4.2cqi/1.15 var(--fonte-marca);
  --tipo-verso-nome: 800 6.2cqi/1 var(--fonte-marca);
  --tipo-verso-numero: 900 9.6cqi/0.9 var(--fonte-marca);
  --tracking-heroi: -0.015em;
  --tracking-cargo: 0.04em;

  /* ── Forma M3 ── */
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 999px;

  /* ── Espaço (grade de 4 px) e medidas ── */
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.25rem;
  --esp-6: 1.5rem;
  --esp-cartao: 6cqi;
  --esp-lockup: 1.6cqi;
  --esp-verso: 3cqi;
  --coluna-max: 430px;
  --alvo-min: 48px;
  --alvo-play: 56px;
  --icone: 1.25rem;
  --icone-play: 1.75rem;
  --icone-traco: 1.8;
  --progresso-altura: 4px;
  --anel-foco: 3px;
  --anel-foco-afastamento: 2px;
  --anel-carregando: 3px;
  --borda-contorno: 1.5px;
  --borda-proposta: 3px;
  --sublinhado-hover: 2px;
  --medida-texto: 60ch;
  --frase-linhas: 2;           /* linhas reservadas para a frase do player (evita CLS) */

  /* ── Cartão ── */
  --proporcao-cartao: 7 / 10;
  --razao-cartao: 0.7;          /* 7 ÷ 10: largura máxima a partir da altura livre */
  --reserva-dock: 14.5rem;      /* altura do dock + respiros; o cartão encolhe em telas baixas */
  --foto-largura: 84%;
  --foto-topo: 2cqi;
  --selo-largura: 31cqi;
  --qr-min: 180px;
  --qr-largura: 66cqi;
  --proporcao-video: 720 / 368;

  /* ── Elevação M3 (tinta como cor de sombra) ── */
  --md-sys-elevation-level3: 0 4px 8px 3px rgb(var(--ref-tinta-rgb) / 0.15), 0 1px 3px rgb(var(--ref-tinta-rgb) / 0.3);
  --borda-papel: 0 0 0 1px rgb(var(--ref-tinta-rgb) / 0.07);

  /* ── 3D e sombra dinâmica ── */
  --perspectiva: 90rem;
  --elevar-giro: 0.05;          /* o cartão cresce 5% no meio do giro: ele sai da mesa */
  --giro-pouso: -38deg;
  --sombra-y: 0.625rem;
  --sombra-y-giro: 1.75rem;
  --sombra-desfoque: 0.75rem;
  --sombra-desfoque-giro: 1.25rem;
  --sombra-recuo: 0.5rem;
  --sombra-alfa: 0.34;
  --sombra-alfa-giro: 0.2;
  --sombra-largura-min: 0.06;

  /* ── Motion M3 ── */
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-long4: 600ms;
  --md-sys-motion-duration-extra-long2: 800ms;
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --dur-virar: var(--md-sys-motion-duration-long4);
  --dur-carregando: 900ms;
  --escala-pressionado: 0.97;
  --escala-dialogo-inicial: 0.96;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-virar: 0ms; }
}