/* ANGBrasil · Tokens do tema XARPY · v1.0.6
   Única fonte de cores, tipografia, espaçamento, medidas, raios, sombras e movimento.
   style.css só lê var(--…); nenhum valor literal de cor, tamanho ou duração fora deste arquivo.
   Fontes: Poppins (OFL), subconjuntos latin e latin-ext, font-display: swap. */

/* ANGBrasil · Tokens do tema XARPY
   Única fonte de cores, fontes, raios, sombras, espaçamentos e durações.
   Valores provisórios do design aprovado (não são a identidade oficial confirmada). */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/poppins-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/poppins-latin-400-normal.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/poppins-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/poppins-latin-500-normal.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/poppins-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/poppins-latin-600-normal.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/poppins-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/poppins-latin-700-normal.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Fallback com as métricas da Poppins: a troca de fonte não desloca o layout (CLS) */
@font-face { font-family: "Poppins Fallback"; src: local("Arial"); size-adjust: 112.5%; ascent-override: 93.75%; descent-override: 31.25%; line-gap-override: 8.89%; }

:root {
  /* ---- Cor: marca (configuráveis em theme.json) ---- */
  --color-brand: #C6192E;        /* 5,6:1 sobre branco */
  --color-brand-dark: #A3121F;   /* links no texto, 7,9:1 */
  --color-ink: #151923;          /* títulos, rodapé */
  --color-ink-2: #667085;        /* metadados, 4,97:1 sobre branco */
  --color-hero: #10151F;         /* faixa de vídeos */
  --color-surface: #F7F8FA;      /* superfícies auxiliares */

  /* ---- Cor: neutros ---- */
  --color-white: #FFFFFF;
  --color-black: #000000;        /* só impressão */
  --color-text: #262B36;         /* corpo da matéria */
  --color-text-2: #3B4252;       /* linhas finas, ledes */
  --color-border: #E5E7EB;
  --color-border-strong: #D0D5DD;
  --color-thumb: #CBD2DB;        /* fundo de imagem ausente */
  --color-thumb-stripe: rgba(255, 255, 255, 0.16);
  --stripe: 1px;                 /* listras do fundo de imagem ausente */
  --stripe-gap: 10px;
  --color-transparent: transparent;
  --color-shadow: rgba(21, 25, 35, 0.10);
  --color-scrim: rgba(21, 25, 35, 0.56);   /* fundo atrás da busca e da gaveta */
  --color-error: #B42318;
  --color-error-bg: #FEF3F2;

  /* ---- Cor: superfícies escuras (rodapé, vídeos) ---- */
  --color-dark-border: #2E3442;
  --color-dark-text: #D0D5DD;
  --color-dark-text-2: #A4ABB8;  /* 7,6:1 sobre --color-ink */

  /* ---- Foco ---- */
  --color-focus: #1D4ED8;
  --color-blue: #1D4ED8;         /* acento "blue" da paleta das editorias (theme.json) */
  --color-focus-dark: #8AB4FF;
  --focus-width: 2px;
  --focus-offset: 2px;

  /* ---- Tipografia ---- */
  --font-body: "Poppins", "Poppins Fallback", "Segoe UI", system-ui, sans-serif;
  --font-heading: "Poppins", "Poppins Fallback", "Segoe UI", system-ui, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  /* Escala de interface (passos fixos, mínimo 12px) */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  /* Escala editorial modular (razão 1,125 a partir de 16px; passos altos fluidos) */
  --fs-step-1: 18px;
  --fs-read: 18px;               /* corpo da matéria (17px no celular) */
  --fs-step-2: 20px;
  --fs-step-3: 22px;
  --fs-step-4: clamp(22px, 1.6vw + 16px, 26px);
  --fs-step-5: clamp(24px, 2vw + 16px, 32px);
  --fs-step-6: clamp(28px, 2.6vw + 16px, 40px);
  --fs-step-7: clamp(30px, 3vw + 16px, 48px);
  --fs-display: clamp(76px, 12vw, 192px);
  /* Altura de linha */
  --lh-none: 0.9;
  --lh-tight: 1.1;
  --lh-title: 1.25;
  --lh-snug: 1.35;
  --lh-ui: 1.5;
  --lh-body: 1.6;
  --lh-read: 1.75;
  /* Espaçamento entre letras */
  --ls-display: -0.035em;
  --ls-tight: -0.02em;
  --ls-caps: 0.08em;

  /* ---- Espaçamento (escala única de 4px) ---- */
  --space-half: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 56px;
  --gutter: clamp(16px, 2.8vw, 40px);
  --section-y: var(--space-9);   /* respiro vertical padrão entre seções */
  --stack: var(--space-5);       /* respiro entre título de seção e conteúdo */

  /* ---- Layout (configuráveis) ---- */
  --container-max: 1440px;
  --read-max: 760px;             /* medida da matéria (~70 caracteres a 18px) */
  --sidebar-width: 320px;
  --sidebar-display: block;
  --page-bg-image: none;
  --utility-height: 36px;
  /* cabeçalho 1.0.6: faixa da marca (some ao rolar no desktop) + barra de editorias (fica presa) */
  --logo-h-sm: 36px;             /* logo no celular sem valor na Customização */
  --logo-now: var(--xarpy-logo-height, var(--logo-h));
  --logo-w-now: var(--xarpy-logo-width, auto);   /* 0047: largura da logo; sem valor = pela proporção */
  --masthead-h: max(80px, calc(var(--logo-now) + 24px));
  --masthead-h-sm: 64px;
  --navbar-h: 48px;
  --header-height: calc(var(--navbar-h) + 1px);   /* o que fica preso no topo ao rolar (sidebar e âncoras) */
  --w-drawer: 400px;

  /* ---- Medidas de componentes ---- */
  --w-sm: 360px;                 /* gaveta do menu, slogan do rodapé */
  --w-md: 600px;                 /* textos e busca centralizados */
  --w-lg: 960px;                 /* cabeçalhos de página e de matéria */
  --w-xl: 1120px;                /* imagem principal da matéria */
  --w-search: 280px;             /* busca do cabeçalho */
  --card-min: 260px;             /* largura mínima da coluna de cards */
  --tile-min: 160px;             /* blocos de mês do arquivo */
  --row-media: 220px;            /* miniatura da lista */
  --row-media-sm: 112px;
  --rank-w: 40px;                /* número do ranking */
  --art-w: 120px;                /* ilustração dos estados vazios */
  --art-h: 88px;
  --field-min-h: 140px;          /* área de texto do comentário */
  --avatar-sm: 40px;
  --avatar-md: 72px;
  --avatar-lg: 112px;
  --logo-h: 40px;
  --play-size: 44px;
  --ad-max-h: 250px;
  --tap: 44px;                   /* alvo de toque mínimo */
  --tap-lg: 48px;

  /* ---- Raios, bordas, sombras ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --border-1: 1px;
  --border-accent: 3px;
  --border-heavy: 4px;
  --shadow-pop: 0 16px 32px var(--color-shadow);
  --shadow-lift: 0 8px 24px var(--color-shadow);

  /* ---- Movimento (só transform, opacity e cor) ---- */
  --dur-fast: 140ms;
  --dur-base: 180ms;
  --dur-slow: 240ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --scale-hover: 1.03;
  --scale-press: 0.97;
  --nudge: 3px;
  --underline-offset: 3px;
}

@media (max-width: 1023px) {
  :root {
    --logo-now: var(--xarpy-logo-height-mobile, var(--logo-h-sm));
    --logo-w-now: var(--xarpy-logo-width-mobile, auto);
    --masthead-h: max(var(--masthead-h-sm), calc(var(--logo-now) + 20px));
    --header-height: var(--masthead-h);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --logo-now: var(--xarpy-logo-height-mobile, var(--logo-h)); }
}
@media (max-width: 767px) {
  :root {
    --section-y: var(--space-7);
    --stack: var(--space-4);
    --fs-read: 17px;
  }
}