/* Shared design tokens and components — Portal Educativo (games.alfabot.cl) */

:root{
  --ink:#1B2333;
  --ink-soft:#4A5268;
  --paper:#EDEAE2;
  --paper-alt:#E2DDCE;
  --card:#FAF8F3;
  --brass:#9C6A1E;
  --brass-bright:#B8842E;
  --teal:#1F7A6E;
  --coral:#B23F32;
  --line:rgba(27,35,51,0.16);
  --shadow:rgba(27,35,51,0.18);
  --font-display: ui-monospace, "SFMono-Regular", "Consolas", "Courier New", monospace;
  --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#EDE6D6;
    --ink-soft:#B9B0A0;
    --paper:#10151F;
    --paper-alt:#161D2B;
    --card:#1C2434;
    --brass:#D9A441;
    --brass-bright:#E8B85C;
    --teal:#52C3B4;
    --coral:#E2685C;
    --line:rgba(237,230,214,0.14);
    --shadow:rgba(0,0,0,0.45);
  }
}
:root[data-theme="dark"]{
  --ink:#EDE6D6; --ink-soft:#B9B0A0; --paper:#10151F; --paper-alt:#161D2B;
  --card:#1C2434; --brass:#D9A441; --brass-bright:#E8B85C; --teal:#52C3B4;
  --coral:#E2685C; --line:rgba(237,230,214,0.14); --shadow:rgba(0,0,0,0.45);
}
:root[data-theme="light"]{
  --ink:#1B2333; --ink-soft:#4A5268; --paper:#EDEAE2; --paper-alt:#E2DDCE;
  --card:#FAF8F3; --brass:#9C6A1E; --brass-bright:#B8842E; --teal:#1F7A6E;
  --coral:#B23F32; --line:rgba(27,35,51,0.16); --shadow:rgba(27,35,51,0.18);
}

*{box-sizing:border-box;}
body{margin:0;}

/* ---------- Language switch (ES/EN) ---------- */
.lang-switch{
  display:flex;
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
}
.lang-switch button{
  font-family:var(--font-display);
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  padding:6px 12px;
  border:none;
  background:var(--card);
  color:var(--ink-soft);
  cursor:pointer;
}
.lang-switch button + button{ border-left:1px solid var(--line); }
.lang-switch button.active{ background:var(--brass); color:#1B1200; }

/* ---------- Breadcrumb back-link ---------- */
.breadcrumb a{
  font-family:var(--font-display);
  font-size:12px;
  letter-spacing:.06em;
  text-decoration:none;
  color:var(--ink-soft);
  border:1px solid var(--line);
  border-radius:2px;
  padding:6px 10px;
}
.breadcrumb a:hover{border-color:var(--brass); color:var(--ink);}

/* ---------- Page footer ---------- */
footer{
  margin-top:48px;
  color:var(--ink-soft);
  font-size:12.5px;
  text-align:center;
}