/* tokens.css — variables de diseño (paleta dark / keynote) */
:root {
  /* Lienzo de diseño (16:9) — el #stage se escala para llenar la pantalla */
  --stage-w: 1280px;
  --stage-h: 720px;

  /* Fondo */
  --bg-0: #060608;
  --bg-1: #0d0d12;
  --bg-2: #141420;

  /* Texto */
  --fg:       #f5f5f7;
  --fg-2:     #b4b4be;
  --fg-3:     #7d7d88;
  --fg-faint: #55555f;

  /* Acentos */
  --blue:   #0a84ff;
  --blue-2: #5ac8fa;
  --green:  #30d158;
  --red:    #ff453a;
  --amber:  #ff9f0a;
  --violet: #bf5af2;

  --blue-soft:  rgba(10, 132, 255, 0.14);
  --green-soft: rgba(48, 209, 88, 0.14);
  --red-soft:   rgba(255, 69, 58, 0.14);
  --amber-soft: rgba(255, 159, 10, 0.14);

  /* Superficies */
  --card:        rgba(255, 255, 255, 0.045);
  --card-2:      rgba(255, 255, 255, 0.07);
  --stroke:      rgba(255, 255, 255, 0.10);
  --stroke-2:    rgba(255, 255, 255, 0.16);

  /* Tipografía */
  --font: 'Inter', -apple-system, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;

  /* Espaciado */
  --pad-x: 84px;
  --pad-y: 60px;
  --radius: 18px;
  --radius-sm: 12px;

  /* Sombra / glow */
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.5);

  /* Transiciones */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}