/* ============================================================================
   apps/web/design_tokens.css — TOKENS OFICIAIS DO VISUAL OXXY
   ----------------------------------------------------------------------------
   Fonte de verdade: apps/web/founder_rc1/ (visual aprovado pelo Founder em
   09/07/2026 — "cara de software caro e consagrado, estilo Claude/Codex").
   NADA aqui foi inventado: cada valor foi EXTRAIDO de founder-rc1.css (:root),
   tipografia.css e paleta_cores.css. Este arquivo e o contrato executavel do
   charter oxxy_brain/compiled/hot/HOT_06_visual_charter.md; a esteira cobra o
   uso destes tokens em arquivo novo de UI via integradora/gate_visual.py.

   USO: toda pagina/arquivo novo em apps/web/ importa este arquivo e estiliza
   com var(--oxxy-*). Cor hardcoded fora daqui = rota revisao_externa.
   Legado: --oxrc1-* (founder-rc1.css) e --ox-* (paleta_cores.css) continuam
   validos DENTRO do founder_rc1; os --oxxy-* abaixo sao os mesmos valores com
   nome canonico para o produto inteiro.
   ========================================================================== */

:root {
  /* dark-first: o produto nasce escuro (color-scheme do founder-rc1.css) */
  color-scheme: dark;

  /* ---- FUNDOS E SUPERFICIES (dark warm, familia do #1f1f1d) ------------- */
  --oxxy-bg: #1f1f1d;            /* fundo principal do app        (--oxrc1-bg) */
  --oxxy-surface: #2d2d2a;       /* superficie elevada: composer, cards, inputs (--oxrc1-composer) */
  --oxxy-side: #20201e;          /* sidebar                       (--oxrc1-side) */
  --oxxy-side-deep: #191917;     /* sidebar profunda / recuo      (--oxrc1-side-deep) */
  --oxxy-hover: #343431;         /* hover de superficie           (--oxrc1-hover) */
  --oxxy-active: #40403c;        /* active / item selecionado     (--oxrc1-active) */

  /* ---- LINHAS E BORDAS (branco translucido, nunca cinza chapado) -------- */
  --oxxy-line: rgba(255, 255, 255, 0.09);         /* (--oxrc1-line) */
  --oxxy-line-strong: rgba(255, 255, 255, 0.16);  /* (--oxrc1-line-strong) */

  /* ---- TEXTO (hierarquia em 4 niveis) ------------------------------------ */
  --oxxy-text: #f4f3ee;          /* principal                     (--oxrc1-text) */
  --oxxy-text-soft: #d6d3c9;     /* secundario forte              (--oxrc1-soft) */
  --oxxy-text-muted: #c0beb6;    /* secundario                    (--oxrc1-muted) */
  --oxxy-text-dim: #928f86;      /* legenda, metadado             (--oxrc1-dim) */

  /* ---- ACENTOS E ESTADOS ------------------------------------------------- */
  --oxxy-accent: #b71922;        /* vermelho da marca: rail ativo, destaque (--oxrc1-accent) */
  --oxxy-blue: #6ea0ff;          /* azul funcional: foco, links, progresso  (--oxrc1-blue) */
  --oxxy-danger: #ff7777;        /* erro / destrutivo sobre dark  (--oxrc1-danger) */
  --oxxy-ok: #10b981;            /* sucesso                       (--ox-ok) */
  --oxxy-warn: #f59e0b;          /* atencao                       (--ox-atencao) */

  /* ---- COMPONENTES PREMIUM (paleta_cores.css — superficies claras) ------- */
  --oxxy-premium-primary: #6366f1;        /* (--ox-primary) */
  --oxxy-premium-primary-hover: #818cf8;  /* (--ox-primary-hover) */
  --oxxy-premium-surface: #ffffff;        /* (--ox-surface) */
  --oxxy-premium-grad-ini: #1e293b;       /* (--ox-surface-premium-ini) */
  --oxxy-premium-grad-fim: #334155;       /* (--ox-surface-premium-fim) */
  --oxxy-premium-ink: #0f172a;            /* (--ox-ink) */
  --oxxy-premium-ink-soft: #64748b;       /* (--ox-ink-suave) */
  --oxxy-premium-borda: #e2e8f0;          /* (--ox-borda) */

  /* ---- TIPOGRAFIA (Inter em tudo; mono so para codigo) ------------------- */
  --oxxy-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --oxxy-font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  /* escala REAL do founder_rc1 (px; densidade compacta de produto) */
  --oxxy-font-xs: 11px;
  --oxxy-font-sm: 12px;
  --oxxy-font-md: 13px;
  --oxxy-font-base: 14px;
  --oxxy-font-lg: 16px;
  --oxxy-font-xl: 20px;
  --oxxy-font-regular: 400;
  --oxxy-font-medium: 500;
  --oxxy-font-bold: 700;
  --oxxy-lh-tight: 1.25;      /* titulos    (--ox-lh-compacta) */
  --oxxy-lh-text: 1.6;        /* texto      (--ox-lh-texto)    */

  /* ---- ESPACAMENTO (grade 4/8px afinada a mao; gaps reais do founder_rc1:
         2/4/6/8/10/12/18 px — respiros maiores compoe a partir da grade) ---- */
  --oxxy-space-1: 2px;
  --oxxy-space-2: 4px;
  --oxxy-space-3: 6px;
  --oxxy-space-4: 8px;
  --oxxy-space-5: 10px;
  --oxxy-space-6: 12px;
  --oxxy-space-7: 16px;
  --oxxy-space-8: 18px;

  /* ---- RAIOS -------------------------------------------------------------- */
  --oxxy-radius: 8px;          /* padrao da casa (--oxrc1-radius) */
  --oxxy-radius-lg: 10px;      /* paineis maiores */
  --oxxy-radius-pill: 999px;   /* chips, badges */
  --oxxy-radius-round: 50%;    /* avatares, dots */

  /* ---- SOMBRAS (profundidades reais do founder_rc1) ----------------------- */
  --oxxy-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.14);
  --oxxy-shadow-pop: 0 4px 14px rgba(0, 0, 0, 0.28);
  --oxxy-shadow-modal: 0 22px 70px rgba(0, 0, 0, 0.42);
  --oxxy-shadow-focus: 0 0 0 2px rgba(255, 255, 255, 0.16);
  --oxxy-shadow-rail: inset 2px 0 0 var(--oxxy-accent);
  --oxxy-shadow-premium: 0 8px 24px rgba(15, 23, 42, 0.25);  /* (--ox-sombra-premium) */

  /* ---- MOVIMENTO (microinteracao discreta: 150ms ease e o idioma da casa) - */
  --oxxy-transition: 150ms ease;
  --oxxy-transition-slow: 400ms ease;   /* so p/ largura de painel */

  /* ---- LAYOUT DO SHELL ------------------------------------------------------ */
  --oxxy-left-width: 244px;
  --oxxy-right-width: 286px;
  --oxxy-left-collapsed: 56px;
  --oxxy-right-collapsed: 48px;
  --oxxy-icon-sidebar: 20px;
}

/* Foco acessivel padrao da casa (mesmo anel azul do founder-rc1.css v149):
   maior contraste sobre o dark, AA — acessibilidade, nao enfeite. */
.oxxy-focus-ring:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--oxxy-blue) 85%, transparent);
  outline-offset: 2px;
}