/* ==========================================================================
   HUD Design System · Tokens
   Base: jarvis.lucasvictor.ai (valores extraídos do CSS publicado) +
   análise dos reels. Destino: packages/ui do Agentic OS.
   Cores em OKLCH. Só existe tema escuro: é uma interface de "central de
   comando" e o brilho depende do fundo profundo.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Manrope:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root {
  color-scheme: dark;

  /* --- Superfícies (do mais fundo ao mais alto) ------------------------- */
  --deep:        oklch(12% .03 255);      /* moldura externa, vinheta      */
  --background:  oklch(15% .04 255);      /* fundo da aplicação            */
  --popover:     oklch(18% .05 252);      /* menus, tooltips               */
  --card:        oklch(20% .05 252 / .55);/* painéis (sempre com blur)     */
  --muted:       oklch(22% .04 252);      /* trilhos, barras vazias        */
  --secondary:   oklch(24% .05 252);      /* botões secundários            */
  --accent:      oklch(26% .06 245);      /* hover, item ativo             */

  /* --- Texto ------------------------------------------------------------- */
  --foreground:        oklch(95% .015 230);
  --muted-foreground:  oklch(68% .04 240);
  --subtle-foreground: oklch(52% .04 245);  /* rótulos terciários, réguas  */

  /* --- Energia (acentos) ------------------------------------------------- */
  --cyan:     oklch(80% .13 205);   /* primária: rótulos HUD, foco, dados   */
  --electric: oklch(65% .19 255);   /* brilho, voz, títulos de estado       */
  --violet:   oklch(68% .17 300);   /* pensando / IA processando            */
  --online:   oklch(80% .17 155);   /* online, ativo, conectado             */
  --warning:  oklch(75% .16 55);    /* precisa de você, limite próximo      */
  --destructive: oklch(62% .2 25);  /* erro, produção, bloqueado           */

  --primary: var(--cyan);
  --primary-foreground: oklch(14% .04 255);
  --ring: var(--cyan);

  /* --- Identidade dos agentes (só em pontos, avatares e trilhas) -------- */
  --agent-claude:      oklch(72% .14 45);
  --agent-codex:       oklch(86% .02 240);
  --agent-antigravity: oklch(70% .16 285);
  --agent-grok:        oklch(78% .12 180);
  --agent-human:       oklch(85% .12 95);
  --agent-opencode:    oklch(76% .13 140);

  /* --- Linhas ------------------------------------------------------------ */
  --border:        oklch(75% .12 215 / .18);
  --border-strong: oklch(75% .12 215 / .34);
  --input:         oklch(75% .12 215 / .22);
  --grid-line:     oklch(65% .15 245 / .07);

  /* --- Brilhos ----------------------------------------------------------- */
  --glow-cyan-sm:  0 0 8px  color-mix(in oklab, var(--cyan) 60%, transparent);
  --glow-cyan-md:  0 0 20px color-mix(in oklab, var(--cyan) 40%, transparent);
  --glow-electric: 0 0 40px color-mix(in oklab, var(--electric) 45%, transparent);
  --glow-text:     0 0 24px oklch(65% .19 255 / .55);
  --shadow-panel:  inset 0 1px oklch(80% .13 205 / .08),
                   0 20px 60px -30px oklch(65% .19 255 / .5);

  /* --- Tipografia -------------------------------------------------------- */
  --font-display: "Space Grotesk", ui-sans-serif, sans-serif; /* marca, estados, títulos */
  --font-sans:    "Manrope", ui-sans-serif, system-ui, sans-serif; /* leitura, chat */
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;  /* rótulos, números, relógio */

  --text-micro: .58rem;   /* tags de origem (PRINTER.STATUS)            */
  --text-label: .68rem;   /* .hud-label                                 */
  --text-xs:    .75rem;
  --text-sm:    .875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-state: clamp(1.5rem, 2.4vw, 2.25rem); /* "EM ESPERA"            */

  --tracking-label: .28em;  /* rótulos HUD                               */
  --tracking-brand: .42em;  /* "J A R V I S"                             */
  --tracking-state: .6em;   /* "E M  E S P E R A"                        */

  /* --- Espaço e forma ---------------------------------------------------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px;

  --radius-sm: .375rem;  /* chips, inputs pequenos                        */
  --radius:    .5rem;    /* painéis HUD                                   */
  --radius-lg: .75rem;   /* cartões de resposta                           */
  --radius-xl: 1rem;     /* moldura do app                                */
  --radius-pill: 999px;

  --grid-size: 64px;

  /* --- Movimento --------------------------------------------------------- */
  --ease-hud:    cubic-bezier(.2, .8, .2, 1);   /* entradas, painéis         */
  --ease-snap:   cubic-bezier(.4, 0, .2, 1);    /* hover, toggles            */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* cartão "pousando"       */

  --dur-instant: 90ms;
  --dur-fast:    150ms;
  --dur-base:    240ms;
  --dur-slow:    420ms;
  --dur-reveal:  700ms;
  --dur-boot:    1600ms;

  /* --- Camadas ----------------------------------------------------------- */
  --z-grid: 0; --z-orb: 1; --z-panel: 10; --z-overlay: 40; --z-toast: 60; --z-boot: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-reveal: 1ms; --dur-boot: 1ms;
  }
}