/* ============================================================================
   tokens.css — Chronoprime
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Jost:wght@400;500;600;700&display=swap');

:root{
  --font-ui:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --font-display:'Archivo',var(--font-ui);
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;

  /* ── DARK (default) · Rojo + negro ──────────────────────────────────────── */
  --bg:        #0D0D0D;
  --surface:   #1A1A1A;
  --surface-h: #242424;
  --border:    rgba(255,255,255,.09);
  --border-h:  rgba(255,255,255,.20);
  --text:      #F2F2F2;
  --dim:       #8A8A8A;
  --muted:     #555555;
  --accent:          #B11226;
  --accent-h:        #D4172E;
  --accent-contrast: #F2F2F2;
  --accent-soft:     rgba(177,18,38,.16);
  --ok:   #3ec07a;
  --err:  #ef5350;
  --warn: #e0a23c;
  --info: #56a9e8;
  --beco:     #05519c;
  --horotec:  #da2736;
  --benmayor: #b88b1c;
  --herrero:  #a78bfa;
  --r:    10px;
  --r-sm: 7px;
  --r-lg: 16px;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.35);
}

/* ── dark-amber · Naranja + negro ─────────────────────────────────────────── */
:root[data-theme="dark-amber"]{
  --bg:        #0A0A0A;
  --surface:   #1C1C1C;
  --surface-h: #262626;
  --border:    rgba(255,122,0,.12);
  --border-h:  rgba(255,122,0,.28);
  --text:      #FAFAFA;
  --dim:       #9A9A9A;
  --muted:     #5A5A5A;
  --accent:    #FF7A00; --accent-h:#FF9833; --accent-contrast:#0A0A0A;
  --accent-soft:rgba(255,122,0,.14);
}

/* ── dark-green · Verde oscuro ───────────────────────────────────────────── */
:root[data-theme="dark-green"]{
  --bg:        #090e0b;
  --surface:   #0f1712;
  --surface-h: #151f19;
  --border:    rgba(62,192,122,.11);
  --border-h:  rgba(62,192,122,.26);
  --text:      #daeee3;
  --dim:       #7aab90;
  --muted:     #4d7a62;
  --accent:    #3ec07a; --accent-h:#5ad394; --accent-contrast:#04140a;
  --accent-soft:rgba(62,192,122,.15);
}

/* ── mid-slate · Gris azulado medio — más claro ──────────────────────────── */
:root[data-theme="mid-slate"]{
  --bg:        #2e3748;
  --surface:   #38445a;
  --surface-h: #43516c;
  --border:    rgba(255,255,255,.11);
  --border-h:  rgba(255,255,255,.24);
  --text:      #e8eef6;
  --dim:       #a0b0c8;
  --muted:     #6a7e96;
  --accent:    #5b8dee; --accent-h:#7aa4f5; --accent-contrast:#0e1520;
  --accent-soft:rgba(91,141,238,.16);
  --shadow:    0 1px 2px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.18);
}

/* ── mid-warm · Cacao medio — más claro ──────────────────────────────────── */
:root[data-theme="mid-warm"]{
  --bg:        #3a3020;
  --surface:   #473c28;
  --surface-h: #554834;
  --border:    rgba(220,185,120,.13);
  --border-h:  rgba(220,185,120,.28);
  --text:      #f0e4cc;
  --dim:       #c0a070;
  --muted:     #7a6448;
  --accent:    #d4943a; --accent-h:#e8aa58; --accent-contrast:#180f04;
  --accent-soft:rgba(212,148,58,.16);
  --shadow:    0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.20);
}

/* ── mid-green · Verde menta medio — más claro ───────────────────────────── */
:root[data-theme="mid-green"]{
  --bg:        #2a3c32;
  --surface:   #354a3e;
  --surface-h: #40594a;
  --border:    rgba(111,158,118,.15);
  --border-h:  rgba(111,158,118,.32);
  --text:      #daf0e4;
  --dim:       #8ec4a0;
  --muted:     #567864;
  --accent:    #6F9E76; --accent-h:#8ab890; --accent-contrast:#0e1810;
  --accent-soft:rgba(111,158,118,.16);
  --shadow:    0 1px 2px rgba(0,0,0,.28), 0 8px 24px rgba(0,0,0,.18);
}

/* ── light · Neutro claro · acento teja ──────────────────────────────────── */
:root[data-theme="light"]{
  --bg:        #f0f2f5;
  --surface:   #ffffff;
  --surface-h: #e8ecf1;
  --border:    rgba(15,23,42,.11);
  --border-h:  rgba(15,23,42,.24);
  --text:      #1a2030;
  --dim:       #4a5568;
  --muted:     #718096;
  --accent:    #c0392b; --accent-h:#e74c3c; --accent-contrast:#fff;
  --accent-soft:rgba(192,57,43,.10);
  --shadow:    0 1px 2px rgba(15,23,42,.07), 0 8px 24px rgba(15,23,42,.07);
  /* override para botones que usaban lilas/verdes hardcoded */
  --btn-primary-bg:   rgba(192,57,43,.10);
  --btn-primary-border: rgba(192,57,43,.28);
  --btn-primary-color: #c0392b;
}

/* ── light-warm · Verde salvia claro ─────────────────────────────────────── */
:root[data-theme="light-warm"]{
  --bg:        #F7F8F4;
  --surface:   #FFFFFF;
  --surface-h: #E8EFE7;
  --border:    rgba(46,52,48,.13);
  --border-h:  rgba(46,52,48,.28);
  --text:      #2E3430;
  --dim:       #4e5e52;
  --muted:     #7a8c7e;
  --accent:    #6F9E76; --accent-h:#5a8862; --accent-contrast:#fff;
  --accent-soft:rgba(111,158,118,.12);
  --shadow:    0 1px 2px rgba(46,52,48,.07), 0 8px 24px rgba(46,52,48,.09);
  --btn-primary-bg:   rgba(111,158,118,.10);
  --btn-primary-border: rgba(111,158,118,.30);
  --btn-primary-color: #4F7754;
}

/* ── light-rose · Piedra fría · acento índigo ────────────────────────────── */
:root[data-theme="light-rose"]{
  --bg:        #eef0f4;
  --surface:   #f8f9fb;
  --surface-h: #e2e6ec;
  --border:    rgba(30,40,70,.12);
  --border-h:  rgba(30,40,70,.26);
  --text:      #1e2846;
  --dim:       #3d5070;
  --muted:     #6878a0;
  --accent:    #3d5fa0; --accent-h:#5478c0; --accent-contrast:#fff;
  --accent-soft:rgba(61,95,160,.10);
  --shadow:    0 1px 2px rgba(30,40,70,.07), 0 8px 24px rgba(30,40,70,.08);
  --btn-primary-bg:   rgba(61,95,160,.10);
  --btn-primary-border: rgba(61,95,160,.28);
  --btn-primary-color: #3d5fa0;
}

/* ── extra-red · Carmesí full spec ───────────────────────────────────────── */
:root[data-theme="extra-red"]{
  --bg:        #0D0D0D;
  --surface:   #1A1A1A;
  --surface-h: #222222;
  --border:    rgba(177,18,38,.18);
  --border-h:  rgba(177,18,38,.38);
  --text:      #F2F2F2;
  --dim:       #8A8A8A;
  --muted:     #555555;
  --accent:    #B11226; --accent-h:#D4172E; --accent-contrast:#F2F2F2;
  --accent-soft:rgba(177,18,38,.16);
  --ok:   #3ec07a;
  --err:  #ef5350;
  --warn: #e0a23c;
  --info: #56a9e8;
}

/* ── extra-orange · Ámbar full spec ──────────────────────────────────────── */
:root[data-theme="extra-orange"]{
  --bg:        #0A0A0A;
  --surface:   #1C1C1C;
  --surface-h: #252525;
  --border:    rgba(255,122,0,.15);
  --border-h:  rgba(255,122,0,.35);
  --text:      #FAFAFA;
  --dim:       #9A9A9A;
  --muted:     #5A5A5A;
  --accent:    #FF7A00; --accent-h:#FF9833; --accent-contrast:#0A0A0A;
  --accent-soft:rgba(255,122,0,.14);
  --ok:   #3ec07a;
  --err:  #ef5350;
  --warn: #e0a23c;
  --info: #56a9e8;
}

/* ── extra-green · Salvia full spec ──────────────────────────────────────── */
:root[data-theme="extra-green"]{
  --bg:        #F7F8F4;
  --surface:   #FFFFFF;
  --surface-h: #E8EFE7;
  --border:    rgba(46,52,48,.14);
  --border-h:  rgba(46,52,48,.30);
  --text:      #2E3430;
  --dim:       #4F7754;
  --muted:     #95AA98;
  --accent:    #6F9E76; --accent-h:#4F7754; --accent-contrast:#fff;
  --accent-soft:rgba(111,158,118,.14);
  --shadow:    0 1px 2px rgba(46,52,48,.07), 0 8px 24px rgba(46,52,48,.09);
  --btn-primary-bg:   rgba(111,158,118,.12);
  --btn-primary-border: rgba(79,119,84,.32);
  --btn-primary-color: #4F7754;
}