/* styles.css — minimal, accessible, no external fonts. */

:root{
  --bg: #ffffff;
  --fg: #0b1520;
  --muted: #5b6570;
  --border: #e5e7eb;
  --brand: #187a2f; /* green base */
  --brand-weak: #e6f4ea;
  --accent-1: #1f6feb; /* blue */
  --accent-2: #7c3aed; /* purple */
  --accent-3: #d97706; /* orange */
  --accent-4: #b91c1c; /* red */
  --card: #ffffff;
  --shadow: 0 8px 24px rgba(0,0,0,.06);
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b0f14;
    --fg: #eaedf0;
    --muted: #9aa3ad;
    --border: #233041;
    --brand: #7cd992;
    --brand-weak: #0e2a17;
    --accent-1: #86b6ff;
    --accent-2: #c2a6ff;
    --accent-3: #ffb155;
    --accent-4: #ff7d7d;
    --card: #0e141b;
    color-scheme: dark;
  }
}
html[data-theme="light"]{
  --bg: #ffffff;
  --fg: #0b1520;
  --muted: #5b6570;
  --border: #e5e7eb;
  --brand: #187a2f;
  --brand-weak: #e6f4ea;
  --accent-1: #1f6feb;
  --accent-2: #7c3aed;
  --accent-3: #d97706;
  --accent-4: #b91c1c;
  --card: #ffffff;
  color-scheme: light;
}
html[data-theme="dark"]{
  --bg: #0b0f14;
  --fg: #eaedf0;
  --muted: #9aa3ad;
  --border: #233041;
  --brand: #7cd992;
  --brand-weak: #0e2a17;
  --accent-1: #86b6ff;
  --accent-2: #c2a6ff;
  --accent-3: #ffb155;
  --accent-4: #ff7d7d;
  --card: #0e141b;
  color-scheme: dark;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,system-ui,"Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--fg);
  line-height:1.6;
}

.container{
  max-width: 980px;
  margin: 0 auto;
  padding: 24px;
}

header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding: 12px 0 8px;
  border-bottom: 1px solid var(--border);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:inherit;
}

.logo{
  width: 40px; height: 40px;
}

.site-title{
  font-weight: 700;
  letter-spacing: .2px;
  font-size: 1.1rem;
}

.toolbar{
  display:flex;
  gap:8px;
  align-items:center;
}

button, .btn{
  appearance:none; border:1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  padding: 8px 12px; border-radius: 999px;
  font-size:.95rem; line-height:1;
  cursor:pointer;
  box-shadow: var(--shadow);
  text-decoration:none;
}
button:hover, .btn:hover{ border-color: var(--brand); }

.badge{
  display:inline-block; padding:4px 10px; border-radius:999px; font-size:.85rem;
  background: var(--brand-weak); color: var(--brand); border: 1px solid var(--border);
}

.hero{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 28px;
  padding:32px 0;
}
@media (max-width: 860px){
  .hero{ grid-template-columns: 1fr; }
}

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow);
}

h1{ font-size: clamp(1.6rem, 2.2vw + 1rem, 2.4rem); margin: 0 0 12px; }
h2{ font-size: clamp(1.2rem, 1.2vw + 1rem, 1.6rem); margin: 24px 0 8px; }
h3{ font-size: 1.05rem; margin: 18px 0 6px; }

.lead{ font-size: 1.05rem; color: var(--muted); }

.grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 860px){
  .grid{ grid-template-columns: 1fr; }
}

.kv{ display:flex; align-items:center; gap:8px; }
.kv svg{ flex: 0 0 18px; opacity:.9; }

.list{ margin:0; padding-left: 18px; }

footer{
  margin-top:40px; padding:16px 0; border-top:1px solid var(--border);
  color: var(--muted); font-size:.92rem;
}

.cta{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:10px; }

a{ color: var(--accent-1); }
a:focus-visible, button:focus-visible{
  outline: 3px solid var(--accent-2);
  outline-offset: 2px;
}
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; border:0; padding:0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow:hidden; white-space:nowrap;
}

.lang-hidden{ display:none; }