/* ============================================================
   SALOM — Samarkand design system
   Sovereign messenger · light + dark · warm-paper neutrals
   ============================================================ */

/* Self-hosted fonts (sovereign: no external Google dependency, works offline / restricted networks) */
@import url('./fonts.css');

/* ---------- TOKENS ---------- */
:root {
  /* accent — overridable by Tweaks */
  --accent-h: 192;
  --accent-c: 0.085;

  --primary:        oklch(0.58 var(--accent-c) var(--accent-h));
  --primary-strong: oklch(0.50 var(--accent-c) var(--accent-h));
  --primary-bright: oklch(0.66 var(--accent-c) var(--accent-h));
  --primary-soft:   oklch(0.955 0.028 var(--accent-h));
  --primary-softer: oklch(0.975 0.016 var(--accent-h));
  --on-primary:     oklch(0.99 0.01 var(--accent-h));

  --gold:        oklch(0.74 0.095 78);
  --gold-soft:   oklch(0.95 0.04 80);

  /* warm paper neutrals */
  --bg:        oklch(0.984 0.004 95);
  --bg-tint:   oklch(0.972 0.006 95);
  --surface:   oklch(1 0 0);
  --surface-2: oklch(0.968 0.005 95);
  --surface-3: oklch(0.948 0.006 95);
  --border:    oklch(0.905 0.006 95);
  --border-2:  oklch(0.86 0.007 95);

  --text:    oklch(0.245 0.011 75);
  --text-2:  oklch(0.48 0.011 78);
  --text-3:  oklch(0.535 0.011 80); /* darker → WCAG AA on timestamps/muted (was 0.64) */
  --text-on-soft: oklch(0.40 0.05 var(--accent-h));

  /* own message bubble */
  --bubble-own-bg:   var(--primary);
  --bubble-own-text: var(--on-primary);
  --bubble-own-meta: color-mix(in oklab, var(--on-primary) 90%, transparent);
  --bubble-other-bg: var(--surface);
  --bubble-other-text: var(--text);

  --success: oklch(0.62 0.12 155);
  --warning: oklch(0.74 0.12 70);
  --danger:  oklch(0.58 0.16 27);
  --info:    var(--primary);

  --ring: color-mix(in oklab, var(--primary) 40%, transparent);

  /* radius — overridable */
  --r-xl: 22px;
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 9px;
  --r-xs: 6px;
  --bubble-r: 18px;

  /* density — overridable */
  --d: 1;
  --row-pad: calc(11px * var(--d));
  --gap: calc(10px * var(--d));

  --shadow-sm: 0 1px 2px oklch(0.4 0.02 80 / 0.06), 0 1px 1px oklch(0.4 0.02 80 / 0.04);
  --shadow-md: 0 4px 14px oklch(0.35 0.02 80 / 0.08), 0 2px 5px oklch(0.35 0.02 80 / 0.05);
  --shadow-lg: 0 18px 50px oklch(0.3 0.02 80 / 0.16), 0 6px 16px oklch(0.3 0.02 80 / 0.08);
  --shadow-pop: 0 12px 40px oklch(0.28 0.02 80 / 0.18);

  --font: 'Hanken Grotesk', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --rail-w: 76px;
  --list-w: 348px;
  --panel-w: 340px;
}

[data-theme="dark"] {
  --primary:        oklch(0.70 var(--accent-c) var(--accent-h));
  --primary-strong: oklch(0.62 var(--accent-c) var(--accent-h));
  --primary-bright: oklch(0.78 var(--accent-c) var(--accent-h));
  --primary-soft:   oklch(0.34 0.045 var(--accent-h));
  --primary-softer: oklch(0.28 0.03 var(--accent-h));
  --on-primary:     oklch(0.16 0.03 var(--accent-h));

  --gold:      oklch(0.80 0.10 80);
  --gold-soft: oklch(0.34 0.05 80);

  --bg:        oklch(0.185 0.012 218);
  --bg-tint:   oklch(0.205 0.013 218);
  --surface:   oklch(0.232 0.014 218);
  --surface-2: oklch(0.262 0.016 218);
  --surface-3: oklch(0.30 0.018 218);
  --border:    oklch(0.31 0.016 218);
  --border-2:  oklch(0.38 0.018 218);

  --text:   oklch(0.95 0.006 200);
  --text-2: oklch(0.76 0.012 205);
  --text-3: oklch(0.70 0.012 208); /* lighter → WCAG AA on dark (was 0.60) */
  --text-on-soft: oklch(0.92 0.04 var(--accent-h));

  --bubble-own-bg:   var(--primary-strong);
  --bubble-own-text: oklch(0.99 0.01 var(--accent-h));
  --bubble-own-meta: color-mix(in oklab, oklch(0.99 0.01 var(--accent-h)) 90%, transparent);
  --bubble-other-bg: var(--surface-2);

  --success: oklch(0.72 0.13 155);
  --danger:  oklch(0.68 0.15 27);

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.25);
  --shadow-md: 0 4px 16px oklch(0 0 0 / 0.32), 0 2px 6px oklch(0 0 0 / 0.22);
  --shadow-lg: 0 22px 60px oklch(0 0 0 / 0.5), 0 8px 20px oklch(0 0 0 / 0.3);
  --shadow-pop: 0 14px 44px oklch(0 0 0 / 0.45);
}

/* ---------- RESET / BASE ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
#root { height: 100dvh; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
::selection { background: color-mix(in oklab, var(--primary) 28%, transparent); }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font-family: inherit; color: inherit; }
a { color: var(--primary-strong); text-decoration: none; }
[data-theme="dark"] a { color: var(--primary-bright); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--text-3) 45%, transparent); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--text-3) 70%, transparent); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

.mono { font-family: var(--mono); font-feature-settings: "tnum"; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- UTILITIES ---------- */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.spread { display: flex; align-items: center; justify-content: space-between; }
.center { display: flex; align-items: center; justify-content: center; }
.grow { flex: 1 1 auto; min-width: 0; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap { white-space: nowrap; }

/* ---------- FOCUS ---------- */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: var(--r-md);
  font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em;
  transition: background .15s, transform .08s, box-shadow .15s, border-color .15s;
  white-space: nowrap; user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--primary-strong); }
.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-soft { background: var(--surface-2); color: var(--text); }
.btn-soft:hover { background: var(--surface-3); }
.btn-outline { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--border-2); }
.btn-outline:hover { background: var(--surface-2); }
.btn-danger { background: color-mix(in oklab, var(--danger) 12%, transparent); color: var(--danger); }
.btn-danger:hover { background: color-mix(in oklab, var(--danger) 20%, transparent); }
.btn-block { width: 100%; }
.btn-lg { height: 48px; font-size: 15.5px; border-radius: var(--r-lg); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: var(--r-sm); }

/* icon button */
.ib {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--r-md); color: var(--text-2);
  transition: background .14s, color .14s;
}
.ib:hover { background: var(--surface-2); color: var(--text); }
.ib.sm { width: 32px; height: 32px; border-radius: var(--r-sm); }
.ib.active { background: var(--primary-soft); color: var(--text-on-soft); }

/* Touch devices: meet the 44px target guideline without changing desktop density. */
@media (pointer: coarse) {
  .ib { width: 44px; height: 44px; }
  .ib.sm { width: 44px; height: 44px; }
  .rail-avatar { min-height: 44px; }
}

/* ---------- FIELDS ---------- */
.field { position: relative; display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.input {
  height: 46px; padding: 0 14px; border-radius: var(--r-md);
  background: var(--surface); color: var(--text); font-size: 15px;
  box-shadow: inset 0 0 0 1px var(--border-2);
  transition: box-shadow .15s, background .15s;
}
.input::placeholder { color: var(--text-3); }
.input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--primary), 0 0 0 4px var(--ring); }
.input.with-icon { padding-left: 42px; }

/* ---------- CHIP / BADGE ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px;
  border-radius: 99px; font-size: 13.5px; font-weight: 600; color: var(--text-2);
  background: var(--surface-2); transition: background .14s, color .14s, box-shadow .14s;
}
.chip:hover { background: var(--surface-3); }
.chip.on { background: var(--primary); color: var(--on-primary); }
.badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 99px; font-size: 11.5px; font-weight: 700;
  background: var(--primary); color: var(--on-primary); font-variant-numeric: tabular-nums;
}
.badge.muted-badge { background: var(--text-3); }
.badge.gold { background: var(--gold); color: oklch(0.25 0.04 70); }
.dot { width: 8px; height: 8px; border-radius: 99px; }
.tag {
  display:inline-flex; align-items:center; gap:5px; height: 22px; padding: 0 8px; border-radius: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
}
.tag-admin { background: color-mix(in oklab, var(--gold) 22%, transparent); color: var(--text); }
.tag-mod { background: var(--primary-soft); color: var(--text-on-soft); }
.tag-user { background: var(--surface-3); color: var(--text-2); }

/* ---------- CARD / SURFACE ---------- */
.card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.divider { height: 1px; background: var(--border); }
.vdivider { width: 1px; background: var(--border); align-self: stretch; }

/* presence */
.presence { width: 13px; height: 13px; border-radius: 99px; box-shadow: 0 0 0 2.5px var(--surface); }
.presence.online { background: var(--success); }
.presence.away { background: var(--warning); }
.presence.offline { background: var(--text-3); }

/* ---------- SCROLL AREA ---------- */
.scroll { overflow-y: auto; overscroll-behavior: contain; }

/* ---------- ANIMS ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: scale(.96) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes ringPulse { 0%,100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.12); opacity: .15; } }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.anim-pop { animation: popIn .18s cubic-bezier(.2,.8,.2,1); }
.anim-fade { animation: fadeIn .2s ease; }

.skel {
  background: linear-gradient(90deg, var(--surface-2) 0px, var(--surface-3) 120px, var(--surface-2) 240px);
  background-size: 800px 100%; animation: shimmer 1.4s infinite linear; border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .01ms !important; }
}