/* ============================================================
   DESIGN TOKENS — llenoporfavor (rediseno 2026)
   Brand:   #c97a2b (naranja Ocre, inspirado en calculadoras) | Deep: #a35e1c
   Surfaces: warm cream + beige tints
   Type:    Inter (display + body) + JetBrains Mono (cifras)
   ============================================================ */

:root {
  /* Brand — paleta "Ocre" de calculadoras (naranja cálido) */
  --brand:        #c97a2b;
  --brand-deep:   #a35e1c;
  --brand-soft:   #fbeedd;
  --brand-softer: #fdf6ee;
  --brand-tint:   #f2e2cc;

  /* Neutrals (warm) */
  --ink:          #1a1a17;
  --ink-2:        #3d3a33;
  --muted:        #66635c;
  --muted-2:      #8a877f;
  --line:         #e8e4dc;
  --line-2:       #f4f2ec;
  --bg:           #fafaf7;
  --bg-2:         #f4f2ec;
  --bg-3:         #efece4;

  /* Semantic — tonos tierra de calculadoras */
  --green:       #3f7d4f;
  --green-deep:  #2f6b40;
  --green-soft:  #e3f0e6;
  --red:         #b03a2e;
  --red-soft:    #f6e3e0;
  --amber:       #b3741c;
  --amber-soft:  #f7edda;

  /* 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: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    var(--f-body); /* legacy alias — mono retired, all figures use Inter */

  /* 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(163,94,28,.08), 0 2px 6px rgba(26,20,38,.04);
  --shadow-brand: 0 8px 28px rgba(201,122,43,.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); font-variant-numeric: tabular-nums; }
.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(201,122,43,.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); }