/* ============================================================
   DESIGN TOKENS — llenoporfavor (rediseno 2026)
   Brand:   #7c3aed (violeta) | Deep: #5b21b6
   Surfaces: warm whites + lavender tints
   Type:    Fraunces (display) + Inter (body) + JetBrains Mono
   ============================================================ */

:root {
  /* Brand */
  --brand:        #7c3aed;
  --brand-deep:   #5b21b6;
  --brand-soft:   #f5f3ff;
  --brand-softer: #faf8ff;
  --brand-tint:   #ede9fe;

  /* Neutrals (warm) */
  --ink:          #1a1426;
  --ink-2:        #3a2f4a;
  --muted:        #6b6478;
  --muted-2:      #8c8499;
  --line:         #e9e5ef;
  --line-2:       #f2eef7;
  --bg:           #ffffff;
  --bg-2:         #fbfaff;
  --bg-3:         #f5f3ff;

  /* Semantic */
  --green:       #10b981;
  --green-deep:  #059669;
  --green-soft:  #ecfdf5;
  --red:         #ef4444;
  --red-soft:    #fef2f2;
  --amber:       #f59e0b;
  --amber-soft:  #fffbeb;

  /* Compatibility shims (mapped from legacy tokens used across templates) */
  --color-primary:                    var(--brand);
  --color-primary-container:          var(--brand-deep);
  --color-on-primary:                 #ffffff;
  --color-secondary:                  var(--brand-deep);
  --color-secondary-container:        var(--brand-tint);
  --color-on-secondary:               #ffffff;
  --color-on-secondary-container:     var(--brand-deep);
  --color-surface:                    var(--bg);
  --color-surface-container-lowest:   var(--bg);
  --color-surface-container-low:      var(--bg-2);
  --color-surface-container:          var(--bg-3);
  --color-surface-container-high:     var(--brand-soft);
  --color-surface-container-highest:  var(--brand-tint);
  --color-on-surface:                 var(--ink);
  --color-on-surface-variant:         var(--muted);
  --color-outline:                    var(--muted-2);
  --color-outline-variant:            var(--line);

  /* Type families */
  --f-display: 'Fraunces', 'Iowan Old Style', 'Georgia', serif;
  --f-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Radii */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm:    0 1px 2px rgba(26,20,38,.04), 0 1px 3px rgba(26,20,38,.03);
  --shadow-md:    0 4px 16px rgba(26,20,38,.06), 0 1px 3px rgba(26,20,38,.04);
  --shadow-lg:    0 12px 40px rgba(91,33,182,.08), 0 2px 6px rgba(26,20,38,.04);
  --shadow-brand: 0 8px 28px rgba(124,58,237,.18);
  --shadow-ambient: var(--shadow-md);

  /* Layout */
  --container-max: 1200px;
}

/* Type helpers */
.serif {
  font-family: var(--f-display);
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 50, 'WONK' 0;
  letter-spacing: -0.01em;
}
.mono { font-family: var(--f-mono); }
.tnum { font-variant-numeric: tabular-nums; }

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
}

/* Decorative dot grid */
.dotgrid {
  background-image: radial-gradient(circle, rgba(124,58,237,.12) 1px, transparent 1px);
  background-size: 18px 18px;
}

/* AdSense placeholder (dev only; production uses Auto Ads) */
.ad-slot {
  position: relative;
  background: repeating-linear-gradient(135deg, var(--bg-3) 0 12px, var(--brand-softer) 12px 24px);
  border: 1px dashed var(--brand-tint);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--muted-2);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ad-slot::before {
  content: 'Anuncio';
  position: absolute;
  top: 8px;
  left: 12px;
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--muted-2);
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 10px;
  border: 2px solid var(--bg-2);
}
::-webkit-scrollbar-thumb:hover { background: var(--brand-tint); }