/*
 * VEDIUM DESIGN SYSTEM V2 -- tokens
 *
 * Fase B (2026-08-24). Isolado: nao e carregado em nenhuma pagina de producao,
 * so em /design_system_v2 (preview) enquanto o sistema nao for aprovado e
 * migrado. Ver docs/redesign/10-design-system-v2-implementation.md.
 *
 * Cores: partem dos tokens candidatos de docs/redesign/04-design-system-plan.md,
 * validados nesta fase contra o logo oficial (Logo-color-quadrada.png) e
 * contra contraste WCAG (ratios documentados no arquivo de implementacao).
 * color-border-strong e novo nesta fase: 04 so tinha color-border (#D9DEE3,
 * 1.35:1 contra branco -- falha ate o minimo de 3:1 para bordas funcionais
 * de UI/WCAG 1.4.11). Use color-border só para divisores decorativos e
 * color-border-strong para bordas que carregam significado (input, card
 * clicavel, etc).
 */

/*
 * Fase B.1 (2026-08-24) -- decisao de tipografia APROVADA e final:
 * Poppins (titulos/interface) + Inter (corpo/UI) + Arial (fallback) +
 * Playfair Display (editorial seletivo, nunca fonte estrutural). Kumbh Sans
 * NAO e mais a fonte principal -- fica documentado abaixo so como nota de
 * inventario (os arquivos .woff2 dela seguem no repo, sem uso).
 *
 * Auto-hospedagem verificada nesta fase (sem baixar nada novo):
 *   - Playfair Display 700 (latin/latin-ext/cirilico) JA EXISTE local em
 *     vedium_core/public/fonts/ (licenca OFL 1.1, vedium_core/public/fonts/LICENSE-Playfair-Display.txt)
 *     -- @font-face local abaixo, sem @import remoto.
 *   - Poppins e Inter NAO existem localmente no projeto hoje. Nao foi feito
 *     download automatico (fora do escopo desta fase). Ate serem
 *     licenciados/auto-hospedados, o navegador cai no proximo nome da pilha
 *     (Arial/system sans-serif) -- comportamento correto e esperado, não é
 *     um bug. REQUISITO ANTES DE PRODUCAO: providenciar Poppins e Inter
 *     (woff2, subset latin/latin-ext/cirilico no minimo) e declarar
 *     @font-face local aqui, no mesmo padrao do Playfair abaixo.
 *   - Kumbh Sans (arquivos ja presentes: kumbh-sans-latin.woff2,
 *     kumbh-sans-latin-ext.woff2) permanece sem uso nesta decisao.
 */
@font-face {
  font-family: "Playfair Display";
  src: url("/assets/vedium_core/fonts/playfair-display-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, 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: "Playfair Display";
  src: url("/assets/vedium_core/fonts/playfair-display-latin-ext-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display";
  src: url("/assets/vedium_core/fonts/playfair-display-cyrillic-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  /* ---------- Cor: marca ---------- */
  --v2-color-brand-800: #1D416F;
  --v2-color-brand-700: #26528C;
  --v2-color-brand-600: #2E6DA4;
  --v2-color-brand-300: #84A9D9;

  /* ---------- Cor: destaque/CTA (terracota) ---------- */
  --v2-color-accent-700: #8C260F;
  --v2-color-accent-600: #A12D1C;

  --v2-color-warm-400: #BFA288;

  /* ---------- Cor: texto ---------- */
  --v2-color-ink-900: #0F1419;
  --v2-color-ink-700: #35404A;
  --v2-color-ink-500: #66717C;

  /* ---------- Cor: superficie ---------- */
  --v2-color-surface-0: #FFFFFF;
  --v2-color-surface-50: #F7F8FA;
  --v2-color-surface-warm: #F6F1EC;

  /* ---------- Cor: borda ---------- */
  --v2-color-border: #D9DEE3;          /* decorativo apenas -- 1.35:1, NAO usar em borda funcional */
  --v2-color-border-strong: #7C8794;   /* funcional -- 3.6:1 contra branco, cumpre WCAG 1.4.11 */

  /* ---------- Cor: feedback ---------- */
  --v2-color-success: #247A4A;
  --v2-color-warning: #9A5B00;
  --v2-color-danger: #B42318;
  --v2-color-focus: #1463FF;

  /* ---------- Cor: papeis semanticos (o que os componentes de fato consomem) ---------- */
  --v2-color-brand: var(--v2-color-brand-600);
  --v2-color-brand-strong: var(--v2-color-brand-700);
  --v2-color-accent: var(--v2-color-accent-700);
  --v2-color-accent-hover: var(--v2-color-accent-600);
  --v2-color-surface: var(--v2-color-surface-0);
  --v2-color-surface-alt: var(--v2-color-surface-50);
  --v2-color-text: var(--v2-color-ink-900);
  --v2-color-text-muted: var(--v2-color-ink-700);
  --v2-color-text-subtle: var(--v2-color-ink-500);
  --v2-color-border-default: var(--v2-color-border);
  --v2-color-border-interactive: var(--v2-color-border-strong);

  /* ---------- Tipografia ---------- */
  /*
   * DECISAO APROVADA (Fase B.1, 2026-08-24): Poppins (titulos/interface),
   * Inter (corpo/UI), Arial (fallback), Playfair Display (editorial
   * seletivo). Kumbh Sans (proposta em docs/redesign/04-design-system-plan.md)
   * NAO e mais a fonte principal -- conflito da Fase B esta resolvido por
   * decisao humana explicita, registrada tambem em
   * docs/redesign/10-design-system-v2-implementation.md.
   *
   * Poppins/Inter ainda nao existem localmente neste projeto (verificado na
   * Fase B.1) -- ver nota grande no topo deste arquivo antes das
   * declaracoes de @font-face. Ate serem auto-hospedadas, caem no fallback
   * Arial. Playfair Display 700 JA esta auto-hospedada localmente (arquivos
   * .woff2 pre-existentes no repo) -- unica familia com @font-face real
   * neste arquivo por enquanto.
   *
   * Hebraico: NEM Poppins NEM Inter cobrem o alfabeto hebraico. Ver a regra
   * :lang(he) mais abaixo, que troca a pilha pra uma fonte com cobertura
   * hebraica real. Iorubá usa Latim estendido (diacriticos e digrafos como
   * gb/kp) -- Poppins e Inter cobrem Latin Extended-A, verificado como
   * suficiente para as marcas usadas no material de Iorubá revisado nesta
   * sessao (nao é uma auditoria glifo-a-glifo).
   */
  --v2-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --v2-font-heading: "Poppins", Arial, "Helvetica Neue", sans-serif;
  --v2-font-body: "Inter", Arial, "Helvetica Neue", sans-serif;
  --v2-font-body-he: "Noto Sans Hebrew", "Arial Hebrew", "David", Arial, sans-serif;

  --v2-text-xs: 0.75rem;
  --v2-text-sm: 0.875rem;
  --v2-text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);      /* 16px -> 17px, ver nota de escala abaixo */
  --v2-text-lg: clamp(1.0625rem, 0.98rem + 0.4vw, 1.1875rem);     /* 17px -> 19px -- corpo de destaque/lead */
  --v2-text-xl: 1.375rem;
  --v2-text-2xl: 1.75rem;
  --v2-text-3xl: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  --v2-text-display: clamp(2.5rem, 1.7rem + 3.2vw, 4.5rem);

  /*
   * Escala institucional (Fase B.3, 2026-08-24): a Fase B.1 aprovou a
   * DECISAO de tipografia (Poppins/Inter/Arial/Playfair); a Fase B.3 aprova
   * a ESCALA (tamanho/ritmo). Direcao aproximada da missao B.3 (secao 4),
   * adaptada com clamp() pra nao pular abruptamente entre breakpoints:
   *   H1: ~38px (mobile) -> ~72px (desktop largo)
   *   H2: ~30px -> ~48px
   *   H3: ~24px -> ~32px
   *   body: ja coberto por --v2-text-base/--v2-text-lg acima (16-19px)
   * "Nao seguir numeros cegamente" (texto da missao) -- os clamp() abaixo
   * priorizam proporcao/leitura sobre acerto pixel-perfeito em cada largura.
   */
  --v2-text-h1: clamp(2.375rem, 1.5rem + 4.2vw, 4.75rem);  /* Fase B.6 (reset Bain-inspired, secao 17): "headline muito grande -- desktop ate 72-80px quando adequado". O teto de 52px da Fase B.5 era calibrado pro H1 antigo (9 palavras, coluna de 47%); o Hero B.6 e editorial largo (sem coluna de 47%) com H1 curto ("Aprenda ao vivo. Avance com direção." -- 5 palavras), entao volta a caber confortavelmente num teto bem maior. A confirmar por screenshot em 1440px nesta mesma fase (ver docs/redesign/18-bain-inspired-direction.md). */
  --v2-text-h2: clamp(1.875rem, 1.5rem + 1.9vw, 3.125rem); /* 42-50px desktop */
  --v2-text-h3: clamp(1.5rem, 1.32rem + 0.9vw, 2rem);

  --v2-leading-tight: 1.1;
  --v2-leading-heading: 1.2;
  --v2-leading-body: 1.6;

  /* ---------- Espacamento (base 4px) ---------- */
  --v2-space-1: 0.25rem;
  --v2-space-2: 0.5rem;
  --v2-space-3: 0.75rem;
  --v2-space-4: 1rem;
  --v2-space-5: 1.25rem;
  --v2-space-6: 1.5rem;
  --v2-space-8: 2rem;
  --v2-space-10: 2.5rem;
  --v2-space-12: 3rem;
  --v2-space-16: 4rem;
  --v2-space-20: 5rem;
  --v2-space-24: 6rem;

  /*
   * Fase B.3: secoes precisam de mais espaco vertical e presenca (secao 4 da
   * missao: "96-128px desktop, 56-72px mobile" -- aproximado via clamp, nao
   * fixo, pra reagir ao viewport real em vez de saltar em breakpoints).
   */
  --v2-space-section: clamp(3.5rem, 1.6rem + 8vw, 9.25rem); /* Fase B.6: "110-150px de padding vertical no desktop" (era ate 128px) */
  --v2-space-section-tight: clamp(2.5rem, 1.7rem + 3.2vw, 4.5rem);

  /* Altura minima de presenca do hero institucional (secao 4 e 7 da missao
     B.3: "hero: minimo ~680-760px de presenca visual" em desktop). Nao se
     aplica em mobile (o hero encolhe pro conteudo real). */
  --v2-hero-min-height: 42rem; /* 672px, desktop -- ver media query no componente */

  /* ---------- Raio -- Fase B.5 (secao 25): "radius atual esta
     excessivamente amigavel em alguns blocos -- instituicao seria: radius
     moderado" -- reduzido de 16/22px (Fase B.3) para 10/16px.
     Fase B.6 (secao 19): a missao distinguiu faixas por tipo de bloco --
     "Hero image: 12-16px", "CTA block: 12-16px", "Cards: 8-12px". Um so
     token (--v2-radius-media, 10px) cobria os dois primeiros grupos E
     cards ao mesmo tempo; separado agora: --v2-radius-media sobe pra 14px
     (hero/feature media de secao inteira) e cards de grade (LanguageCard,
     CourseCard, TeacherCard, BlogCard) passam a usar --v2-radius-md (12px,
     ja dentro de "8-12px"). ---------- */
  --v2-radius-sm: 6px;
  --v2-radius-md: 12px;     /* cards de grade (8-12px) */
  --v2-radius-media: 14px;  /* hero e midia de secao inteira (12-16px) -- era 10px */
  --v2-radius-lg: 16px;     /* reservado a blocos especiais (CTA institucional, modal) -- nao usar em card comum (12-16px) */
  --v2-radius-pill: 999px;

  /* ---------- Sombra (Fase B.3, secao 27: "quase nenhuma -- preferir
     border + surface + space"). Mantidas so pra elementos que futuram
     genuinamente sobre o conteudo (modal, mega menu) -- nao mais usadas em
     card/pricing/hero. ---------- */
  --v2-shadow-1: 0 1px 2px rgba(15, 20, 25, 0.06), 0 1px 1px rgba(15, 20, 25, 0.04);
  --v2-shadow-2: 0 4px 12px rgba(15, 20, 25, 0.08), 0 2px 4px rgba(15, 20, 25, 0.05);
  --v2-shadow-3: 0 12px 32px rgba(15, 20, 25, 0.12), 0 4px 8px rgba(15, 20, 25, 0.06);

  /* ---------- Container ---------- */
  --v2-container-reading: 47.5rem;  /* 760px -- FAQ, artigos, legal */
  --v2-container-content: 73.75rem; /* 1180px -- Fase B.3 secao 4: "container visual principal: 1180-1280px" (era 1120px na Fase B) */
  --v2-container-wide: 80rem;       /* 1280px -- Fase B.6: "container principal aprox. 1240-1320px" (era 1216px na B.4/B.5); Header e Hero continuam no mesmo container */
  --v2-gutter: 1rem;

  /* ---------- Controle (input/botao -- Fase B.3 secao 26: "48-52px de
     altura", maior que o alvo minimo de toque de 44px) ---------- */
  --v2-control-height: 3rem; /* 48px */

  /* ---------- Movimento ---------- */
  --v2-motion-fast: 120ms;
  --v2-motion-base: 200ms;
  --v2-motion-slow: 320ms;
  --v2-motion-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --v2-motion-translate: 8px;

  /* ---------- Alvo de toque ---------- */
  --v2-tap-min: 44px;
}

/*
 * Breakpoints (documentados como referencia -- CSS nao tem custom media
 * nativo sem PostCSS; os componentes usam estes valores literais nas
 * media queries. Baseados no sistema existente (vedium-responsive.css usa
 * os mesmos cortes de Bootstrap 5: 576/768/992/1200/1400) mais os
 * intermediarios pedidos pela missao pra mobile real (360/390/430)):
 *   --v2-bp-xs:  360px   (telefone estreito)
 *   --v2-bp-sm:  576px
 *   --v2-bp-md:  768px   (tablet)
 *   --v2-bp-lg:  992px
 *   --v2-bp-xl:  1200px  (desktop)
 *   --v2-bp-2xl: 1400px  (desktop amplo)
 */

@media (prefers-color-scheme: dark) {
  /*
   * O site publico da Vedium hoje e sempre claro (nao ha modo escuro em
   * producao). O preview do design system respeita prefers-color-scheme
   * só na propria pagina de preview (fundo/moldura do dev-tool), NUNCA
   * dentro dos componentes em si, que devem sempre renderizar no tema claro
   * da marca -- ver .v2-preview-shell no arquivo do preview.
   */
}

:lang(he) {
  --v2-font-heading: var(--v2-font-body-he);
  --v2-font-body: var(--v2-font-body-he);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --v2-motion-fast: 0ms;
    --v2-motion-base: 0ms;
    --v2-motion-slow: 0ms;
    --v2-motion-translate: 0px;
  }
}