/**
 * ============================================================
 * tokens.css — Design Tokens · Mi Asistente
 * Branding III · Voz Visual Maestra · 27/05/2026
 * ============================================================
 */

:root {

  /* ── Paleta base ──────────────────────────────────────────── */
  --color-graphite-950: #141210;   /* deep background / hero */
  --color-graphite-900: #1C1917;   /* base background */
  --color-graphite-800: #292522;   /* surface / cards */
  --color-graphite-700: #3E3A37;   /* muted borders / dividers */
  --color-violet-600:   #6C63FF;   /* primary CTA · links */
  --color-violet-700:   #574BFF;   /* hover CTA */
  --color-violet-800:   #4A43CC;   /* active/pressed CTA */
  --color-green-live:   #1DB954;   /* ⚠ SOLO estados positivos / confirmación — Regla PP */
  --color-amber-400:    #E8B84C;   /* advertencias */
  --color-coral-500:    #E86A5F;   /* error / cancelación */
  --color-cloud-100:    #F5F4F2;   /* texto principal claro / fondo light */
  --color-cloud-300:    #D8D5D1;   /* bordes light / dividers en modo claro — TT */
  --color-cloud-500:    #A09E9C;   /* texto secundario / muted */

  /* ── Aliases semánticos — backgrounds ───────────────────── */
  --bg-deep:     var(--color-graphite-950);
  --bg-base:     var(--color-graphite-900);
  --bg-surface:  var(--color-graphite-800);
  --bg-muted:    var(--color-graphite-700);
  --bg-light:    var(--color-cloud-100);

  /* ── Aliases semánticos — borders ───────────────────────── */
  --border-subtle: rgba(255, 255, 255, .07);
  --border-muted:  rgba(255, 255, 255, .12);
  --border-strong: rgba(255, 255, 255, .20);

  /* ── Aliases semánticos — texto ─────────────────────────── */
  --text-primary:   var(--color-cloud-100);
  --text-secondary: var(--color-cloud-500);
  --text-inverse:   var(--color-graphite-950);
  --text-on-violet: #FFFFFF;

  /* ── Aliases semánticos — acciones ──────────────────────── */
  --cta-bg:     var(--color-violet-600);
  --cta-hover:  var(--color-violet-700);
  --cta-active: var(--color-violet-800);
  --cta-glow:   rgba(108, 99, 255, .30);

  /* ── Aliases semánticos — estados ───────────────────────── */
  --color-success: var(--color-green-live);  /* solo confirmaciones operativas */
  --color-warning: var(--color-amber-400);
  --color-danger:  var(--color-coral-500);

  /* ── Tipografía ──────────────────────────────────────────── */
  --font-display: 'Bebas Neue', 'Impact', sans-serif;
  --font-body:    'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  48px;
  --text-4xl:  72px;
  --text-5xl:  96px;
  --text-hero: 128px;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.10;
  --leading-snug:    1.25;
  --leading-base:    1.50;
  --leading-relaxed: 1.70;
  --leading-loose:   1.90;

  --tracking-tight:  -.02em;
  --tracking-normal:  0;
  --tracking-wide:    .04em;
  --tracking-wider:   .08em;
  --tracking-widest:  .14em;

  /* ── Espaciado — grilla 8px ──────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-full: 999px;

  /* ── Sombras ─────────────────────────────────────────────── */
  --shadow-xs:  0 1px 4px rgba(0, 0, 0, .25);
  --shadow-sm:  0 2px 10px rgba(0, 0, 0, .35);
  --shadow-md:  0 4px 24px rgba(0, 0, 0, .45);
  --shadow-lg:  0 8px 48px rgba(0, 0, 0, .55);

  /* ── Glows ───────────────────────────────────────────────── */
  --glow-violet: 0 0 40px rgba(108, 99, 255, .22);
  --glow-green:  0 0 24px rgba(29, 185, 84,  .18);
  --glow-amber:  0 0 24px rgba(232,184, 76,  .18);
  --glow-coral:  0 0 24px rgba(232,106, 95,  .18);
  --glow-focus:  0 0 0 3px rgba(108, 99, 255, .35);

  /* ── Transiciones ────────────────────────────────────────── */
  --transition-fast: .15s ease;
  --transition-base: .25s ease;
  --transition-slow: .40s ease;
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);   /* timing fn solo — TT (usado en rubros-section) */

  /* ── Z-index ─────────────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-nav:     200;
  --z-modal:   1000;
  --z-toast:   2000;

  /* ── Layout ──────────────────────────────────────────────── */
  --max-w-content: 1200px;
  --max-w-card:     480px;
  --max-w-text:     700px;

  /* ── Gradientes ──────────────────────────────────────────── */
  --gradient-hero:   linear-gradient(135deg, #141210 0%, #1C1917 60%, #200F3A 100%);
  --gradient-violet: linear-gradient(135deg, var(--color-violet-600), var(--color-violet-800));
  --gradient-glow:   radial-gradient(ellipse 70% 60% at 50% 0%, rgba(108,99,255,.12) 0%, transparent 70%);
}

/* ── Modo claro (manual.html usa secciones light) ─────────── */
.theme-light {
  --bg-base:      var(--color-cloud-100);
  --bg-surface:   #FFFFFF;
  --bg-muted:     #EDECE9;
  --text-primary: var(--color-graphite-950);
  --text-secondary: var(--color-graphite-700);
  --border-subtle: rgba(0,0,0,.08);
  --border-muted:  rgba(0,0,0,.14);
}

/* ── Utilidades de color semántico ───────────────────────── */
.color-success { color: var(--color-success); }
.color-warning { color: var(--color-warning); }
.color-danger  { color: var(--color-danger);  }
.color-muted   { color: var(--text-secondary); }
.color-violet  { color: var(--color-violet-600); }