/* =========================================================
   DigitalFrom.tech — TOKENS (tema oscuro premium)
   ---------------------------------------------------------
   Paleta, tipografía, layout y efectos centralizados
   ========================================================= */

:root {
  /* ===== Colors (Dark) ===== */
  --bg: #0c0f12;           /* fondo base        */
  --bg-elev: #11161c;      /* elevación cards   */
  --bg-soft: #0f1419;      /* paneles suaves    */
  --ink: #eaf2ff;          /* texto principal   */
  --ink-inverse: #ffffff;  /* texto sobre fondos oscuros/acento */
  --muted: #9aa8bd;        /* texto secundario  */
  --border: rgba(255,255,255,.08);

  /* ===== Accents ===== */
  --accent-1: #00e6ff;     /* cian glow         */
  --accent-2: #7c3aed;     /* violeta           */
  --accent-3: #22c55e;     /* verde correcto    */

  /* ===== Gradients ===== */
  --grad-hero: radial-gradient(1200px 600px at 20% -10%, rgba(124,58,237,.18) 0%, transparent 60%),
               radial-gradient(1200px 700px at 80% 10%, rgba(0,230,255,.18) 0%, transparent 60%),
               linear-gradient(180deg, rgba(12,15,18,0) 0%, rgba(12,15,18,1) 60%);

  /* ===== Effects ===== */
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 24px;

  --shadow-soft: 0 10px 30px rgba(0,0,0,.35);
  --shadow-card: 0 6px 18px rgba(0,0,0,.35);
  --shadow-hover: 0 8px 25px rgba(0,0,0,0.4);
  --glow: 0 0 24px rgba(0,230,255,.35);

  /* ===== Layout ===== */
  --container: 1200px;
  --pad-section: clamp(64px, 10vw, 120px);
  --gap: 1rem;
  --gap-lg: 1.5rem;

  /* ===== Typography ===== */
  --font-ui: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --fz-xs: .85rem;
  --fz-sm: .95rem;
  --fz-base: 1rem;
  --fz-md: 1.05rem;
  --fz-lg: clamp(1.25rem, 2.4vw, 1.6rem);
  --fz-xl: clamp(2rem, 5vw, 3rem);
  --fz-xxl: clamp(2.6rem, 7.5vw, 4.2rem);
}

/* ===== Accessibility ===== */
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
}