@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --paper:      #f6f1e7;
  --paper-raise:#efe7d8;
  --ink:        #2a2319;
  --ink-soft:   #6e6152;
  --line:       #ddd0b8;
  --rust:       #b3501c;
  --rust-soft:  #e7d4c2;
  --pine:       #3d6c58;
  --pine-soft:  #d9e5dd;
  --focus:      #b3501c;
  --good:       #3d6c58;
  --good-soft:  #d9e5dd;
  --bad:        #a63d3d;
  --bad-soft:   #f0d9d4;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:      #1d1812;
    --paper-raise:#241d15;
    --ink:        #eee3d1;
    --ink-soft:   #b3a48d;
    --line:       #40372a;
    --rust:       #e08a4f;
    --rust-soft:  #3a2a1c;
    --pine:       #7bb99b;
    --pine-soft:  #1e2c25;
    --focus:      #e08a4f;
    --good:       #7bb99b;
    --good-soft:  #1e2c25;
    --bad:        #e0847a;
    --bad-soft:   #3a1f1c;
  }
}
:root[data-theme="dark"]{
  --paper:      #1d1812;
  --paper-raise:#241d15;
  --ink:        #eee3d1;
  --ink-soft:   #b3a48d;
  --line:       #40372a;
  --rust:       #e08a4f;
  --rust-soft:  #3a2a1c;
  --pine:       #7bb99b;
  --pine-soft:  #1e2c25;
  --focus:      #e08a4f;
  --good:       #7bb99b;
  --good-soft:  #1e2c25;
  --bad:        #e0847a;
  --bad-soft:   #3a1f1c;
}

*{ box-sizing:border-box; }
html{ color-scheme:light; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', system-ui, sans-serif;
  line-height:1.55;
}
h1,h2,h3{
  font-family:'Fraunces', Georgia, serif;
  text-wrap:balance;
  margin:0;
}
.mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; }
img{ max-width:100%; }

a{ color:var(--rust); }
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
}

.wrap{ max-width:640px; margin:0 auto; padding:0 20px 64px; }

/* site header */
.site-header{
  border-bottom:1px solid var(--line);
  padding:16px 20px;
}
.site-header-inner{
  max-width:640px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}
.site-brand{
  font-family:'IBM Plex Mono', monospace;
  font-size:.86rem;
  font-weight:500;
  color:var(--ink);
  text-decoration:none;
  display:flex; align-items:center; gap:8px;
}
.site-brand .mark{ color:var(--rust); }
.site-header nav a{
  font-family:'IBM Plex Mono', monospace;
  font-size:.78rem;
  color:var(--ink-soft);
  text-decoration:none;
}
.site-header nav a:hover{ color:var(--rust); }

/* level badge — mismos 3 niveles en la landing y en cada módulo */
.level-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'IBM Plex Mono', monospace;
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:5px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--ink-soft);
}
.level-badge::before{ content:"●"; font-size:.6rem; }
.level-badge.l1{ border-color:var(--ink-soft); color:var(--ink-soft); }
.level-badge.l2{ border-color:var(--pine); color:var(--pine); }
.level-badge.l3{ border-color:var(--rust); color:var(--rust); }

/* footer */
.site-footer{
  margin-top:48px;
  padding-top:24px;
  border-top:1px dashed var(--line);
  font-size:.76rem;
  color:var(--ink-soft);
  text-align:center;
}
.site-footer a{ color:var(--ink-soft); }

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
}