/**
 * Puente: sitio principal (index.html) usa --bg, --panel, --accent…
 * Valores derivados de roles Fase 1 (--tm-role-* en 01-tokens.css).
 */
:root {
  --max: 1200px;
  --pad: 22px;
  /* Consumen roles Fase 1 (--tm-role-* en 01-tokens.css); mismo aspecto que antes. */
  --bg: var(--tm-role-canvas);
  --bg-alt: var(--tm-role-section-alt);
  --panel: var(--tm-role-surface);
  --panel-alt: var(--tm-role-surface-elevated);
  --text: var(--tm-role-text-primary);
  --muted: var(--tm-role-text-muted);
  --accent: var(--tm-role-accent);
  --accent2: var(--tm-role-accent-cool);
  --accent-gold: var(--tm-role-accent);
  --line: var(--tm-role-border-subtle);
  --shadow: 0 18px 50px var(--tm-shadow-ambient-50);
  --shadow2: 0 10px 30px var(--tm-shadow-ambient-40);
  --shadow-soft: 0 4px 15px color-mix(in srgb, var(--tm-role-ink-scrim) 10%, transparent);
  --shadow-gold-strong: 0 15px 35px color-mix(in srgb, var(--tm-role-accent) 40%, transparent);
  --glow-gold: 0 8px 25px var(--tm-shadow-accent-glow);
  --radius: 18px;

  --surface-paper: var(--tm-role-paper);
  --ink-on-accent: var(--tm-role-ink-on-accent);
  --ink-on-paper: var(--tm-role-ink-on-paper);

  --gradient-body-vignette: var(--tm-role-vignette-body);
  --gradient-body-vignette-index-home:
    radial-gradient(
      ellipse 125% 95% at 50% 50%,
      transparent 32%,
      var(--tm-vignette-index-radial-end) 100%
    ),
    linear-gradient(180deg, var(--tm-vignette-index-top) 0%, var(--tm-vignette-index-fade) 52%),
    linear-gradient(0deg, var(--tm-vignette-index-bottom) 0%, var(--tm-vignette-index-fade) 58%);
  --gradient-ticker-bg: linear-gradient(90deg, var(--tm-role-canvas), var(--tm-role-section-alt));
  --gradient-hero-overlay: linear-gradient(
    180deg,
    color-mix(in srgb, var(--tm-role-canvas) 75%, transparent) 0%,
    color-mix(in srgb, var(--tm-role-canvas) 28%, transparent) 48%,
    color-mix(in srgb, var(--tm-role-canvas) 22%, transparent) 58%,
    color-mix(in srgb, var(--tm-role-canvas) 72%, transparent) 100%
  );
  --gradient-news-overlay: linear-gradient(
    to top,
    color-mix(in srgb, var(--tm-role-canvas) 95%, transparent) 0%,
    color-mix(in srgb, var(--tm-role-canvas) 60%, transparent) 50%,
    transparent 100%
  );
  --scrim-navy-95: color-mix(in srgb, var(--tm-role-canvas) 95%, transparent);
  --scrim-navy-72: color-mix(in srgb, var(--tm-role-canvas) 72%, transparent);
  --scrim-navy-60: color-mix(in srgb, var(--tm-role-canvas) 60%, transparent);
  --accent-gradient-cta: linear-gradient(
    135deg,
    var(--accent),
    color-mix(in srgb, var(--accent) 58%, var(--tm-role-ink-scrim))
  );
  --accent-gradient-cta-nav: linear-gradient(
    135deg,
    var(--accent),
    color-mix(in srgb, var(--accent) 52%, var(--tm-role-ink-scrim))
  );
  --accent-gradient-badge: linear-gradient(
    135deg,
    var(--accent),
    color-mix(in srgb, var(--accent) 48%, var(--tm-role-ink-scrim))
  );
  --logo-drop-shadow: 0 4px 15px color-mix(in srgb, var(--tm-role-ink-scrim) 20%, transparent);
}