/* Núcleo ES · base · VISS Digital · viss.digital
   Escala proporcional no MODO ACESSÍVEL (raiz mista: parte fixa + parte proporcional),
   para o zoom do navegador continuar funcionando (cliente de saúde, WCAG 1.4.4).
   Frames: 390 / 768 / 1440. Tudo em rem (px do Figma ÷ 16). */

/* Inter variável, subconjunto latin (cobre os acentos do português) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-italic-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* escala · modo acessível */
:root {
  /* mobile · frame 390 */
  font-size: clamp(15px, calc(4px + 100vw / 390 * 12), 17.5px);
}
@media (min-width: 768px) {
  /* tablet · frame 768 */
  :root { font-size: clamp(16px, calc(4px + 100vw / 768 * 12), 20px); }
}
@media (min-width: 1280px) {
  /* desktop · frame 1440 */
  :root { font-size: clamp(14.5px, calc(4px + 100vw / 1440 * 12), 20px); }
}

html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
input, select, textarea { font-size: max(1rem, 16px); }

/* tokens */
:root {
  /* espaço · Figma px ÷ 16 */
  --space-4: .25rem;   --space-8: .5rem;    --space-12: .75rem;  --space-16: 1rem;
  --space-20: 1.25rem; --space-24: 1.5rem;  --space-32: 2rem;    --space-40: 2.5rem;
  --space-48: 3rem;    --space-60: 3.75rem; --space-64: 4rem;    --space-80: 5rem;
  --space-96: 6rem;    --space-120: 7.5rem;
  --space-section: 7.5rem;
  --space-seam: 3.75rem;
  --gutter: 1.25rem;          /* 20 · mobile */
  --content: 21.875rem;       /* 350 · conteúdo do frame 390; a página é uma coluna de link na bio */

  /* texto · Figma px ÷ 16 */
  --text-12: .75rem;  --text-14: .875rem; --text-16: 1rem;   --text-18: 1.125rem;
  --text-20: 1.25rem; --text-22: 1.375rem; --text-24: 1.5rem; --text-32: 2rem;
  --text-40: 2.5rem;  --text-48: 3rem;
  --leading-tight: 1.1;  --leading-body: 1.6;
  --tracking-label: .06em;   /* caixa alta em botão e etiqueta */

  /* fonte */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font-sans);
  --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-bold: 700;

  /* cor · papéis (marca do Núcleo ES) */
  --color-bg: #452d1a;             /* fundo da página */
  --color-surface: #573c2b;        /* cartão */
  --color-logo-bg: #3c2924;        /* círculo do monograma ES */
  --color-text: #ffffff;
  --color-text-muted: #b3acac;     /* subtítulo; era #9c9393 (4,26:1 no fundo), este dá 5,73:1 no fundo e 4,51:1 no cartão */
  --color-line: rgb(255 255 255 / .12);   /* só filete divisor, nunca contorno de card */
  --color-text-soft: #d9cfc9;      /* linha de apoio e descrição · 6,58:1 no cartão, 8,35:1 no fundo */
  --color-surface-hover: #644833;  /* cartão em hover */
  --color-surface-active: #4e3424; /* cartão pressionado */
  --color-on-accent: #2a1a0e;      /* texto sobre o dourado · 4,94:1 */
  --color-on-light: #313131;       /* texto sobre a pílula branca · 13,01:1 */
  --color-focus: #d9b766;          /* anel de foco · 6,64:1 no fundo, 5,23:1 no cartão */
  --color-primary: #aa863f;        /* dourado */
  --color-on-primary: #ffffff;
  --color-accent: #aa863f;         /* hover dos ícones */
  --color-success: #4ade80; --color-error: #f87171;
  --color-warning: #fbbf24; --color-info: #93c5fd;

  /* forma */
  --radius-8: .5rem; --radius-12: .75rem; --radius-16: 1rem; --radius-pill: 999rem;
  --shadow-low: 0 .125rem .5rem rgb(0 0 0 / .18);
  --shadow-mid: 0 .5rem 1.5rem rgb(0 0 0 / .28);

  /* camadas */
  --layer-sticky: 10; --layer-drawer: 100; --layer-modal: 200; --layer-toast: 300;
}
@media (min-width: 768px)  { :root { --gutter: 2rem; --content: 30rem; } }
@media (min-width: 1280px) { :root { --gutter: 4rem; --content: 30rem; } }

/* reset enxuto */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-16);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }
h1, h2, h3 { line-height: var(--leading-tight); font-weight: var(--weight-regular); text-wrap: balance; }

/* foco visível */
:focus-visible {
  outline: .125rem solid var(--color-focus);
  outline-offset: .125rem;
  border-radius: var(--radius-8);
}

/* só para leitor de tela */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}