/* ── Variables globales — EDITAR SOLO AQUÍ, nunca hardcodear colores ── */
:root {
  --bg:           #fffffe;
  --bg-warm:      #f8f5f2;
  --surface:      #ffffff;
  --surface-hover:#f5f3f0;

  --ink:          #232323;
  --ink-soft:     #5c5c5c;
  --ink-muted:    #8c8c8c;
  --line:         rgba(35, 35, 35, 0.07);
  --line-strong:  rgba(35, 35, 35, 0.14);

  --leaf:         #078080;
  --leaf-deep:    #055c5c;
  --leaf-light:   rgba(7, 128, 128, 0.08);
  --leaf-mid:     rgba(7, 128, 128, 0.5);

  --coral:        #f45d48;
  --coral-light:  rgba(244, 93, 72, 0.08);
  --coral-mid:    rgba(244, 93, 72, 0.5);

  --color-success: var(--leaf);
  --color-warning: var(--coral);
  --color-error:   #dc2626;

  --color-surface:    var(--surface);
  --color-accent:     var(--leaf);
  --color-accent-2:   var(--leaf-deep);
  --color-text:       var(--ink);
  --color-text-muted: var(--ink-soft);
  --color-border:     var(--line);

  --font-display: 'Cabinet Grotesk', system-ui, sans-serif;
  --font-base:    'General Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;

  --shadow-sm:    0 1px 3px rgba(35, 35, 35, 0.05);
  --shadow-card:  0 4px 20px rgba(35, 35, 35, 0.07);
  --shadow-lg:    0 12px 40px rgba(35, 35, 35, 0.10);
  --shadow-float: 0 8px 32px rgba(35, 35, 35, 0.09), 0 2px 8px rgba(7, 128, 128, 0.07);
  --shadow-teal:  0 4px 24px rgba(7, 128, 128, 0.18);

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
}

::selection { background: var(--leaf); color: #fff; }

body {
  background-color: var(--bg-warm);
  position: relative;
  overflow-x: hidden;
}

/* ── Aurora background — atmósfera de gradiente orgánico ── */
.aurora-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 55% at 15% 0%,   rgba(7, 128, 128, 0.07) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 88% 100%,  rgba(244, 93, 72, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 70% 20%,   rgba(7, 128, 128, 0.03) 0%, transparent 55%);
}

/* ── Grain overlay — textura de película ── */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 300px;
  mix-blend-mode: multiply;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Utility: glassmorphic card ── */
.glassmorphic {
  background: rgba(255, 255, 254, 0.88);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(35, 35, 35, 0.07);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
}