/* ============================================================
   NRC IA — DESIGN TOKENS
   "Dois mundos, um tijolo" — Planta (blueprint) ↔ Filme (cinema)
   ============================================================ */

:root {
  /* Família Mundo Planta (azul-blueprint, frio) */
  --azul-cianotipia: #0B1F3A;
  --azul-linha: #5BC0EB;

  /* Família Mundo Filme (azul-noite, cinema) */
  --azul-cinema: #0A1426;
  --dourado-lampada: #D4A574;

  /* Neutro comum (papel, descanso) */
  --papel-croqui: #F2EDE3;

  /* Branco e cinzas */
  --branco-pleno: #FFFFFF;
  --branco-osso: #F5F2EA;
  --cinza-1: #A8B3C7;
  --cinza-2: #6B7A95;

  /* Vermelho-sangue (REC, alertas) */
  --vermelho-rec: #C73E3E;

  /* Tipografia */
  --font-editorial: "Fraunces", "PP Editorial New", Georgia, serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Motion */
  --ease-cinema: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-toggle: 600ms;
  --duration-micro: 220ms;

  /* Espaçamentos base 4 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
}

/* Modo Planta é o default */
[data-modo="planta"] {
  --bg-dominante: var(--azul-cianotipia);
  --accent-dominante: var(--azul-linha);
  --texto-primario: var(--branco-osso);
}

[data-modo="filme"] {
  --bg-dominante: var(--azul-cinema);
  --accent-dominante: var(--dourado-lampada);
  --texto-primario: var(--branco-pleno);
}

/* Transição global ao trocar modo */
html[data-modo] body,
html[data-modo] .cena-01 {
  transition:
    background-color var(--duration-toggle) var(--ease-cinema),
    color var(--duration-toggle) var(--ease-cinema),
    border-color var(--duration-toggle) var(--ease-cinema);
}