/* ============================================================
   NAVI DESIGN TOKENS — fonte única da verdade
   Decisões: cinza frio (hue 240) · dark-first · radius 8
   surface ladder · Geist Sans + Geist Mono · acento por produto
   ============================================================ */

/* ---------- 1. PRIMITIVOS ---------- */
:root {
  /* Neutros — escala de 12 passos derivada de um único hue frio */
  --navi-hue: 240;
  --navi-gray-1:  hsl(var(--navi-hue) 4% 5%);   /* fundo dark */
  --navi-gray-2:  hsl(var(--navi-hue) 4% 8%);
  --navi-gray-3:  hsl(var(--navi-hue) 4% 11%);
  --navi-gray-4:  hsl(var(--navi-hue) 4% 15%);
  --navi-gray-5:  hsl(var(--navi-hue) 4% 19%);
  --navi-gray-6:  hsl(var(--navi-hue) 4% 26%);
  --navi-gray-7:  hsl(var(--navi-hue) 5% 36%);
  --navi-gray-8:  hsl(var(--navi-hue) 5% 46%);
  --navi-gray-9:  hsl(var(--navi-hue) 6% 66%);
  --navi-gray-10: hsl(var(--navi-hue) 7% 80%);
  --navi-gray-11: hsl(var(--navi-hue) 8% 93%);
  --navi-gray-12: hsl(var(--navi-hue) 10% 98%);

  /* Funcionais (iguais em todos os produtos) */
  --navi-red:    hsl(357 72% 56%);
  --navi-green:  hsl(152 60% 42%);
  --navi-amber:  hsl(38 92% 50%);
  --navi-blue:   hsl(212 92% 58%);

  /* Tipografia */
  --navi-font-sans: "Geist", -apple-system, "Segoe UI", sans-serif;
  --navi-font-mono: "Geist Mono", "SF Mono", monospace;

  --navi-text-2xs:  0.65625rem; /* 10.5 — micro-mono: labels uppercase, badges, kbd */
  --navi-text-xs:   0.75rem;    /* 12 — labels, meta */
  --navi-text-sm:   0.8125rem;  /* 13 — UI densa, tabelas */
  --navi-text-base: 0.9375rem;  /* 15 — corpo padrão */
  --navi-text-md:   1.0625rem;  /* 17 */
  --navi-text-lg:   1.25rem;    /* 20 — títulos de seção */
  --navi-text-title: 1.375rem;  /* 22 — títulos de página (app) */
  --navi-text-xl:   1.75rem;    /* 28 — títulos grandes */
  --navi-text-2xl:  2.5rem;     /* 40 — display */

  /* Pesos (decidido 25/jul — únicos permitidos) */
  --navi-weight-book:     460;  /* prosa editorial */
  --navi-weight-medium:   540;  /* botões, ênfase leve */
  --navi-weight-semibold: 600;  /* títulos */
  --navi-weight-display:  640;  /* displays de marketing */

  --navi-leading-tight:  1.2;
  --navi-leading-normal: 1.55;
  --navi-tracking-tight: -0.03em;  /* displays e títulos */
  --navi-tracking-mono:  0.08em;   /* labels mono uppercase */

  /* Espaçamento — base 4px */
  --navi-space-1: 4px;
  --navi-space-2: 8px;
  --navi-space-3: 12px;
  --navi-space-4: 16px;
  --navi-space-5: 24px;
  --navi-space-6: 32px;
  --navi-space-7: 48px;
  --navi-space-8: 64px;

  /* Raio */
  --navi-radius-sm: 5px;
  --navi-radius:    8px;
  --navi-radius-lg: 12px;
  --navi-radius-full: 999px;

  /* ---------- Layout ----------
     Breakpoints (não podem ser var em media query — use estes valores):
       sm 640px · md 768px · lg 1024px · xl 1280px
     Grid: 12 colunas ≥lg · 8 colunas md · 4 colunas <md, sempre com --navi-gutter. */
  --navi-container:        1100px; /* marketing, docs, dashboards */
  --navi-container-narrow: 740px;  /* coluna de leitura/conversa (chat, artigos) */
  --navi-measure:          65ch;   /* largura máxima de texto corrido */
  --navi-gutter:           24px;   /* espaço entre colunas de grid */
  --navi-page-padding:     32px;   /* respiro lateral da página (20px <md) */
  --navi-section-y:        96px;   /* seção de marketing */
  --navi-section-y-cta:    120px;  /* CTA final */
  --navi-section-y-app:    56px;   /* seção em app/docs */

  /* ---------- Motion ----------
     Mapa de uso (par duração+easing — não invente combinações):
       hover / micro-estado (cor, borda, opacity)  → instant–fast + standard
       toggle, chevron, chip                       → fast + standard
       overlay entrando (dialog, popover, toast)   → normal + enter
       overlay saindo                              → fast + exit
       painel de layout (sidebar abre/fecha)       → panel + standard
       elemento de página (reveal, colapso, layout)→ normal–slow + standard */
  --navi-ease: cubic-bezier(0.25, 0.1, 0.25, 1);          /* standard */
  --navi-ease-enter: cubic-bezier(0, 0, 0.2, 1);          /* desacelera ao chegar */
  --navi-ease-exit: cubic-bezier(0.4, 0, 1, 1);           /* acelera ao sair */
  --navi-duration-instant: 75ms;
  --navi-duration-fast: 120ms;
  --navi-duration: 180ms;   /* normal */
  --navi-duration-panel: 250ms; /* painel de layout (Sidebar/RightPanel) abre/fecha + standard */
  --navi-duration-slow: 350ms;

  /* Z-index */
  --navi-z-dropdown: 100;
  --navi-z-sticky: 200;
  --navi-z-overlay: 300;
  --navi-z-toast: 400;
}

/* ---------- 2. SEMÂNTICOS — dark (default) ---------- */
:root, [data-theme="dark"] {
  --bg:            var(--navi-gray-1);
  --surface:       var(--navi-gray-2);   /* cards, inputs */
  --surface-2:     var(--navi-gray-3);   /* hover, mensagens */
  --surface-3:     var(--navi-gray-4);   /* ativo, overlays */
  --border:        var(--navi-gray-4);
  --border-hi:     var(--navi-gray-6);   /* hover e destaque */
  --text-1:        var(--navi-gray-11);  /* títulos, corpo principal */
  --text-2:        var(--navi-gray-9);   /* corpo secundário */
  --text-3:        var(--navi-gray-8);   /* labels, meta */
  --inverse:       var(--navi-gray-11);  /* fundo do botão primário */
  --inverse-text:  var(--navi-gray-1);

  --danger:        var(--navi-red);
  --success:       var(--navi-green);
  --warning:       var(--navi-amber);
  --info:          var(--navi-blue);
  --danger-dim:    hsl(357 72% 56% / 0.14);
  --success-dim:   hsl(152 60% 42% / 0.14);
  --warning-dim:   hsl(38 92% 50% / 0.14);
  --info-dim:      hsl(212 92% 58% / 0.14);

  /* SLOT DE ACENTO — cada produto sobrescreve via tema.
     DEFAULT: NEUTRO (decidido 25/jul) — o sistema nasce sem cor;
     acento colorido só passa a existir quando um produto real define o seu. */
  --accent-h: 240; --accent-s: 5%; --accent-l: 46%;
  --accent:      hsl(var(--accent-h) var(--accent-s) var(--accent-l));
  --accent-dim:  hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.18);
  --accent-text: hsl(var(--accent-h) 6% 72%);          /* legível sobre dark */
  --accent-contrast: hsl(var(--accent-h) 10% 98%);     /* texto sobre fundo de acento */

  /* PAPEL-FONTE — superfície clara que representa o documento original
     (nota fiscal, contrato, extrato) dentro da UI. É uma "ilha" de tema
     claro proposital: o artefato-fonte nunca se mistura com a interface.
     Iguais em dark e light (o papel é o papel). */
  --paper:        hsl(var(--navi-hue) 10% 96%);
  --paper-text:   hsl(var(--navi-hue) 10% 15%);
  --paper-muted:  hsl(var(--navi-hue) 6% 45%);
  --paper-border: hsl(var(--navi-hue) 8% 84%);

  /* Sombra de overlay (decidido 25/jul): APENAS camadas flutuantes
     (dialog, popover, dropdown, toast). Superfícies empilhadas = surface ladder. */
  --navi-shadow-overlay: 0 16px 48px hsl(0 0% 0% / 0.5), 0 4px 16px hsl(0 0% 0% / 0.35);

  /* Glow de acento (decidido 25/jul): permitido SÓ em hero e CTA final
     de marketing, teto 8% de opacidade. Use este token, não invente outro. */
  --navi-glow-hero: radial-gradient(600px 320px at 50% -80px,
    hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.07), transparent 70%);
  color-scheme: dark;
}

/* ---------- 2b. SEMÂNTICOS — light ---------- */
[data-theme="light"] {
  --bg:            hsl(var(--navi-hue) 10% 99%);
  --surface:       hsl(var(--navi-hue) 8% 97%);
  --surface-2:     hsl(var(--navi-hue) 6% 94%);
  --surface-3:     hsl(var(--navi-hue) 5% 90%);
  --border:        hsl(var(--navi-hue) 5% 88%);
  --border-hi:     hsl(var(--navi-hue) 5% 78%);
  --text-1:        hsl(var(--navi-hue) 10% 9%);
  --text-2:        hsl(var(--navi-hue) 6% 36%);
  --text-3:        hsl(var(--navi-hue) 5% 52%);
  --inverse:       hsl(var(--navi-hue) 10% 9%);
  --inverse-text:  hsl(var(--navi-hue) 10% 98%);
  --accent-text: hsl(var(--accent-h) 6% 38%); /* legível sobre light */
  --navi-shadow-overlay: 0 16px 48px hsl(0 0% 0% / 0.12), 0 4px 12px hsl(0 0% 0% / 0.08);
  color-scheme: light;
}

/* ---------- 3. TYPE STYLES (compostos) ----------
   Estilos semânticos que carregam família+tamanho+peso+lh+tracking juntos
   (modelo Geist). Use as classes em vez de montar combinações à mão. */
[data-navi] .t-display    { font: var(--navi-weight-display) var(--navi-text-2xl)/1.02 var(--navi-font-sans); letter-spacing: -0.045em; color: var(--text-1); }
[data-navi] .t-heading-xl { font: var(--navi-weight-semibold) var(--navi-text-xl)/1.15 var(--navi-font-sans); letter-spacing: var(--navi-tracking-tight); color: var(--text-1); }
[data-navi] .t-heading-lg { font: var(--navi-weight-semibold) var(--navi-text-title)/1.2 var(--navi-font-sans); letter-spacing: -0.025em; color: var(--text-1); }
[data-navi] .t-heading-md { font: var(--navi-weight-semibold) var(--navi-text-lg)/1.25 var(--navi-font-sans); letter-spacing: -0.02em; color: var(--text-1); }
[data-navi] .t-heading-sm { font: var(--navi-weight-semibold) var(--navi-text-md)/1.3 var(--navi-font-sans); letter-spacing: -0.015em; color: var(--text-1); }
[data-navi] .t-body       { font: 400 var(--navi-text-base)/var(--navi-leading-normal) var(--navi-font-sans); }
[data-navi] .t-body-sm    { font: 400 var(--navi-text-sm)/var(--navi-leading-normal) var(--navi-font-sans); }
[data-navi] .t-meta       { font: 400 var(--navi-text-xs)/1.45 var(--navi-font-sans); color: var(--text-3); }
[data-navi] .t-label      { font: var(--navi-weight-medium) var(--navi-text-sm)/1.3 var(--navi-font-sans); color: var(--text-1); }
[data-navi] .t-label-mono { font: 500 var(--navi-text-2xs)/1.3 var(--navi-font-mono); letter-spacing: var(--navi-tracking-mono); text-transform: uppercase; color: var(--text-3); }
[data-navi] .t-code       { font: 400 var(--navi-text-sm)/1.7 var(--navi-font-mono); }
[data-navi] .t-code-sm    { font: 400 var(--navi-text-xs)/1.6 var(--navi-font-mono); }
[data-navi] .t-prose      { font: var(--navi-weight-book) var(--navi-text-md)/1.65 var(--navi-font-sans); max-width: var(--navi-measure); }

/* ---------- 4. BASE ---------- */
[data-navi] {
  font-family: var(--navi-font-sans);
  font-size: var(--navi-text-base);
  line-height: var(--navi-leading-normal);
  background: var(--bg);
  color: var(--text-2);
  -webkit-font-smoothing: antialiased;
}
[data-navi] ::selection { background: var(--accent-dim); color: var(--text-1); }
/* Anel de foco global — só para controles de ação (botões, links).
   Campos de texto comunicam foco pela borda do próprio campo/container. */
[data-navi] :focus-visible:not(input):not(textarea):not(select) {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  border-radius: var(--navi-radius-sm);
}
[data-navi] input:focus-visible,
[data-navi] textarea:focus-visible,
[data-navi] select:focus-visible { outline: none; }
@media (max-width: 768px) {
  :root { --navi-page-padding: 20px; --navi-section-y: 64px; --navi-section-y-cta: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-navi] *, [data-navi] *::before, [data-navi] *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}