/* ══════════════════════════════════════════════════════════
   CORE STYLES - Variables, base styles, typography
   ══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   DESIGN TOKENS — Ventriloc Theme System
   ══════════════════════════════════════════════════════════ */

/* LIGHT THEME (Ventriloc Default) */
:root, [data-theme="light"] {
  /* Ventriloc Palette */
  --midnight-graphite: #202020;
  --canvas-white:      #ffffff;
  --slate-mist:        #efefef;
  --cloud-whisper:     #f5f5f5;
  --warm-ivory:        #ebe6dd;
  --dark-shale:        #4d4d4d;
  --silver-ash:        #828282;
  --light-pearl:       #e8e8e8;
  --sunset-orange:     #ff682c;
  --data-gold:         #816729;

  /* Mapeo de interfaz */
  --red:        var(--sunset-orange);
  --red-dark:   #cc5323;
  --red-mid:    var(--sunset-orange);
  --red-pale:   var(--warm-ivory);
  --black:      var(--midnight-graphite);
  --gray-dk:    var(--dark-shale);
  --gray-md:    var(--silver-ash);
  --gray-lt:    var(--light-pearl);
  --gray-bg:    var(--cloud-whisper);
  --white:      var(--canvas-white);
  --gold:       var(--data-gold);
  --gold-dark:  var(--data-gold);
  --gold-light: #ab8a39;
  --gold-pale:  var(--warm-ivory);
  --gold-glow:  transparent;

  /* Superficies */
  --bg:      var(--cloud-whisper);
  --surface: var(--canvas-white);
  --input-bg: var(--canvas-white);
  --border:  var(--light-pearl);
  --text:    var(--midnight-graphite);
  --muted:   var(--dark-shale);
  --subtle:  var(--silver-ash);
}

/* DARK THEME */
[data-theme="dark"] {
  /* Inverted Palette for Dark Mode */
  --midnight-graphite: #ffffff;
  --canvas-white:      #121212;
  --slate-mist:        #1e1e1e;
  --cloud-whisper:     #181818;
  --warm-ivory:        #2c2c2c;
  --dark-shale:        #ffffff;
  --silver-ash:        #f0f0f0;
  --light-pearl:       #333333;
  
  /* Mantener acentos */
  --sunset-orange:     #ff682c;
  --data-gold:         #b08d38;

  /* Superficies Dark */
  --bg:      var(--cloud-whisper);
  --surface: var(--canvas-white);
  --input-bg: var(--canvas-white);
  --border:  var(--light-pearl);
  --text:    var(--midnight-graphite);
  --muted:   var(--dark-shale);
  --subtle:  var(--silver-ash);
}

:root {
  /* Tipografía Ventriloc */
  --font-brand:  'Montserrat', sans-serif;
  --font-title:  'Montserrat', sans-serif;
  --font-body:   'Inter', system-ui, sans-serif;
  --font-sub:    'Inter', system-ui, sans-serif;
  --font-num:    'Inter', system-ui, sans-serif;

  /* Layout */
  --sidebar-w:  268px;
  --topbar-h:   62px;
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  20px;
  --radius-xl:  200px;

  /* Sombras (aplanadas para Ventriloc) */
  --shadow-xs:  none;
  --shadow-sm:  none;
  --shadow-md:  none;
  --shadow-lg:  none;
  --shadow-red: none;
  --shadow-gold:none;

  /* Transición suave */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur: .22s;
}

/* ── BASE ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
a { text-decoration: none; }

/* Tipografía corporativa Ventriloc */
.font-brand  { font-family: var(--font-brand);  font-weight: 400; letter-spacing: -0.02em; }
.font-title  { font-family: var(--font-title);  font-weight: 400; letter-spacing: -0.02em; }
.font-sub    { font-family: var(--font-sub);    font-weight: 400; }

/* ── UTILITIES ─────────────────────────────────────────── */
.text-red   { color: var(--red) !important; }
.text-black { color: var(--black) !important; }
.text-gold  { color: var(--gold-dark) !important; }
.text-muted-sm { color: var(--subtle); font-size: .78rem; }
.fw-700 { font-weight: 700; } 
.fw-800 { font-weight: 800; } 
.fw-900 { font-weight: 900; }
.font-num { font-family: var(--font-num); font-weight: 700; }

/* ── CONTRASTE GLOBAL — Accesibilidad y legibilidad ──────── */
.text-muted, small { color: var(--muted) !important; }
.ph-sub { color: var(--muted) !important; font-weight: 500; }
label, .fp-label { color: var(--muted); }
td, th { color: inherit; }
.badge.bg-secondary { background-color: var(--border) !important; color: var(--text) !important; }
::placeholder { color: var(--subtle); opacity: 1; }
.card-title, .mbr-card-header .card-title { color: var(--text); }
.page-header-title .ph-sub { color: var(--muted); }
.il-label { color: var(--muted); font-weight: 500; }
.il-val   { color: var(--text); font-weight: 700; }
.mbr-table tbody tr td { color: var(--text) !important; }
.mbr-table thead th    { color: var(--muted) !important; }