/* =========================================================
   RutaDev · base.css
   Tokens de color y tipografía, modo claro/oscuro y base.
   Layout: barra superior + árbol de la biblioteca a la izquierda
           + panel de lectura a la derecha (cajón en celular).
   Los colores se derivan de un tono (--h) que cambia el tema,
   y de un tono por biblioteca (--lh) en elementos .lh
   ========================================================= */
:root {
  --h: 235;            /* tono del tema global (ver temas.css) */
  --lh: var(--h);      /* tono de la biblioteca activa */

  --bg: oklch(96.6% 0.016 var(--h));
  --panel: oklch(99.5% 0.004 var(--h));
  --panel-2: oklch(95.2% 0.022 var(--h));
  --line: oklch(88.5% 0.024 var(--h));
  --fg: oklch(25% 0.035 var(--h));
  --muted: oklch(48% 0.032 var(--h));
  --accent: oklch(52% 0.19 var(--h));
  --accent-soft: oklch(92.5% 0.05 var(--h));
  --ink: oklch(99% 0.005 var(--h));        /* texto sobre color fuerte */
  --ok: oklch(54% 0.14 155);
  --ok-soft: oklch(93% 0.06 155);
  --danger: oklch(53% 0.2 25);
  --danger-soft: oklch(94.5% 0.04 25);
  --code-bg: oklch(23% 0.04 var(--h));
  --code-fg: oklch(93% 0.012 var(--h));
  --code-line: oklch(32% 0.04 var(--h));
  --scrim: oklch(22% 0.04 var(--h) / 0.45);
  --shadow: 0 1px 2px oklch(30% 0.06 var(--h) / 0.07), 0 12px 32px -14px oklch(30% 0.08 var(--h) / 0.25);

  /* componentes de color por biblioteca (luminosidad y croma) */
  --lib-L: 53%;  --lib-C: 0.18;
  --libs-L: 94%; --libs-C: 0.045;
  --libt-L: 38%;

  /* resaltado de sintaxis (siempre sobre fondo oscuro) */
  --sx-key: oklch(78% 0.13 300);
  --sx-str: oklch(82% 0.12 145);
  --sx-num: oklch(82% 0.12 60);
  --sx-com: oklch(66% 0.03 var(--h));
  --sx-fn: oklch(80% 0.11 230);
  --sx-type: oklch(83% 0.1 190);
  --sx-attr: oklch(80% 0.11 20);

  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  --r: 14px;
  --r-sm: 9px;
  color-scheme: light;
}

/* tokens del modo oscuro: los mismos valores en los tres selectores */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-modo="claro"]) {
    --bg: oklch(17% 0.022 var(--h));
    --panel: oklch(21.5% 0.026 var(--h));
    --panel-2: oklch(25.5% 0.03 var(--h));
    --line: oklch(33% 0.035 var(--h));
    --fg: oklch(93% 0.012 var(--h));
    --muted: oklch(72% 0.025 var(--h));
    --accent: oklch(75% 0.14 var(--h));
    --accent-soft: oklch(31% 0.07 var(--h));
    --ink: oklch(17% 0.03 var(--h));
    --ok: oklch(77% 0.14 155);
    --ok-soft: oklch(30% 0.06 155);
    --danger: oklch(73% 0.16 25);
    --danger-soft: oklch(30% 0.07 25);
    --code-bg: oklch(14.5% 0.02 var(--h));
    --code-line: oklch(26% 0.03 var(--h));
    --scrim: oklch(8% 0.01 var(--h) / 0.6);
    --shadow: 0 1px 2px oklch(0% 0 0 / 0.3), 0 14px 34px -14px oklch(0% 0 0 / 0.6);
    --lib-L: 76%;  --lib-C: 0.14;
    --libs-L: 29%; --libs-C: 0.065;
    --libt-L: 86%;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]:not([data-modo="claro"]),
:root[data-modo="oscuro"] {
  --bg: oklch(17% 0.022 var(--h));
  --panel: oklch(21.5% 0.026 var(--h));
  --panel-2: oklch(25.5% 0.03 var(--h));
  --line: oklch(33% 0.035 var(--h));
  --fg: oklch(93% 0.012 var(--h));
  --muted: oklch(72% 0.025 var(--h));
  --accent: oklch(75% 0.14 var(--h));
  --accent-soft: oklch(31% 0.07 var(--h));
  --ink: oklch(17% 0.03 var(--h));
  --ok: oklch(77% 0.14 155);
  --ok-soft: oklch(30% 0.06 155);
  --danger: oklch(73% 0.16 25);
  --danger-soft: oklch(30% 0.07 25);
  --code-bg: oklch(14.5% 0.02 var(--h));
  --code-line: oklch(26% 0.03 var(--h));
  --scrim: oklch(8% 0.01 var(--h) / 0.6);
  --shadow: 0 1px 2px oklch(0% 0 0 / 0.3), 0 14px 34px -14px oklch(0% 0 0 / 0.6);
  --lib-L: 76%;  --lib-C: 0.14;
  --libs-L: 29%; --libs-C: 0.065;
  --libt-L: 86%;
  color-scheme: dark;
}

/* colores de biblioteca: se calculan en cada elemento .lh con su propio --lh */
:root, .lh {
  --lib: oklch(var(--lib-L) var(--lib-C) var(--lh));
  --lib-soft: oklch(var(--libs-L) var(--libs-C) var(--lh));
  --lib-text: oklch(var(--libt-L) 0.13 var(--lh));
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { height: 100%; box-sizing: border-box; -webkit-text-size-adjust: 100%; }
body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 15px/1.55 var(--font-body);
  overflow: hidden;
}
body.con-modal { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.01em;
}
p { margin: 0; }
a { color: var(--lib-text); text-underline-offset: 3px; }
code, pre, kbd { font-family: var(--font-mono); }
:not(pre) > code {
  font-size: 0.88em;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.05em 0.35em;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--accent-soft); }

.ic {
  width: 1.15em; height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}