/* ========== Kosmos Apps — дизайн-система ========== */
/* Палитра, типографика, сетка, компоненты, состояния фокуса и доступность */

/* Базовые переменные (дублируют критический CSS, расширяют палитру) */
:root{
  --bg:#0a0f1e; --surface:#0e1730; --card:#111b3a;
  --text:#e6e9ef; --muted:#9aa4b2;
  --primary:#7dd3fc; --primary-600:#22c3f6;
  --accent:#a78bfa;
  --ok:#10b981; --warn:#f59e0b; --danger:#ef4444;
  --radius:16px; --gap:16px; --gap-lg:24px; --maxw:1200px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --focus:0 0 0 3px rgba(125,211,252,.5);
}

/* Типографика */
body{font-size:16px}
h1,h2,h3{line-height:1.2}
.lead{color:var(--muted); max-width:780px}
.muted{color:var(--muted)}
.hidden{position:absolute; left:-9999px}

/* Контейнеры и секции */
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.section{padding:48px 0}
.subpage .nav{height:64px}

/* Сетка и карточки */
.grid{display:grid; gap:20px}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
}

/* Поля формы */
.field{display:flex; flex-direction:column; gap:8px}
.field input,.field textarea,.field select{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid rgba(255,255,255,.12); background:#0c1530; color:var(--text)
}
.field input:focus,.field textarea:focus,.field select:focus{box-shadow:var(--focus); outline:none}

/* Кнопки */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; border-radius:12px; padding:12px 18px; background:var(--primary); color:#0a0f1e; font-weight:600; cursor:pointer; box-shadow:var(--shadow)
}
.btn.secondary{background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.15)}
.btn:focus{box-shadow:var(--focus)}
.btn:disabled{opacity:.6; cursor:not-allowed}

/* Навигация */
.nav{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:28px; width:28px}
.menu{display:flex; gap:20px}
.menu a{padding:8px 10px; border-radius:10px}
.menu a[aria-current="page"]{background:rgba(255,255,255,.06)}

/* Проза (контент статей) */
.prose p, .prose ul, .prose ol{max-width:70ch}
.prose ul{padding-left:18px}

/* Доступность: чёткие фокусы и заметные состояния */
a,button,input,textarea,select{transition:box-shadow .2s ease, background .2s ease, opacity .2s ease}

/* Мобильная адаптация */
@media (max-width:680px){
  .menu{display:none}
}

/* Уважение prefers-reduced-motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
}


/* === Unified Base (moved from index critical CSS) === */
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,Arial,sans-serif;
  background:radial-gradient(1200px 600px at 70% -10%,#152042 0%,transparent 60%), var(--bg);
  color:var(--text);
  line-height:1.6;
}
a{color:var(--primary); text-decoration:none}
a:focus,button:focus,input:focus,textarea:focus{outline:none; box-shadow:var(--focus)}
img{max-width:100%; height:auto}

/* Header / Nav */
header{
  position:sticky; top:0; z-index:10;
  background:rgba(10,15,30,.8); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.menu a[aria-current="page"]{background:rgba(255,255,255,.06)}

/* Sections / hero / footer */
.hero{padding:64px 0 40px}
.hero h1{font-size:clamp(28px,4.5vw,48px); line-height:1.2; margin:0 0 12px}
.hero p{color:var(--muted); margin:0 0 24px; max-width:720px}
.section h2{font-size:clamp(22px,3.2vw,32px); margin:0 0 10px}
.footer{padding:32px 0; border-top:1px solid rgba(255,255,255,.08); color:var(--muted); font-size:14px}

/* Skip link */
.skiplink{position:absolute; left:-9999px}
.skiplink:focus{left:12px; top:12px; background:#000; color:#fff; padding:6px 10px; border-radius:8px}

/* Reveal animation */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0; transform:translateY(10px); transition:opacity .6s, transform .6s}
  .reveal.visible{opacity:1; transform:none}
}