/*
  BakalAO Studios — tokens de marca y componentes base.
  Uso en cualquier proyecto:
    <link rel="stylesheet" href="https://.../bakalao.css">
  o copiar este archivo tal cual. Fuentes: ver @import abajo.
*/
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Fredoka:wght@500;600;700&family=JetBrains+Mono:wght@400;600&display=swap");

:root {
  /* Paleta corporativa */
  --bk-mostaza: #D4A345;      /* principal: fondos y anillos exteriores */
  --bk-teja: #C05A45;         /* acento: tercio inferior, CTAs */
  --bk-crema: #E8D5B0;        /* anillos interiores, fondos iluminados */
  --bk-tinta: #3B2C27;        /* sustituye al negro: trazos y texto */

  /* Extraídas del isologo */
  --bk-granate: #8B1A2B;      /* filete rojo del sello */
  --bk-aviso: #F5E000;        /* amarillo de aviso: alertas y marcadores, con cuentagotas */
  --bk-papel: #F6EBD3;        /* fondo de página, crema muy claro */

  /* Tipografía */
  --bk-font-display: "Fredoka", "Baloo 2", system-ui, sans-serif;
  --bk-font-body: "DM Sans", system-ui, sans-serif;
  --bk-font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  /* Forma: trazo grueso estilo cómic indie */
  --bk-trazo: 3px solid var(--bk-tinta);
  --bk-radio: 14px;
  --bk-sombra: 4px 4px 0 var(--bk-tinta);   /* sombra dura, sin blur */
}

/* Modo oscuro: la tinta pasa a fondo, el papel a texto */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bk-papel: #2A1F1B;
    --bk-tinta: #F1E2C0;
    --bk-sombra: 4px 4px 0 #000;
  }
}
:root[data-theme="dark"] {
  --bk-papel: #2A1F1B;
  --bk-tinta: #F1E2C0;
  --bk-sombra: 4px 4px 0 #000;
}

/* ---------- Base ---------- */
.bk-page {
  margin: 0;
  background: var(--bk-papel);
  color: var(--bk-tinta);
  font-family: var(--bk-font-body);
  line-height: 1.55;
}
.bk-page h1, .bk-page h2, .bk-page h3 {
  font-family: var(--bk-font-display);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.1;
}
.bk-page code, .bk-page pre { font-family: var(--bk-font-mono); }

/* ---------- Botón ---------- */
.bk-btn {
  display: inline-block;
  font: 600 1rem/1 var(--bk-font-display);
  padding: .75em 1.3em;
  color: #fff;
  background: var(--bk-teja);
  border: var(--bk-trazo);
  border-radius: var(--bk-radio);
  box-shadow: var(--bk-sombra);
  text-decoration: none;
  cursor: pointer;
  transition: transform .08s, box-shadow .08s;
}
.bk-btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--bk-tinta); }
.bk-btn:active { transform: translate(4px, 4px); box-shadow: none; }
.bk-btn--alt { background: var(--bk-mostaza); color: #3B2C27; }

/* ---------- Tarjeta ---------- */
.bk-card {
  background: var(--bk-crema);
  color: #3B2C27;
  border: var(--bk-trazo);
  border-radius: var(--bk-radio);
  box-shadow: var(--bk-sombra);
  padding: 1.25rem;
}

/* ---------- Sello "Un proyecto de BakalAO Studios" ---------- */
.bk-sello {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem .9rem .35rem .35rem;
  background: var(--bk-crema);
  color: #3B2C27;
  border: var(--bk-trazo);
  border-radius: 999px;
  font: 600 .9rem/1.1 var(--bk-font-display);
  text-decoration: none;
}
.bk-sello img { width: 2.2rem; height: 2.2rem; display: block; }
.bk-sello small { display: block; font: 400 .72rem/1.2 var(--bk-font-body); opacity: .8; }