/* ============================================================
   base.css — tokens de diseño, reset y tipografía
   ============================================================ */

:root {
  /* Superficies */
  --bg:            #0e1116;
  --bg-2:          #141920;
  --surface:       #171d26;
  --surface-2:     #1d242f;
  --surface-3:     #232b38;
  --border:        #2a3441;
  --border-soft:   #222b36;

  /* Texto */
  --text:          #e6edf3;
  --text-2:        #a9b6c5;
  --text-3:        #6f7d8d;

  /* Acentos */
  --accent:        #37c9a8;
  --accent-2:      #2aa88c;
  --accent-soft:   rgba(55, 201, 168, .12);
  --amber:         #f0b429;
  --amber-soft:    rgba(240, 180, 41, .12);
  --violet:        #9b8cf5;
  --violet-soft:   rgba(155, 140, 245, .13);
  --rose:          #f2777a;
  --rose-soft:     rgba(242, 119, 122, .12);
  --blue:          #5aa9f7;
  --blue-soft:     rgba(90, 169, 247, .12);

  /* Sintaxis */
  --syn-kw:        #63b3f5;
  --syn-fn:        #cba6ff;
  --syn-str:       #8fd87a;
  --syn-num:       #f0b429;
  --syn-com:       #6a7787;
  --syn-op:        #e07b9a;
  --syn-type:      #37c9a8;

  /* Métrica */
  --radius:        12px;
  --radius-sm:     8px;
  --sidebar-w:     300px;
  --topbar-h:      62px;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Code", "JetBrains Mono", Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .4em; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.02rem; }
p  { margin: 0 0 .9em; }
ul, ol { margin: 0 0 .9em; padding-left: 1.25em; }
li { margin-bottom: .3em; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre, kbd { font-family: var(--mono); font-size: .875em; }

code.inline {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: .1em .38em;
  color: var(--text);
  /* Identificadores largos (rutas, cadenas de conexión) deben poder partirse
     en pantallas estrechas: si no, desbordan la página horizontalmente. */
  overflow-wrap: anywhere;
}

button { font-family: inherit; font-size: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; }

::selection { background: rgba(55, 201, 168, .3); }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: #303b4a; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}