/* =========================================================
   SOULTHINKER — Colors & Type Foundation
   Brutalist Digital Corporativo
   ========================================================= */

/* Fonts (Google Fonts fallbacks — flagged for user to replace
   with licensed files if a custom brand stack exists).
   - Archivo Black → brutalist, condensed impact display
   - Barlow Condensed → condensed subtitles / eyebrows
   - Inter → clean functional body copy
   - JetBrains Mono → technical / code / captions
*/
/* @import de Google eliminado: las fuentes se cargan desde fonts.css (offline) */

:root {
  /* ---------- CORE PALETTE ---------- */
  --st-black:        #0A0A0B;  /* deepest black — primary bg */
  --st-charcoal:     #141416;  /* card body, panels */
  --st-graphite:     #1F1F22;  /* raised surface */
  --st-concrete:     #2B2B2F;  /* secondary surface, dividers */
  --st-steel:        #4A4A4F;  /* muted metal */
  --st-silver:       #8A8D93;  /* tertiary text, meta */
  --st-aluminum:     #B8BCC2;  /* secondary text, gear/metal detail */
  --st-bone:         #E8E9EB;  /* primary text on dark */
  --st-white:        #FFFFFF;  /* max-contrast text & marks */

  /* ACCENT — crimson, only */
  --st-crimson:      #D92332;  /* primary accent, directive */
  --st-crimson-deep: #A8121F;  /* pressed, shadow */
  --st-crimson-glow: #FF3545;  /* hover / emphasis highlight */
  --st-ember:        #6B0F18;  /* depth / recessed red */

  /* ---------- SEMANTIC — FOREGROUND ---------- */
  --fg-1: var(--st-white);      /* primary text */
  --fg-2: var(--st-bone);       /* body text */
  --fg-3: var(--st-aluminum);   /* secondary text */
  --fg-4: var(--st-silver);     /* tertiary text */
  --fg-5: var(--st-steel);      /* disabled */
  --fg-accent: var(--st-crimson);
  --fg-on-accent: #FFFFFF;      /* text ON crimson — same in both themes */

  /* ---------- SEMANTIC — BACKGROUND ---------- */
  --bg-0: var(--st-black);       /* app root */
  --bg-1: var(--st-charcoal);    /* card */
  --bg-2: var(--st-graphite);    /* raised card */
  --bg-3: var(--st-concrete);    /* hover / secondary */
  --bg-accent: var(--st-crimson);
  --bg-accent-quiet: rgba(217, 35, 50, 0.08);

  /* ---------- SEMANTIC — BORDERS ---------- */
  --border-1: rgba(255, 255, 255, 0.08);
  --border-2: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.28);
  --border-accent: var(--st-crimson);
  --border-accent-quiet: rgba(217, 35, 50, 0.35);

  /* ---------- STATUS (sparingly used) ---------- */
  --status-ok:    #2FB56B;
  --status-warn:  #E8A33D;
  --status-err:   var(--st-crimson);
  --status-info:  #5B8DEF;

  /* ---------- TYPE — FAMILIES ---------- */
  --font-display:  'Archivo Black', 'Arial Black', 'Helvetica Neue', sans-serif;
  --font-condensed:'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif;
  --font-sans:     'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:     'JetBrains Mono', 'Menlo', 'Consolas', monospace;

  /* ---------- TYPE — SCALE ---------- */
  --fs-hero:    80px;
  --fs-display: 64px;
  --fs-h1:      48px;
  --fs-h2:      36px;
  --fs-h3:      28px;
  --fs-h4:      22px;
  --fs-h5:      18px;
  --fs-lg:      18px;
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-xs:      12px;
  --fs-eyebrow: 13px;

  /* weights */
  --fw-black: 900; /* @kind font */
  --fw-bold:  700; /* @kind font */
  --fw-semi:  600; /* @kind font */
  --fw-med:   500; /* @kind font */
  --fw-reg:   400; /* @kind font */
  --fw-light: 300; /* @kind font */

  /* line heights */
  --lh-tight:  1.04; /* @kind font */
  --lh-title:  1.12; /* @kind font */
  --lh-body:   1.55; /* @kind font */
  --lh-loose:  1.75; /* @kind font */

  /* letter spacing */
  --ls-tight:  -0.02em; /* @kind font */
  --ls-normal: 0; /* @kind font */
  --ls-wide:   0.06em; /* @kind font */
  --ls-xwide:  0.14em; /* @kind font */

  /* ---------- SPACING ---------- */
  --sp-0:  0; /* @kind spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  56px;
  --sp-10: 72px;
  --sp-11: 96px;
  --sp-12: 128px;

  /* ---------- RADII (brutalist = small; sharp by default) ---------- */
  --r-0: 0px;        /* brutalist default — everything square */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 10px;       /* cards / panels when softening is needed */
  --r-pill: 999px;

  /* ---------- SHADOWS (minimal; brutalist prefers borders) ---------- */
  --shadow-inset:     inset 0 0 0 1px var(--border-1);
  --shadow-inset-hi:  inset 0 0 0 1px var(--border-2);
  --shadow-crimson:   0 0 0 2px var(--st-crimson);
  --shadow-glow:      0 0 24px rgba(217, 35, 50, 0.35);
  --shadow-lift:      0 14px 40px -10px rgba(0,0,0,0.8), 0 0 0 1px var(--border-1);
  --shadow-press:     inset 0 2px 0 rgba(0,0,0,0.4);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --ease-in:  cubic-bezier(0.5, 0, 0.9, 0.3); /* @kind other */
  --ease-std: cubic-bezier(0.3, 0, 0.2, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-std:  200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */

  /* ---------- LAYOUT ---------- */
  --container-max: 1280px; /* @kind spacing */
  --grid-gutter:   24px; /* @kind spacing */
  --bezel:         1px; /* @kind spacing */ /* the tell-tale brutalist hairline */

  /* ---------- THEME SURFACES (flip with data-theme) ---------- */
  --bg-glass:   rgba(10, 10, 11, 0.88);   /* sticky topbars (blur backdrop) */
  --bg-glass-2: rgba(20, 20, 22, 0.92);   /* floating bars (presentacion) */
  --bg-veil:    rgba(10, 10, 11, 0.72);   /* semi-opaque page-tone backdrop */
  --grid-line:  rgba(255, 255, 255, 0.05);/* blueprint grid on anim stages */
  --overlay:    rgba(4, 4, 5, 0.74);      /* modal / panel dimmer */
  --status-err-text: #FF6B76;             /* error text readable on cards */

  color-scheme: dark;
}

/* =========================================================
   LIGHT THEME — data-theme="light" on <html>
   (el arranque de tema en <head> fija siempre el atributo:
   localStorage 'st-theme' o, sin preferencia, prefers-color-scheme)
   ========================================================= */
:root[data-theme="light"] {
  /* core palette inverted: same roles, light surfaces, dark inks */
  --st-black:    #F4F4F5;
  --st-charcoal: #FFFFFF;
  --st-graphite: #ECECEE;
  --st-concrete: #DFE0E3;
  --st-steel:    #9A9CA3;
  --st-silver:   #63666D;
  --st-aluminum: #3F4147;
  --st-bone:     #1E1F23;
  --st-white:    #0A0A0B;

  /* crimson unchanged; deep/glow readable on white */
  --st-crimson-glow: #E8172A;

  --bg-accent-quiet: rgba(217, 35, 50, 0.07);

  --border-1: rgba(10, 10, 11, 0.10);
  --border-2: rgba(10, 10, 11, 0.17);
  --border-strong: rgba(10, 10, 11, 0.34);
  --border-accent-quiet: rgba(217, 35, 50, 0.35);

  --shadow-inset:     inset 0 0 0 1px var(--border-1);
  --shadow-inset-hi:  inset 0 0 0 1px var(--border-2);
  --shadow-glow:      0 0 20px rgba(217, 35, 50, 0.22);
  --shadow-lift:      0 14px 40px -10px rgba(10, 10, 11, 0.28), 0 0 0 1px var(--border-1);
  --shadow-press:     inset 0 2px 0 rgba(10, 10, 11, 0.10);

  --bg-glass:   rgba(247, 247, 248, 0.88);
  --bg-glass-2: rgba(255, 255, 255, 0.94);
  --bg-veil:    rgba(244, 244, 245, 0.78);
  --grid-line:  rgba(10, 10, 11, 0.05);
  --overlay:    rgba(24, 24, 27, 0.45);
  --status-err-text: #B3121F;

  color-scheme: light;
}

/* Infografías SVG con colores de la paleta oscura en atributos
   (fill/stroke inline): en claro se re-mapean por selector de atributo. */
:root[data-theme="light"] [stroke="#E8E9EB"] { stroke: #1E1F23; }
:root[data-theme="light"] [fill="#E8E9EB"]   { fill: #1E1F23; }
:root[data-theme="light"] [stroke="#B8BCC2"] { stroke: #3F4147; }
:root[data-theme="light"] [fill="#B8BCC2"]   { fill: #3F4147; }
:root[data-theme="light"] [stroke="#8A8D93"] { stroke: #63666D; }
:root[data-theme="light"] [fill="#8A8D93"]   { fill: #63666D; }
:root[data-theme="light"] [stroke="#4A4A4F"] { stroke: #9A9CA3; }
:root[data-theme="light"] [fill="#4A4A4F"]   { fill: #9A9CA3; }
:root[data-theme="light"] [stroke="#2B2B2F"] { stroke: #DFE0E3; }
:root[data-theme="light"] [fill="#0A0A0B"]   { fill: #F4F4F5; }

/* =========================================================
   BASE
   ========================================================= */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =========================================================
   TYPE — semantic elements
   ========================================================= */
.st-hero,
h1.display {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  font-weight: var(--fw-black);
  color: var(--fg-1);
}

h1, .st-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  font-weight: var(--fw-black);
  color: var(--fg-1);
  margin: 0 0 var(--sp-5);
}

h2, .st-h2 {
  font-family: var(--font-condensed);
  font-size: var(--fs-h2);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
}

h3, .st-h3 {
  font-family: var(--font-condensed);
  font-size: var(--fs-h3);
  line-height: var(--lh-title);
  text-transform: uppercase;
  font-weight: var(--fw-semi);
  color: var(--fg-1);
  margin: 0 0 var(--sp-3);
}

h4, .st-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  line-height: var(--lh-title);
  font-weight: var(--fw-semi);
  color: var(--fg-1);
  margin: 0 0 var(--sp-3);
}

h5, .st-h5 {
  font-family: var(--font-sans);
  font-size: var(--fs-h5);
  line-height: var(--lh-title);
  font-weight: var(--fw-semi);
  color: var(--fg-1);
  margin: 0 0 var(--sp-2);
}

.st-eyebrow {
  font-family: var(--font-condensed);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  color: var(--fg-accent);
}

p, .st-p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0 0 var(--sp-4);
}

.st-lead {
  font-size: var(--fs-lg);
  color: var(--fg-2);
  line-height: var(--lh-body);
}

.st-meta, small {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-4);
}

code, pre, .st-code {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--fg-2);
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  padding: 2px 6px;
  border-radius: var(--r-1);
}

.st-accent { color: var(--fg-accent); }

/* Bullet style — square red tick */
.st-list { list-style: none; padding: 0; margin: 0; }
.st-list li {
  position: relative;
  padding-left: var(--sp-6);
  margin-bottom: var(--sp-3);
  color: var(--fg-2);
  line-height: var(--lh-body);
}
.st-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  background: var(--st-crimson);
}

/* =========================================================
   THEME SWITCH — slide claro/oscuro (uno por topbar)
   Markup: <button class="theme-switch" data-theme-toggle>
             <span.ts-track><span.ts-thumb>[svg.ts-sun][svg.ts-moon]
   El cuadrado (thumb) sobresale de la pista y lleva dentro el
   icono del tema activo: luna en oscuro, sol en claro.
   ========================================================= */
.theme-switch {
  display: inline-flex;
  align-items: center;
  flex: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px 5px; /* aire vertical: que el thumb no roce el borde del header */
}
.theme-switch .ts-track {
  position: relative;
  width: 40px;
  height: 12px;
  flex: none;
  border: 1px solid var(--border-strong);
  background: var(--bg-2);
}
.theme-switch:hover .ts-track { border-color: var(--st-crimson); }
.theme-switch .ts-thumb {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(100% - 19px); /* oscuro: a la derecha, sobresaliendo */
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--st-crimson);
  box-shadow: 0 0 0 1px var(--st-crimson-deep);
  transition: left var(--dur-std) var(--ease-out);
}
:root[data-theme="light"] .theme-switch .ts-thumb { left: -3px; }
.theme-switch:hover .ts-thumb { background: var(--st-crimson-glow); }
.theme-switch .ts-ico { display: block; width: 12px; height: 12px; color: var(--fg-on-accent); }
.theme-switch .ts-sun  { display: none; }
:root[data-theme="light"] .theme-switch .ts-sun  { display: block; }
:root[data-theme="light"] .theme-switch .ts-moon { display: none; }