/* Snapshot da base 37df3c2eff272b1da216b103b956c4d5b3525b5c; fontes externas removidas para funcionamento local. */
/*
 * Futuro Tech Design System — Base Tokens
 *
 * Abstract token DEFINITIONS. Concrete values are placeholders here; a theme
 * overlay in ./themes/ is expected to redefine these variables before they
 * reach a rendered component.
 *
 * Components MUST reference these variables, never a hex/font/px literal.
 *
 * See: docs/adr/0003-design-tokens-themable-deferred.md
 */

:root {
  /* === Surfaces ===================================================== */
  --ft-color-surface-0: #ffffff;
  --ft-color-surface-1: #f7f7f8;
  --ft-color-surface-2: #eef0f3;
  --ft-color-surface-3: #e2e6ec;

  /* === Text ========================================================= */
  --ft-color-text: #16181d;
  --ft-color-text-muted: #5a6470;
  --ft-color-text-inverse: #ffffff;

  /* === Brand ======================================================== */
  --ft-color-primary: #1f4f5b;
  --ft-color-on-primary: #ffffff;
  --ft-color-accent: #c08a2e;
  --ft-color-on-accent: #ffffff;

  /* === Status ======================================================= */
  --ft-color-success: #2e7d32;
  --ft-color-on-success: #ffffff;
  --ft-color-warning: #b25a00;
  --ft-color-on-warning: #ffffff;
  --ft-color-error: #b3251f;
  --ft-color-on-error: #ffffff;
  --ft-color-info: #1e4fa3;
  --ft-color-on-info: #ffffff;

  /* === Borders & shadow ============================================= */
  --ft-color-border: #d6dae0;
  --ft-color-border-strong: #9ca3ad;
  --ft-color-shadow: rgba(15, 23, 42, 0.08);

  /* === Type families ================================================ */
  --ft-font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ft-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ft-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* === Type scale (fluid) =========================================== */
  --ft-text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --ft-text-sm: clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
  --ft-text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --ft-text-lg: clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem);
  --ft-text-xl: clamp(1.25rem, 1.18rem + 0.4vw, 1.5rem);
  --ft-text-2xl: clamp(1.5rem, 1.4rem + 0.6vw, 1.875rem);
  --ft-text-3xl: clamp(1.875rem, 1.7rem + 0.9vw, 2.5rem);

  /* === Radius ======================================================= */
  --ft-radius-sm: 4px;
  --ft-radius-md: 8px;
  --ft-radius-lg: 16px;
  --ft-radius-full: 9999px;

  /* === Spacing scale ================================================ */
  --ft-space-1: 4px;
  --ft-space-2: 8px;
  --ft-space-3: 12px;
  --ft-space-4: 16px;
  --ft-space-5: 24px;
  --ft-space-6: 32px;
  --ft-space-7: 40px;
  --ft-space-8: 48px;
  --ft-space-9: 64px;
  --ft-space-10: 80px;
  --ft-space-11: 96px;
  --ft-space-12: 128px;

  /* === Shadow scale ================================================= */
  --ft-shadow-sm: 0 1px 2px var(--ft-color-shadow);
  --ft-shadow-md: 0 4px 12px var(--ft-color-shadow);
  --ft-shadow-lg: 0 12px 32px var(--ft-color-shadow);

  /* === Z-index ====================================================== */
  --ft-z-base: 0;
  --ft-z-dropdown: 100;
  --ft-z-sticky: 200;
  --ft-z-modal: 300;
  --ft-z-toast: 400;
}

/*
 * ════════════════════════════════════════════════════════════════════════════
 *  TEMA FUTURO TECH + FACULDADE DO FUTURO — identidade canônica (overlay)
 * ════════════════════════════════════════════════════════════════════════════
 *
 * COMO LER ESTE ARQUIVO
 * Este é um OVERLAY DE TEMA: ele redefine os tokens abstratos `--ft-*` que
 * `../base.css` apenas declara como placeholders. Os componentes (preview,
 * export, futuras telas) consomem SOMENTE os tokens — então mudar a marca é
 * mudar este arquivo, nunca os componentes. Ver docs/adr/0003.
 *
 * CO-BRANDING (duas marcas, uma hierarquia clara)
 *  ┌─ Futuro Tech ............ LARANJA  — marca PRIMÁRIA, conduz toda a UI.
 *  └─ Faculdade do Futuro .... DOURADO  — marca SECUNDÁRIA, acentos/detalhes.
 *  Regra de ouro: o dourado nunca compete com o laranja; ele pontua, não comanda.
 *
 * REGRA DE CONTRASTE (WCAG 2.1 AA — não-negociável em EAD)
 *  Laranja vibrante (#FF4D00 / #EA580C) é lindo como MARCA, mas reprova como
 *  TEXTO sobre branco (~3:1). Por isso separamos dois papéis:
 *    • --primary  = laranja QUEIMADA #C2410C → texto/links/UI sobre branco (AA 4.5:1+)
 *    • --accent   = laranja VIBRANTE #EA580C → fundos de marca, filetes, ícones,
 *                   barras de capa (sempre com texto branco por cima, nunca como texto).
 *  Sempre que um token vira FUNDO, o par `--on-*` garante o texto legível por cima.
 */


:root,
:root[data-theme="light"] {
  /* ── Superfícies (branco → cinzas) ───────────────────────────────────────
     Escala de fundos do mais claro (0, página) ao mais marcado (3). Em EAD a
     leitura mora na surface-0 (branco puro): máximo contraste com o texto. */
  --ft-color-surface-0: #ffffff;
  --ft-color-surface-1: #faf8f6;  /* leve calor (toque de laranja diluído) p/ cards */
  --ft-color-surface-2: #f1ede9;  /* sub-blocos, thead de tabela, chips */
  --ft-color-surface-3: #e4ded8;  /* divisórias fortes, estados hover */

  /* ── Texto (preto → cinzas) ──────────────────────────────────────────────
     #14110f (quase-preto levemente quente) casa com a paleta laranja sem o
     "preto digital" duro. Muted #5c554f passa AA (7:1) p/ legendas/kicker. */
  --ft-color-text: #14110f;
  --ft-color-text-muted: #5c554f;
  --ft-color-text-inverse: #ffffff;

  /* ── MARCA PRIMÁRIA — Futuro Tech (laranja) ──────────────────────────────
     Dois tons, dois papéis (ver REGRA DE CONTRASTE no topo):
       primary  → cor de TEXTO/UI: títulos de destaque, links, bordas ativas.
                  #C2410C = 4.9:1 em branco → AA garantido.
       accent   → cor de MARCA: vibrante, só como FUNDO/realce com texto branco.
       brand-vivid → o laranja do LOGO (#FF4D00). Reservado p/ pinceladas de
                  marca (barra de capa, filete superior) — nunca como texto. */
  --ft-color-primary: #c2410c;       /* laranja queimada — AA como texto e como fundo */
  --ft-color-on-primary: #ffffff;
  --ft-color-accent: #ea580c;        /* laranja vibrante — acento/realce (fundo) */
  --ft-color-on-accent: #ffffff;
  --ft-color-brand-vivid: #ff4d00;   /* laranja do logo — pinceladas de marca */

  /* ── MARCA SECUNDÁRIA — Faculdade do Futuro (dourado/âmbar) ───────────────
     O dourado do emblema FAF. Co-branding: pontua detalhes (filetes
     secundários, selos, ícones de "referência/saber"). Tons:
       gold        → #B8841F: dourado mais escuro, AA como TEXTO em branco (4.6:1).
       gold-vivid  → #E0A52F: dourado do emblema, vibrante, só como FUNDO/realce. */
  --ft-color-secondary: #b8841f;       /* dourado FAF — AA como texto/UI sobre branco */
  --ft-color-on-secondary: #ffffff;
  --ft-color-secondary-vivid: #e0a52f; /* dourado do emblema — realce/fundo */

  /* ── Status (dessaturados, p/ não brigar com a marca quente) ─────────────
     Callouts precisam de cores próprias e distinguíveis. Mantemos sucesso
     verde e info slate-azulado FRIOS de propósito: contrastam com o laranja
     da marca e evitam que tudo "vire laranja". Atenção/erro ficam na família
     quente mas deslocados em matiz p/ não confundir com o acento de marca. */
  --ft-color-success: #3f7d4e;
  --ft-color-on-success: #ffffff;
  --ft-color-warning: #b45309;   /* âmbar-tostado — caution; distinto do dourado FAF */
  --ft-color-on-warning: #ffffff;
  --ft-color-error: #b23b3b;
  --ft-color-on-error: #ffffff;
  --ft-color-info: #3a6076;       /* slate-azulado frio — leitura neutra/informativa */
  --ft-color-on-info: #ffffff;

  /* ── Bordas & sombra ─────────────────────────────────────────────────────
     Bordas neutras quentes (puxam levíssimo p/ o bege) p/ casar com a paleta. */
  --ft-color-border: #e7e1db;
  --ft-color-border-strong: #a39a92;
  --ft-color-shadow: rgba(20, 17, 15, 0.08);

  /* ── Famílias tipográficas ───────────────────────────────────────────────
     DECISÃO (ver design-reference/ldx-refinement-track.md, ADR-T1):
       display = Space Grotesk → títulos. Geométrica, contemporânea, "tech".
                 Casa com a marca FT e dá personalidade SEM custar legibilidade
                 (só aparece em h1–h4, kickers e chrome — pouco texto, alto impacto).
       body    = Inter → corpo. Desenhada para telas: altura-x alta, aberturas
                 generosas, ótima hinting em tamanhos de leitura. É o padrão-ouro
                 de legibilidade sans em EAD. Mantida sobre serifada porque o
                 público é adulto lendo MUITO em tela (não em papel impresso). */
  --ft-font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --ft-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ── TIPOGRAFIA DE LEITURA EAD (tokens dedicados) ────────────────────────
     A escala fluida de base.css serve à UI geral. Aqui adicionamos tokens
     ESPECÍFICOS de leitura longa, que o conteúdo (.doc) consome. Intenção:
     conforto em sessões longas de leitura em tela por adultos.

       reading-size   → corpo ~18px (1.125rem). Fluido: 17px no mobile → 19px
                        em telas grandes. Acima dos 16px de UI: menos fadiga.
       reading-leading→ entrelinha 1.7. Faixa EAD ideal (1.6–1.75): linhas
                        "respiram" sem o olho se perder ao voltar.
       reading-measure→ medida máxima 68ch. Mantém a linha entre ~62–75ch:
                        curta o bastante p/ o olho achar a próxima linha,
                        longa o bastante p/ não picotar a leitura.
       reading-rhythm → ritmo vertical base (espaço entre parágrafos): 1.4em,
                        proporcional ao corpo, mantém o "compasso" da página. */
  --ft-reading-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem); /* 17 → 19px */
  --ft-reading-leading: 1.7;
  --ft-reading-measure: 68ch;
  --ft-reading-rhythm: 1.4em;
}

:root[data-theme="dark"] {
  /* ── Superfícies (preto → cinzas) ────────────────────────────────────────
     Quase-preto levemente quente (casa com a marca laranja). */
  --ft-color-surface-0: #14110f;
  --ft-color-surface-1: #1c1815;
  --ft-color-surface-2: #25201c;
  --ft-color-surface-3: #322b26;

  /* ── Texto (branco → cinzas) ─────────────────────────────────────────────
     Off-white quente p/ reduzir brilho/glare em fundo escuro (conforto EAD). */
  --ft-color-text: #f5f1ed;
  --ft-color-text-muted: #a8a099;
  --ft-color-text-inverse: #14110f;

  /* ── MARCA PRIMÁRIA — laranja CLAREADO p/ contrastar no escuro ────────────
     Sobre fundo escuro o laranja precisa subir de luminosidade p/ manter AA
     como texto. #f97316 passa folgado; o vibrante #fb923c vira o realce. */
  --ft-color-primary: #f97316;
  --ft-color-on-primary: #1a1a1a;
  --ft-color-accent: #fb923c;
  --ft-color-on-accent: #1a1a1a;
  --ft-color-brand-vivid: #ff6a33;

  /* ── MARCA SECUNDÁRIA — dourado clareado p/ o escuro ─────────────────────*/
  --ft-color-secondary: #e0a52f;
  --ft-color-on-secondary: #1a1a1a;
  --ft-color-secondary-vivid: #f0b94a;

  /* ── Status (clareados p/ contraste no escuro) ───────────────────────────*/
  --ft-color-success: #5fa46e;
  --ft-color-warning: #d68a3a;
  --ft-color-error: #d97070;
  --ft-color-info: #7ba6c0;

  /* ── Bordas & sombra ─────────────────────────────────────────────────────*/
  --ft-color-border: #322b26;
  --ft-color-border-strong: #574d46;
  --ft-color-shadow: rgba(0, 0, 0, 0.5);

  /* ── Tipografia de leitura: tokens herdam do light (mesmos valores) ───────
     Tamanho/entrelinha/medida independem do tema claro/escuro; redeclaramos só
     para deixar explícito que o modo escuro também os respeita. */
  --ft-reading-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --ft-reading-leading: 1.7;
  --ft-reading-measure: 68ch;
  --ft-reading-rhythm: 1.4em;
}