/* Wintrune — editorial premium tokens */
:root {
  /* Colors */
  --paper: oklch(0.985 0.005 80);
  --paper-2: oklch(0.965 0.008 80);
  --paper-3: oklch(0.94 0.01 80);
  --line: oklch(0.88 0.012 80);
  --line-2: oklch(0.82 0.014 80);
  --ink: oklch(0.18 0.01 80);
  --ink-2: oklch(0.32 0.01 80);
  --ink-3: oklch(0.48 0.012 80);
  --ink-4: oklch(0.62 0.012 80);
  --ember: oklch(0.62 0.15 45);
  --ember-soft: oklch(0.92 0.04 45);
  --ember-ink: oklch(0.42 0.13 45);
  --good: oklch(0.55 0.10 150);
  --good-soft: oklch(0.93 0.04 150);
  --warn: oklch(0.62 0.13 80);
  --bad: oklch(0.55 0.16 25);

  /* Type */
  --serif: "Newsreader", "Times New Roman", serif;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  /* Radii */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 18px;
  --r-pill: 999px;

  /* Shadow */
  --sh-1: 0 1px 0 oklch(0.18 0.01 80 / 0.04), 0 1px 2px oklch(0.18 0.01 80 / 0.04);
  --sh-2: 0 2px 6px oklch(0.18 0.01 80 / 0.06), 0 8px 24px oklch(0.18 0.01 80 / 0.06);
  --sh-3: 0 12px 48px oklch(0.18 0.01 80 / 0.12);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.serif {
  font-family: var(--serif);
  font-optical-sizing: auto;
}

button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea, select { font-family: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* Utility */
.mono { font-family: var(--mono); font-feature-settings: "tnum"; }

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

.divider { height: 1px; background: var(--line); border: 0; }

/* Striped placeholder (for imagery) */
.stripe-ph {
  background-image: repeating-linear-gradient(
    -45deg,
    oklch(0.92 0.01 80) 0 8px,
    oklch(0.95 0.008 80) 8px 16px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: all 0.15s ease;
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: oklch(0.08 0.01 80); }
.btn-ghost { color: var(--ink); border-color: var(--line-2); background: var(--paper); }
.btn-ghost:hover { background: var(--paper-2); }
.btn-ember { background: var(--ember); color: var(--paper); }
.btn-ember:hover { background: var(--ember-ink); }
.btn-sm { height: 32px; padding: 0 14px; font-size: 13px; }
.btn-lg { height: 48px; padding: 0 24px; font-size: 15px; }

/* Inputs */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.input, .textarea, .select {
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--paper);
  font-size: 15px;
  color: var(--ink);
  outline: none;
  transition: border 0.15s, box-shadow 0.15s;
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 4px oklch(0.18 0.01 80 / 0.06);
}
.textarea { height: auto; padding: 12px 14px; resize: vertical; min-height: 96px; line-height: 1.5; }

/* Card */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
}

/* Tag */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--paper-2);
  border: 1px solid var(--line);
  font-size: 12px;
  font-family: var(--mono);
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
.tag-ember { background: var(--ember-soft); border-color: var(--ember-soft); color: var(--ember-ink); }
.tag-good { background: var(--good-soft); border-color: var(--good-soft); color: oklch(0.40 0.10 150); }

/* Avatar */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--paper);
  background: var(--ink-2);
  flex-shrink: 0;
  user-select: none;
}

/* Pulse dot for live badges */
.live-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--ember);
  position: relative;
}
.live-dot::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 999px;
  background: var(--ember);
  opacity: 0.4;
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(0.6); opacity: 0.5; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Scrollbar (subtle) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; border: 2px solid var(--paper); }
::-webkit-scrollbar-track { background: transparent; }

/* Mobile overrides */
@media (max-width: 639px) {
  .btn-lg { height: 44px; padding: 0 20px; }
  ::-webkit-scrollbar { display: none; }
}

/* Hamburger menu animation */
@keyframes slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Arabic font override ───────────────────────────────────────────────── */
html[lang="ar"] {
  --sans:  'IBM Plex Arabic', 'Tahoma', sans-serif;
  --serif: 'Noto Serif Arabic', Georgia, serif;
}

/* ── Persian font override (Parastoo) ──────────────────────────────────── */
html[lang="fa"] {
  --sans:  'Parastoo', 'Tahoma', sans-serif;
  --serif: 'Parastoo', Georgia, serif;
}