/* Design tokens — projetos.jpnasoftware.com (v2)
   Direção: ferramenta de dev com energia. Escuro por padrão, acentos neon,
   rótulos em mono. Público: TI, programação, LLM. */
:root {
  /* Superfícies (dark, padrão) */
  --bg: #090A0F;
  --bg-2: #0F111A;
  --surface: #131622;
  --surface-2: #1A1E2E;
  --line: #262B3F;
  --ink: #E9ECF8;
  --ink-2: #8A92AE;

  /* Acentos */
  --lime: #B8FF3C;     /* ação principal, "ao vivo" (preenchimento) */
  --lime-text: #B8FF3C; /* o mesmo acento quando é cor de texto */
  --cyan: #2EE6F0;
  --violet: #8B6CFF;
  --pink: #FF4D94;
  --amber: #FFB83D;
  --on-accent: #090A0F;          /* texto sobre acento */
  --net: 184, 255, 60;           /* rede de fundo (rgb) */
  --glow: rgba(184, 255, 60, .35);

  /* Tipos de nota */
  --t-ideia: var(--amber);
  --t-ferramenta: var(--cyan);
  --t-triagem: var(--pink);
  --t-transcricao: var(--violet);

  /* Tipografia */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-hero: clamp(2.25rem, 6vw + .5rem, 4.75rem);
  --fs-h2: clamp(1.6rem, 3vw + .5rem, 2.6rem);
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-small: .8125rem;

  /* Espaço (base 4) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;

  /* Forma */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px;

  /* Movimento */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --dur-fast: 140ms; --dur: 280ms; --dur-slow: 600ms;

  /* Layout */
  --container: 1200px;
  --gutter: 16px;
}

/* Light: mesmo sistema em papel claro; acentos escurecidos para contraste */
:root[data-theme="light"] {
  --bg: #F5F6FA;
  --bg-2: #ECEEF5;
  --surface: #FFFFFF;
  --surface-2: #F0F2F8;
  --line: #D8DCE9;
  --ink: #0D0F1C;
  --ink-2: #5A6180;
  --lime: #86D400;
  --lime-text: #427800;
  --cyan: #0A8494;
  --violet: #6B4DFF;
  --pink: #D11A6C;
  --amber: #B86E00;
  --net: 107, 77, 255;
  --glow: rgba(107, 77, 255, .22);
}

@media (min-width: 768px)  { :root { --gutter: 32px; } }
@media (min-width: 1200px) { :root { --gutter: 48px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}