/* base.css — self-hosted fonts, reset, typography, layout primitives, tap targets, buttons, focus/skip-link
   Mobile-first: base rules are mobile; use only min-width media queries (720px tablet, 1024px desktop). */

/* 1. @font-face — self-hosted, no external runtime requests */
@font-face{
  font-family:'Poppins'; font-weight:600; font-style:normal; font-display:swap;
  src:url('../fonts/poppins-600.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-weight:700; font-style:normal; font-display:swap;
  src:url('../fonts/poppins-700.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-weight:800; font-style:normal; font-display:swap;
  src:url('../fonts/poppins-800.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-weight:400; font-style:normal; font-display:swap;
  src:url('../fonts/inter-400.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-weight:500; font-style:normal; font-display:swap;
  src:url('../fonts/inter-500.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-weight:700; font-style:normal; font-display:swap;
  src:url('../fonts/inter-700.woff2') format('woff2');
}

/* 2. minimal reset */
*, *::before, *::after{ box-sizing:border-box; }
body{
  margin:0;
  font-family:var(--font-text);
  color:var(--color-ink);
  background:var(--color-bg);
  line-height:1.5;
  font-size:var(--text-md);
}
img, picture, video, canvas, svg{ display:block; max-width:100%; }

/* 3. typography */
h1, h2, h3{ font-family:var(--font-display); margin:0 0 var(--space-2); }
h1{ font-size:var(--text-2xl); font-weight:800; }
h2{ font-size:var(--text-xl); font-weight:700; }
h3{ font-size:var(--text-lg); font-weight:600; }
p{ margin:0 0 var(--space-2); }

@media (min-width:720px){
  h1{ font-size:var(--text-3xl); }
}

/* 4. layout primitives */
.container{
  width:min(1180px, 100% - 2 * var(--space-2));
  margin-inline:auto;
}
.stack-1 > * + *{ margin-top:var(--space-1); }
.stack-2 > * + *{ margin-top:var(--space-2); }
.stack-3 > * + *{ margin-top:var(--space-3); }
.stack-4 > * + *{ margin-top:var(--space-4); }
.hidden{ display:none !important; }

/* 5. tap-target rule (min 44px, min 16px font) */
button, .btn, a.btn, input, select, textarea{
  min-height:44px;
  font-size:max(16px, 1em);
}

/* 6. .btn variants — tokens only */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-1);
  padding:0 var(--space-3);
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  font-family:var(--font-text);
  font-weight:700;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
}
.btn-primary{
  background:var(--color-primary);
  color:var(--color-primary-ink);
  border-color:var(--color-primary);
}
.btn-ghost{
  background:transparent;
  color:var(--color-primary);
  border-color:var(--color-line);
}
.btn-accent{
  background:var(--color-accent);
  color:var(--color-ink);
  border-color:var(--color-accent);
}

/* 7. skip-link + focus-visible */
.skip-link{
  position:absolute;
  left:var(--space-2);
  top:-100px;
  background:var(--color-surface);
  color:var(--color-ink);
  padding:var(--space-1) var(--space-2);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-card);
  z-index:1000;
  transition:top .15s ease;
}
.skip-link:focus{
  top:var(--space-2);
}
:focus-visible{
  outline:2px solid var(--color-primary);
  outline-offset:2px;
}