/* Tokens y barra superior compartidos por los cinco demos.
   Mismos valores que assets/css/style.css, con prefijo --d- para no chocar
   con los estilos propios de cada demo. */

/* Fuentes autoalojadas (licencia SIL OFL, ver assets/fonts) */
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("../assets/fonts/source-serif-4-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../assets/fonts/inter-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --d-bg: #f7f5f0;
  --d-surface: #ffffff;
  --d-surface2: #efece4;
  --d-text: #14212b;
  --d-muted: #566573;
  --d-line: #ddd8ce;
  --d-accent: #0a6173;
  --d-accent-ink: #ffffff;
  --d-gold: #8a5a0b;
  --d-ok: #2e7d4f;
  --d-err: #b3402f;
  --d-warn: #8f5400;
  --d-blue: #2b6aa8;
  --d-note-bg: #fff4d6;
  --d-note-ink: #6b4a00;
  --d-font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --d-font-body: Inter, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --d-bg: #0e1419; --d-surface: #151d25; --d-surface2: #1b252f;
    --d-text: #e8edf2; --d-muted: #9aa7b4; --d-line: #25303a;
    --d-accent: #5bbccd; --d-accent-ink: #0e1419; --d-gold: #d9a441;
    --d-ok: #5cc08a; --d-err: #e5806f; --d-warn: #e0a64a; --d-blue: #7fb0e6;
    --d-note-bg: #2b2410; --d-note-ink: #e7c46a;
  }
}
:root[data-theme="dark"] {
  --d-bg: #0e1419; --d-surface: #151d25; --d-surface2: #1b252f;
  --d-text: #e8edf2; --d-muted: #9aa7b4; --d-line: #25303a;
  --d-accent: #5bbccd; --d-accent-ink: #0e1419; --d-gold: #d9a441;
  --d-ok: #5cc08a; --d-err: #e5806f; --d-warn: #e0a64a; --d-blue: #7fb0e6;
  --d-note-bg: #2b2410; --d-note-ink: #e7c46a;
}

.db {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--d-bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--d-line);
  font-family: var(--d-font-body);
}
.db-in {
  max-width: 1120px; margin: 0 auto; padding: 0 24px; height: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.db-back { color: var(--d-accent); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.db-back:hover { text-decoration: underline; }
.db-tag { color: var(--d-muted); font-size: 13px; text-align: center; }
.db-theme {
  font: inherit; font-size: 13px; color: var(--d-muted); background: transparent;
  border: 1px solid var(--d-line); border-radius: 4px; min-height: 36px; padding: 0 14px; cursor: pointer; white-space: nowrap;
}
.db-theme:hover { color: var(--d-text); border-color: var(--d-muted); }
.db a:focus-visible, .db button:focus-visible { outline: 3px solid var(--d-accent); outline-offset: 3px; }
@media (max-width: 600px) {
  .db-in { padding: 0 16px; }
  .db-tag { display: none; }
  .db-theme { min-height: 44px; }
}