/* ============================================================
   Peyvand — Design System
   Warm Persian heritage, modern civic-tech (Wikipedia + a16z)
   ============================================================ */

:root {
  /* ---- color: paper warmth ---- */
  --bg-page:     oklch(0.965 0.012 75);
  --bg-surface:  oklch(0.99 0.006 75);
  --bg-sunken:   oklch(0.945 0.014 72);
  --bg-elevated: #ffffff;

  /* ink hierarchy */
  --ink-1:    oklch(0.22 0.012 50);   /* primary text */
  --ink-2:    oklch(0.38 0.012 55);   /* secondary text */
  --ink-3:    oklch(0.55 0.012 60);   /* tertiary / meta */
  --ink-4:    oklch(0.72 0.010 65);   /* placeholder */

  /* hairlines */
  --line-1: oklch(0.88 0.012 70);
  --line-2: oklch(0.92 0.010 72);

  /* accents */
  --clay:        oklch(0.56 0.13 35);  /* terracotta primary */
  --clay-soft:   oklch(0.92 0.04 45);
  --clay-deep:   oklch(0.42 0.13 35);

  --olive:       oklch(0.55 0.06 115);
  --olive-soft:  oklch(0.92 0.03 115);

  --saffron:     oklch(0.72 0.13 70);  /* warning / highlight */
  --saffron-soft: oklch(0.94 0.05 75);

  --indigo:      oklch(0.42 0.10 260); /* rare cool counterpoint */
  --indigo-soft: oklch(0.92 0.02 260);

  --rose:        oklch(0.55 0.13 18);  /* error / disagreement */
  --rose-soft:   oklch(0.94 0.04 22);

  --leaf:        oklch(0.52 0.10 145); /* agreement */
  --leaf-soft:   oklch(0.93 0.04 145);

  /* type stacks */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-ui:      "Geist", "Inter", system-ui, -apple-system, sans-serif;
  --font-fa:      "Vazirmatn", "Tahoma", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* spacing */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 10px;
  --r-4: 14px;
  --r-5: 20px;

  /* shadows — gentle warmth */
  --shadow-1: 0 1px 0 oklch(0.88 0.012 70 / 0.6);
  --shadow-2: 0 1px 3px oklch(0.30 0.02 60 / 0.06), 0 1px 0 oklch(0.88 0.012 70 / 0.4);
  --shadow-3: 0 4px 16px oklch(0.30 0.02 60 / 0.08), 0 1px 2px oklch(0.30 0.02 60 / 0.04);
  --shadow-4: 0 12px 40px oklch(0.30 0.02 60 / 0.12);
}

[dir="rtl"] body {
  font-family: var(--font-fa);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-page);
  color: var(--ink-1);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; }

/* utilities */
.serif    { font-family: var(--font-display); font-feature-settings: "ss01" on, "ss02" on; }
.mono     { font-family: var(--font-mono); }
.fa       { font-family: var(--font-fa); }

.muted    { color: var(--ink-3); }
.dim      { color: var(--ink-2); }

a { color: inherit; text-decoration: none; }
a.link    { color: var(--clay-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a.link:hover { color: var(--clay); }

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-1); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

/* ============================================================
   Primitives
   ============================================================ */

.kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  background: var(--bg-sunken);
  color: var(--ink-2);
  border: 1px solid var(--line-1);
  white-space: nowrap;
}
.pill.clay    { background: var(--clay-soft);    color: var(--clay-deep);  border-color: transparent; }
.pill.olive   { background: var(--olive-soft);   color: oklch(0.40 0.05 115); border-color: transparent; }
.pill.saffron { background: var(--saffron-soft); color: oklch(0.45 0.10 65);  border-color: transparent; }
.pill.indigo  { background: var(--indigo-soft);  color: var(--indigo);     border-color: transparent; }
.pill.leaf    { background: var(--leaf-soft);    color: oklch(0.35 0.10 145); border-color: transparent; }
.pill.rose    { background: var(--rose-soft);    color: oklch(0.40 0.13 18);  border-color: transparent; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--r-3);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--line-1);
  background: var(--bg-surface);
  color: var(--ink-1);
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.btn:hover { background: var(--bg-sunken); border-color: var(--ink-4); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: var(--ink-1);
  color: var(--bg-surface);
  border-color: var(--ink-1);
}
.btn.primary:hover { background: oklch(0.32 0.015 50); border-color: oklch(0.32 0.015 50); }
.btn.clay {
  background: var(--clay);
  color: #fff;
  border-color: var(--clay);
}
.btn.clay:hover { background: var(--clay-deep); border-color: var(--clay-deep); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--bg-sunken); }
.btn.sm { height: 30px; padding: 0 11px; font-size: 13px; }
.btn.lg { height: 46px; padding: 0 22px; font-size: 15px; }

.card {
  background: var(--bg-surface);
  border: 1px solid var(--line-1);
  border-radius: var(--r-4);
}

.divider {
  height: 1px;
  background: var(--line-1);
  width: 100%;
}

/* ============================================================
   App shell
   ============================================================ */

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: oklch(0.965 0.012 75 / 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-1);
}
.topbar-inner {
  max-width: 1480px;
  margin: 0 auto;
  height: 60px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-1);
}
.brand-mark {
  width: 26px; height: 26px;
  display: grid; place-items: center;
}
.nav {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav a {
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink-2);
  transition: background 0.12s, color 0.12s;
  cursor: pointer;
}
.nav a:hover { background: var(--bg-sunken); color: var(--ink-1); }
.nav a.active {
  color: var(--ink-1);
  background: var(--bg-sunken);
}
.nav .pillar-num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-4);
  margin-right: 6px;
  letter-spacing: 0;
}
[dir="rtl"] .nav .pillar-num { margin-right: 0; margin-left: 6px; }

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
[dir="rtl"] .topbar-right { margin-left: 0; margin-right: auto; }

.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--line-1);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-surface);
  height: 30px;
}
.lang-toggle button {
  border: 0;
  background: transparent;
  padding: 0 10px;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--ink-3);
  letter-spacing: 0.05em;
}
.lang-toggle button.active {
  background: var(--ink-1);
  color: var(--bg-surface);
}

.avatar-dot {
  width: 30px; height: 30px;
  border-radius: 999px;
  background: var(--clay);
  color: #fff;
  display: grid; place-items: center;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  border: 1px solid var(--clay-deep);
}

/* page container */
.page {
  flex: 1;
  width: 100%;
}
.container {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ============================================================
   Section header / page header pattern
   ============================================================ */
.page-header {
  padding: 36px 0 28px;
  border-bottom: 1px solid var(--line-1);
  margin-bottom: 28px;
}
.page-header .kicker { margin-bottom: 10px; }
.page-header h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 42px;
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0 0 12px;
  color: var(--ink-1);
}
.page-header p.lede {
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 720px;
  margin: 0;
}

[dir="rtl"] .page-header h1,
[dir="rtl"] .brand,
[dir="rtl"] .serif {
  font-family: var(--font-fa);
  font-weight: 600;
}

/* highlight token used inside text */
.hl {
  background: var(--saffron-soft);
  padding: 0 2px;
  border-radius: 2px;
}
.hl.rose  { background: var(--rose-soft); }
.hl.leaf  { background: var(--leaf-soft); }
.hl.clay  { background: var(--clay-soft); }

/* ============================================================
   Custom: chip select, segmented, etc.
   ============================================================ */
.seg {
  display: inline-flex;
  background: var(--bg-sunken);
  border: 1px solid var(--line-1);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.seg button {
  border: 0;
  background: transparent;
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 500;
}
.seg button.active {
  background: var(--bg-surface);
  color: var(--ink-1);
  box-shadow: var(--shadow-1);
}

/* sparkline / progress */
.bar {
  height: 6px;
  background: var(--line-2);
  border-radius: 999px;
  overflow: hidden;
}
.bar > span {
  display: block;
  height: 100%;
  background: var(--clay);
  border-radius: 999px;
}

/* dotted ornament rule used as section separator */
.dot-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-4);
}
.dot-rule::before,
.dot-rule::after {
  content: "";
  flex: 1;
  border-top: 1px dotted var(--line-1);
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  margin-top: 80px;
  border-top: 1px solid var(--line-1);
  padding: 40px 0 60px;
  color: var(--ink-3);
  font-size: 13px;
}
.footer-inner { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; }
.footer h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); margin: 0 0 12px; font-weight: 600; font-family: var(--font-mono); }
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.footer a:hover { color: var(--ink-1); }

/* loaders */
@keyframes pulse-fade { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
.dots-loading span {
  display: inline-block;
  width: 4px; height: 4px;
  background: currentColor;
  border-radius: 999px;
  margin: 0 2px;
  animation: pulse-fade 1.1s ease-in-out infinite;
}
.dots-loading span:nth-child(2) { animation-delay: 0.15s; }
.dots-loading span:nth-child(3) { animation-delay: 0.3s; }

/* skeleton shimmer */
@keyframes shimmer { 0% { background-position: -200px 0; } 100% { background-position: 400px 0; } }
.skel {
  background: linear-gradient(90deg, var(--bg-sunken) 25%, var(--line-2) 50%, var(--bg-sunken) 75%);
  background-size: 600px 100%;
  animation: shimmer 2s linear infinite;
  border-radius: 4px;
}

/* fade-in for AI responses */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fade-up 0.35s ease both; }

/* ============================================================
   Responsive — mobile / small screens
   ============================================================ */
html, body { overflow-x: hidden; }

@media (max-width: 768px) {
  html, body { font-size: 14px; }

  /* shell + containers */
  .container { padding: 0 16px; }
  .topbar-inner { height: 56px; padding: 0 14px; gap: 12px; }
  .brand { font-size: 19px; gap: 8px; }

  /* nav becomes a horizontal scroll strip so it never overflows the row */
  .nav {
    gap: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 7px 9px; font-size: 13px; white-space: nowrap; }
  .nav .pillar-num { display: none; }
  .topbar-right { gap: 6px; }

  /* page header */
  .page-header { padding: 22px 0 18px; margin-bottom: 20px; }
  .page-header h1 { font-size: 27px; line-height: 1.12; }
  .page-header p.lede { font-size: 14.5px; }

  /* footer wraps tighter */
  .footer { margin-top: 48px; padding: 28px 0 40px; }
  .footer-inner { gap: 24px; }

  /* let long content (tables, code) scroll instead of overflowing */
  .card table { min-width: 0; }
}

@media (max-width: 420px) {
  .page-header h1 { font-size: 23px; }
  .btn { padding: 0 13px; }
}