/* Sasha product hub — shared chrome and tokens.
   The token values are the design system's own semantic layer, copied from
   product/design-system/component-lab/v1.html. Only --ui-* semantic tokens are
   referenced by components below; primitives exist so the semantic tier can
   resolve, exactly as the token document specifies. */
/* ─────────────────────────────────────────────────────────────────────────
   Tokens — copied from the design system's own semantic layer
   (product/design-system/component-lab/v1.html). This hub is built out of
   the system it catalogues, so a token change there is visible here too.
   Only the --ui-* semantic tier is referenced below, never a raw ramp step.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --neutral-50:oklch(98.5% 0 0); --neutral-100:oklch(96.7% 0.001 286.375); --neutral-200:oklch(92% 0.004 286.32);
  --neutral-300:oklch(87.1% 0.006 286.286); --neutral-400:oklch(70.5% 0.015 286.067); --neutral-500:oklch(55.2% 0.016 285.938);
  --neutral-600:oklch(44.2% 0.017 285.786); --neutral-700:oklch(37% 0.013 285.805); --neutral-800:oklch(27.4% 0.006 286.033);
  --neutral-900:oklch(21% 0.006 285.885);
  --primary-50:oklch(96.9% 0.016 293.756); --primary-200:oklch(89.4% 0.057 293.283); --primary-300:oklch(81.1% 0.111 293.571);
  --primary-400:oklch(70.2% 0.183 293.541); --primary-500:oklch(60.6% 0.25 292.717); --primary-600:oklch(54.1% 0.281 293.009);
  --primary-700:oklch(49.1% 0.27 292.581); --primary-900:oklch(38% 0.189 293.745);
  --success-50:oklch(98.2% 0.018 155.826); --success-300:oklch(87.1% 0.15 154.449); --success-500:oklch(72.3% 0.219 149.579);
  --success-700:oklch(52.7% 0.154 150.069); --success-900:oklch(39.3% 0.095 152.535);
  --warning-50:oklch(98.7% 0.022 95.277); --warning-300:oklch(87.9% 0.169 91.605); --warning-500:oklch(76.9% 0.188 70.08);
  --warning-700:oklch(55.5% 0.163 48.998); --warning-900:oklch(41.4% 0.112 45.904);

  --ui-bg:white; --ui-bg-elevated:var(--neutral-100); --ui-bg-muted:var(--neutral-50); --ui-bg-accented:var(--neutral-200);
  --ui-text:var(--neutral-700); --ui-text-highlighted:var(--neutral-900); --ui-text-toned:var(--neutral-600); --ui-text-muted:var(--neutral-500);
  --ui-text-inverted:white;
  --ui-border:var(--neutral-200); --ui-border-accented:var(--neutral-300);
  --ui-primary:var(--primary-500);
  --primary-soft-bg:var(--primary-50); --primary-soft-text:var(--primary-700); --primary-soft-border:var(--primary-200);
  --success-soft-bg:var(--success-50); --success-soft-text:var(--success-700);
  --warning-soft-bg:var(--warning-50); --warning-soft-text:var(--warning-700);

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  --radius-sm:4px; --radius-md:6px; --radius-lg:8px; --radius-xl:12px; --radius-2xl:16px; --radius-full:9999px;
  --shadow-sm:0 1px 2px rgba(20,19,31,0.06); --shadow-md:0 4px 12px rgba(20,19,31,0.08);
  --shadow-focus:0 0 0 3px oklch(60.6% 0.25 292.717 / 35%);
  --font-sans:'Vazirmatn', Tahoma, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
}
:root[data-theme="dark"]{
  --ui-bg:var(--neutral-900); --ui-bg-elevated:var(--neutral-800); --ui-bg-muted:var(--neutral-800); --ui-bg-accented:var(--neutral-700);
  --ui-text:var(--neutral-200); --ui-text-highlighted:white; --ui-text-toned:var(--neutral-300); --ui-text-muted:var(--neutral-400);
  --ui-text-inverted:var(--neutral-900);
  --ui-border:var(--neutral-800); --ui-border-accented:var(--neutral-700);
  --ui-primary:var(--primary-400);
  --primary-soft-bg:var(--primary-900); --primary-soft-text:var(--primary-300); --primary-soft-border:var(--primary-700);
  --success-soft-bg:var(--success-900); --success-soft-text:var(--success-300);
  --warning-soft-bg:var(--warning-900); --warning-soft-text:var(--warning-300);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.3); --shadow-md:0 4px 14px rgba(0,0,0,0.4);
}

*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
body{
  margin:0; background:var(--ui-bg); color:var(--ui-text);
  font-family:var(--font-sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{color:var(--ui-text-highlighted); line-height:1.3; margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--ui-primary); outline-offset:2px; border-radius:var(--radius-sm)}

.wrap{max-width:1200px; margin-inline:auto; padding-inline:var(--space-5)}

/* header ─────────────────────────────────────────────────────────────── */
.masthead{border-block-end:1px solid var(--ui-border); background:var(--ui-bg-elevated)}
.masthead-inner{display:flex; align-items:center; gap:var(--space-4); padding-block:var(--space-4); flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:var(--space-3); margin-inline-end:auto}
.brand-mark{
  inline-size:40px; block-size:40px; border-radius:var(--radius-lg); flex:none;
  background:var(--ui-primary); color:var(--ui-text-inverted); display:grid; place-items:center;
}
.brand-text strong{display:block; font-size:1rem; color:var(--ui-text-highlighted); font-weight:700}
.brand-text span{display:block; font-size:.8125rem; color:var(--ui-text-muted)}
.ghost-btn{
  min-block-size:44px; min-inline-size:44px; padding-inline:var(--space-4);
  display:inline-flex; align-items:center; gap:var(--space-2); cursor:pointer;
  background:var(--ui-bg-elevated); color:var(--ui-text-toned);
  border:1px solid var(--ui-border-accented); border-radius:var(--radius-lg);
  font-family:inherit; font-size:.875rem; font-weight:500;
  transition:background 160ms ease, color 160ms ease, border-color 160ms ease;
  text-decoration:none;
}
.ghost-btn:hover{background:var(--ui-bg-muted); color:var(--ui-text-highlighted); border-color:var(--ui-border-accented)}

/* hero ───────────────────────────────────────────────────────────────── */
.hero{padding-block:var(--space-12) var(--space-8)}
.hero h1{font-size:clamp(1.5rem,4vw,2rem); font-weight:700; margin-block-end:var(--space-3)}
.hero p{max-inline-size:62ch; margin:0; color:var(--ui-text-toned)}
.stats{display:flex; gap:var(--space-6); flex-wrap:wrap; margin-block-start:var(--space-6)}
.stat{display:flex; flex-direction:column}
.stat b{font-size:1.5rem; color:var(--ui-text-highlighted); font-weight:700; font-variant-numeric:tabular-nums}
.stat span{font-size:.8125rem; color:var(--ui-text-muted)}

/* controls ───────────────────────────────────────────────────────────── */
.controls{
  position:sticky; inset-block-start:0; z-index:10; background:var(--ui-bg);
  padding-block:var(--space-4); border-block-end:1px solid var(--ui-border);
  display:flex; gap:var(--space-3); flex-wrap:wrap; align-items:center;
}
.search{position:relative; flex:1 1 260px; min-inline-size:0}
.search svg{position:absolute; inset-inline-start:var(--space-3); inset-block-start:50%; transform:translateY(-50%); color:var(--ui-text-muted); pointer-events:none}
.search input{
  inline-size:100%; min-block-size:44px; padding-inline:var(--space-10) var(--space-4);
  background:var(--ui-bg-elevated); color:var(--ui-text-highlighted);
  border:1px solid var(--ui-border-accented); border-radius:var(--radius-lg);
  font-family:inherit; font-size:.9375rem;
}
.search input::placeholder{color:var(--ui-text-muted)}
.chips{display:flex; gap:var(--space-2); flex-wrap:wrap}
.chip{
  min-block-size:44px; padding-inline:var(--space-4); cursor:pointer;
  display:inline-flex; align-items:center; gap:var(--space-2);
  background:var(--ui-bg-elevated); color:var(--ui-text-toned);
  border:1px solid var(--ui-border-accented); border-radius:var(--radius-full);
  font-family:inherit; font-size:.875rem; font-weight:500;
  transition:background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.chip:hover{background:var(--ui-bg-muted); color:var(--ui-text-highlighted)}
.chip[aria-pressed="true"]{background:var(--ui-primary); border-color:var(--ui-primary); color:var(--ui-text-inverted)}
.chip .count{font-variant-numeric:tabular-nums; opacity:.75; font-size:.8125rem}

/* areas ──────────────────────────────────────────────────────────────── */
.area{padding-block:var(--space-10) 0}
.area-head{display:flex; align-items:baseline; gap:var(--space-3); margin-block-end:var(--space-5)}
.area-head h2{font-size:1.125rem; font-weight:700}
.area-head .en{font-size:.8125rem; color:var(--ui-text-muted); font-family:var(--font-mono)}
.grid{display:grid; gap:var(--space-4); grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

.card{
  display:flex; flex-direction:column; gap:var(--space-3);
  padding:var(--space-5); background:var(--ui-bg-elevated);
  border:1px solid var(--ui-border); border-radius:var(--radius-2xl);
  transition:border-color 180ms ease, box-shadow 180ms ease;
}
.card:hover{border-color:var(--ui-border-accented); box-shadow:var(--shadow-md)}
.card-top{display:flex; align-items:flex-start; gap:var(--space-3)}
.card-icon{
  inline-size:36px; block-size:36px; flex:none; border-radius:var(--radius-lg);
  display:grid; place-items:center;
  background:var(--primary-soft-bg); color:var(--primary-soft-text);
}
.card h3{font-size:1rem; font-weight:600}
.card h3 a{text-decoration:none}
.card h3 a::after{content:""; position:absolute; inset:0} /* whole-card hit area */
.card{position:relative}
.card p{margin:0; font-size:.875rem; color:var(--ui-text-toned); line-height:1.7}
.badges{display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:center}
.badge{
  display:inline-flex; align-items:center; gap:var(--space-1);
  padding-inline:var(--space-2); padding-block:2px; border-radius:var(--radius-full);
  font-size:.75rem; font-weight:600; white-space:nowrap;
}
.badge-latest{background:var(--success-soft-bg); color:var(--success-soft-text)}
.badge-version{background:var(--ui-bg-muted); color:var(--ui-text-toned); font-family:var(--font-mono)}
.badge-warn{background:var(--warning-soft-bg); color:var(--warning-soft-text)}
.card-meta{
  display:flex; gap:var(--space-4); flex-wrap:wrap; font-size:.75rem; color:var(--ui-text-toned);
  border-block-start:1px solid var(--ui-border); padding-block-start:var(--space-3); margin-block-start:auto;
  font-variant-numeric:tabular-nums;
}
details.older{position:relative; z-index:1; font-size:.8125rem}
details.older summary{cursor:pointer; color:var(--ui-text-muted); min-block-size:24px; display:inline-flex; align-items:center}
details.older summary:hover{color:var(--ui-text-highlighted)}
details.older ul{list-style:none; margin:var(--space-2) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--space-1)}
details.older a{color:var(--ui-primary); text-decoration:none}
details.older a:hover{text-decoration:underline}

/* empty states ───────────────────────────────────────────────────────── */
.empty{
  padding:var(--space-10) var(--space-6); text-align:center;
  border:1px dashed var(--ui-border-accented); border-radius:var(--radius-2xl);
  background:var(--ui-bg-elevated); color:var(--ui-text-muted);
}
.empty svg{color:var(--ui-text-muted); margin-block-end:var(--space-3)}
.empty strong{display:block; color:var(--ui-text-highlighted); font-size:1rem; margin-block-end:var(--space-2)}
.empty p{margin:0 auto; max-inline-size:48ch; font-size:.875rem}
.empty ul{margin:var(--space-3) auto 0; max-inline-size:48ch; text-align:start; font-size:.875rem; padding-inline-start:var(--space-5)}

footer{margin-block-start:var(--space-16); padding-block:var(--space-8); border-block-start:1px solid var(--ui-border); color:var(--ui-text-muted); font-size:.8125rem}
footer code{font-family:var(--font-mono); background:var(--ui-bg-muted); padding-inline:var(--space-2); border-radius:var(--radius-sm)}

[hidden]{display:none !important}

@media (max-width:640px){
  .hero{padding-block:var(--space-8) var(--space-6)}
  .grid{grid-template-columns:1fr}
  .stats{gap:var(--space-4)}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:0.01ms !important; animation-duration:0.01ms !important}
}