/* ============================================================================
 * viktus-tokens.css — FONTE ÚNICA de tokens da família Viktus
 * ----------------------------------------------------------------------------
 * Versão:  1.0.1   ·   2026-07-22
 * Manual:  Manual de Marca Viktus 2026  ·  Playbook: Padrao-Viktus-Playbook.md
 *
 * Este arquivo é framework-agnóstico (CSS custom properties + classes utilitárias
 * `.vui-*`). Serve TODAS as stacks da família:
 *   · Astro   → @import "../styles/viktus-tokens.css"  (ou <link>)
 *   · Next.js → import "@/styles/viktus-tokens.css"     (ou via @viktus/ui)
 *   · Vanilla → <link rel="stylesheet" href="/styles/viktus-tokens.css">
 *   · HTML    → <link rel="stylesheet" href="/viktus-tokens.css">
 *
 * REGRA: NÃO edite este arquivo dentro de um produto. Ele é VENDORADO (copiado)
 * do brand pack `Viktus Brand/tokens/`. Para mudar um token, mude AQUI, bumpe a
 * versão e re-copie nos produtos (ver §13 do Padrao-Viktus-Playbook.md).
 *
 * As fontes (Space Grotesk + JetBrains Mono) devem ser carregadas pelo produto:
 *   next/font (Next), <link> Google Fonts (Astro/Vanilla/HTML), ou @font-face.
 *   Fora do Next `--font-space-grotesk` não existe, então o var() PRECISA do
 *   fallback interno: `var(--font-space-grotesk, "Space Grotesk")`. Sem ele a
 *   declaração inteira vira inválida em computed-value time — não é o item da
 *   lista que cai, é a linha toda — e o produto renderiza em serif.
 * ==========================================================================  */

:root {
  /* ── Paleta oficial — 5 cores do Manual + neutros ──────────────────────── */
  --color-deep:        #050714;              /* institucional da holding (= --color-family) */
  --color-bone:        #F2EEE3;              /* off-white quente */
  --color-bone-muted:  #D8D2C4;             /* bone com 1 nota a menos */
  --color-navy:        #0E1330;              /* navy escuro */
  --color-sage:        oklch(0.62 0.05 165);/* verde Care — acento DECORATIVO (logo, anel de foco) */
  --color-fumaca:      oklch(0.32 0.01 250);/* cinza-azul atmosférico — Spaces */
  --color-fumaca-deep: #1E2229;             /* navy fosco — bg de painéis */

  /* Sage escurecido para uso INTERATIVO (botão/link). O sage do manual tem
   * 3.07:1 com bone — reprova WCAG AA. #4F6F60 dá 5.56:1 com branco e mantém o
   * matiz. Use --color-sage só em decoração; --color-sage-ink em interação. */
  --color-sage-ink:    #4F6F60;

  /* ── Camada semântica (padrão = Gestão/Finanças light) ─────────────────── */
  /* Um produto sobrescreve SÓ estes tokens (ver bloco por-vertical abaixo). */
  --color-family:     var(--color-deep);    /* rodapé "powered by" — NÃO mudar */
  --color-primary:    var(--color-navy);    /* acento da vertical */
  --color-primary-fg: var(--color-bone);    /* texto sobre o primário */
  --color-secondary:  var(--color-navy);
  --color-accent:     var(--color-sage);
  --color-bg:         var(--color-bone);
  --color-surface:    #FFFFFF;              /* elevação sobre bone */
  --color-text:       var(--color-navy);
  --color-text-muted: #5C6873;             /* AA (4.95:1) sobre bone */
  --color-border:     var(--color-bone-muted);

  /* ── Cores de feedback — todas AA-corrigidas (calculado, não estimado) ─── */
  --color-danger:  #B00020;
  --color-error:   var(--color-danger);
  --color-success: #147B3A;                 /* 4.62:1 no bone (era #15803D, reprovava) */
  --color-warning: #8A5A00;                 /* ocre 5.11:1 no bone (era #C49B2E, reprovava) */
  --color-info:    var(--color-sage);

  /* ── Tipografia — famílias ─────────────────────────────────────────────── */
  /* O fallback DENTRO do var() é obrigatório: fora do Next.js a variável do
     next/font não existe, e um var() sem fallback invalida a declaração toda. */
  --font-display: var(--font-space-grotesk, "Space Grotesk"), system-ui, sans-serif;
  --font-sans:    var(--font-space-grotesk, "Space Grotesk"), system-ui, sans-serif;
  --font-mono:    var(--font-jetbrains-mono, "JetBrains Mono"), ui-monospace, monospace;
  --font-heading: var(--font-display);

  /* ── Tipografia — escala (Manual §Tipografia) ──────────────────────────── */
  --text-display: 48px;
  --text-h1:      32px;
  --text-h2:      24px;
  --text-h3:      20px;
  --text-body:    16px;
  --text-small:   14px;
  --text-caption: 12px;

  --weight-display: 700;
  --weight-heading: 600;
  --weight-body:    400;
  --weight-mono:    500;

  --tracking-tight:      -0.02em;
  --tracking-mono-tight:  0.22em;
  --tracking-mono-wide:   0.42em;

  /* ── Forma / espaço ────────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-full: 9999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
}

/* ── Acentos por vertical ────────────────────────────────────────────────────
 * Cole UM destes blocos DEPOIS de importar os tokens, no globals/main do produto.
 * Não edite os tokens-base acima — só sobrescreva a camada semântica.
 *
 *   Care:     --color-primary: var(--color-sage-ink); --color-accent: var(--color-sage);
 *   Finanças: --color-primary: var(--color-navy);   (default — já é o de cima)
 *   Spaces:   --color-primary: var(--color-fumaca);
 *   Gestão:   --color-primary: var(--color-navy);   (marca-mãe)
 *
 * Institucional (viktus.com.br) é TEMA ESCURO (Deep bg). Ver o override de tema
 * escuro no próprio repo; a paleta-base é a mesma.
 * ────────────────────────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════════════════
 * CLASSES UTILITÁRIAS `.vui-*`  (prefixo evita colisão com Tailwind/utilitárias)
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── label-mono — descritor/kicker (assinatura tipográfica da família) ────── */
.label-mono {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-mono);
  letter-spacing: var(--tracking-mono-tight);
  text-transform: uppercase;
  line-height: 1.2;
}
.label-mono--wide { letter-spacing: var(--tracking-mono-wide); }

/* ── Focus utility ────────────────────────────────────────────────────────── */
.vui-focus:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-bone), 0 0 0 4px var(--color-sage);
  border-radius: var(--radius-md);
}

/* ── Skip link (WCAG 2.4.1) ───────────────────────────────────────────────── */
.vui-skip-link {
  position: absolute;
  left: 12px; top: -100px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: var(--color-navy);
  color: var(--color-bone);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: 600;
  text-decoration: none;
  transition: top 180ms ease;
}
.vui-skip-link:focus,
.vui-skip-link:focus-visible {
  top: 12px;
  outline: none;
  box-shadow: 0 0 0 2px var(--color-bone), 0 0 0 4px var(--color-sage);
}

/* ── Button ───────────────────────────────────────────────────────────────── */
.vui-btn {
  min-height: 44px;                          /* WCAG 2.5.5 touch target */
  transition: background-color 180ms ease, color 180ms ease,
              border-color 180ms ease, box-shadow 180ms ease, transform 80ms ease;
}
.vui-btn:hover:not(:disabled)  { filter: brightness(0.94); }
.vui-btn:active:not(:disabled) { transform: translateY(1px); }
.vui-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-bone), 0 0 0 4px var(--color-sage);
}
.vui-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.vui-btn--ghost:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-sage) 8%, transparent);
  filter: none;
}
a.vui-btn { text-decoration: none; }
a.vui-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-bone), 0 0 0 4px var(--color-sage);
}

/* ── Input (input/textarea/select) ────────────────────────────────────────── */
.vui-input:hover:not(:disabled):not(:focus) {
  border-color: color-mix(in srgb, var(--color-sage) 40%, var(--color-border));
}
.vui-input:focus,
.vui-input:focus-visible {
  outline: none;
  border-color: var(--color-sage);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-sage) 35%, transparent);
}
.vui-input:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── Chip (filtro compacto 36px) ──────────────────────────────────────────── */
.vui-chip {
  min-height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 500;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.vui-chip:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-sage) 6%, transparent);
  color: var(--color-text);
}
.vui-chip[aria-pressed="true"],
.vui-chip--active {
  background: var(--color-primary);
  color: var(--color-primary-fg);
  border-color: var(--color-primary);
  font-weight: 600;
}
.vui-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-bone), 0 0 0 4px var(--color-sage);
}

/* ── Admin shell — sidebar responsiva (drawer < 768px) ────────────────────── */
.vui-shell-hamburger {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  color: var(--color-text);
  margin-right: var(--space-3);
}
.vui-shell-hamburger:hover { background: color-mix(in srgb, var(--color-sage) 6%, transparent); }
.vui-shell-hamburger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-bone), 0 0 0 4px var(--color-sage);
}
.vui-shell-overlay { display: none; }

@media (max-width: 768px) {
  .vui-shell-hamburger { display: inline-flex; }
  .vui-shell-sidebar {
    position: fixed; top: 56px; bottom: 0; left: 0;
    z-index: 30; width: 240px;
    transform: translateX(-100%);
    transition: transform 220ms ease;
    box-shadow: 0 4px 16px rgba(5, 7, 20, 0.18);
  }
  .vui-shell-sidebar[data-open="true"] { transform: translateX(0); }
  .vui-shell-overlay {
    display: block;
    position: fixed; inset: 56px 0 0 0;
    z-index: 20;
    background: rgba(5, 7, 20, 0.45);
    opacity: 0; pointer-events: none; cursor: pointer;
    transition: opacity 220ms ease;
  }
  .vui-shell-overlay[data-open="true"] { opacity: 1; pointer-events: auto; }
}

/* ── Assinatura de rodapé (Padrao-Assinatura-Viktus.md) ───────────────────── */
/* Selo de versão (só apps com build versionado) + selo de família. */
.vui-sig {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-sans);
}
.vui-sig-version {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 11px; font-weight: 500;
  font-family: var(--font-mono);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 15%, transparent);
  opacity: 0.7;
  transition: opacity 180ms ease;
  text-decoration: none; color: inherit;
}
.vui-sig-version:hover { opacity: 1; }
.vui-sig-family {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-caption); font-weight: 500;
}
.vui-sig-family img { height: 24px; width: auto; display: block; }

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .vui-btn, .vui-chip, .vui-input,
  .vui-shell-sidebar, .vui-shell-overlay, .vui-shell-hamburger {
    transition: none !important;
  }
  .vui-btn:active:not(:disabled) { transform: none; }
}

/* ── Forced colors (Windows High Contrast) ────────────────────────────────── */
@media (forced-colors: active) {
  .vui-btn, .vui-chip, .vui-input {
    border: 1px solid CanvasText;
    forced-color-adjust: none;
  }
  .vui-btn:focus-visible, .vui-chip:focus-visible,
  .vui-input:focus, .vui-input:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }
}

/* ── Navegador sem oklch() / color-mix() ──────────────────────────────────────
 *
 * O anel de foco canônico é `outline: none` + `box-shadow` na cor sage, e sage
 * é declarado em oklch(). Custom property guarda texto, então a declaração de
 * --color-sage sempre "funciona"; o que quebra é a substituição: um navegador
 * sem oklch() descarta o box-shadow por valor inválido, mas o `outline: none`
 * está em declaração separada e continua valendo. Resultado: foco INVISÍVEL ao
 * teclado — falha de acessibilidade, não de estética.
 *
 * Redefinir os dois tokens em sRGB conserta todo mundo de uma vez (foco,
 * decoração, --color-info) sem tocar em nenhuma regra. Os hex são a conversão
 * exata dos oklch acima: o sage dá os mesmos 3.07:1 sobre o bone que o manual
 * já registra, o que confirma a equivalência.
 *
 * oklch e color-mix chegaram juntos (Chrome 111, Safari 16.2, Firefox 113 —
 * 2023), mas são testados em separado: são features distintas e um dia uma
 * pode existir sem a outra.
 */
@supports not (color: oklch(0 0 0)) {
  :root {
    --color-sage:   #6A907F;   /* = oklch(0.62 0.05 165) */
    --color-fumaca: #2F3338;   /* = oklch(0.32 0.01 250) */
  }
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  /* Único ponto do arquivo que depende de color-mix. Sem ele o campo perderia
     o halo de foco; a borda muda de cor, mas isso sozinho é sinal fraco. */
  .vui-input:focus-visible {
    box-shadow: 0 0 0 3px var(--color-sage);
  }
}