/* ============================================================
   AL DOPE — DESIGN SYSTEM
   Este archivo se copia tal cual en cada mini app.
   No se agregan colores fuera de acá.
   ============================================================ */

:root {
  /* --- Color --- */
  --background: #0a0a0a;
  --surface: #151515;
  --surface-2: #1f1f1f;
  --text: #ffffff;
  --text-muted: #9a9a9a;
  --primary: #0055ff;
  --primary-hover: #2b72ff;
  --border: #2e2e2e;
  --success: #00c46a;
  --danger: #ff4d3d;
  --warning: #ffb020;

  /* Derivados (siempre a partir de los de arriba) */
  --primary-soft: rgba(0, 85, 255, 0.14);
  --on-primary: #ffffff;
  --shadow: 4px 4px 0 var(--primary);
  --shadow-press: 1px 1px 0 var(--primary);

  /* --- Tipografía --- */
  --font-display: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  --font-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --step--1: 0.82rem;
  --step-0: 1rem;
  --step-1: 1.18rem;
  --step-2: clamp(1.4rem, 5vw, 1.75rem);
  --step-3: clamp(1.9rem, 8vw, 2.6rem);
  --step-4: clamp(2.6rem, 13vw, 4rem);
  --step-5: clamp(3.2rem, 18vw, 5.5rem);

  /* --- Espacio --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* --- Forma --- */
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --bd: 2px;

  /* --- Movimiento --- */
  --fast: 120ms;
  --base: 220ms;
  --slow: 420ms;
  --ease: cubic-bezier(0.2, 0.9, 0.3, 1);

  /* --- Layout --- */
  --measure: 520px;
  --gutter: 20px;
}

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