/* ============================================================
   SafeComments — base.css
   Design tokens, dark mode, reset, shared components
   Fonts are self-hosted via next/font in app layout (no external @import).
   ============================================================ */

:root{
  /* brand */
  --brand:#4F46E5;
  --brand-dark:#3730A3;
  --brand-light:#EEF2FF;
  --brand-rgb:79,70,229;
  --success:#16A34A;
  --warning:#D97706;
  --danger:#DC2626;

  --n50:#F9FAFB;
  --n100:#F3F4F6;
  --n200:#E5E7EB;
  --n300:#D1D5DB;
  --n400:#9CA3AF;
  --n500:#6B7280;
  --n600:#4B5563;
  --n700:#374151;
  --n800:#1F2937;
  --n900:#111827;

  /* semantic surfaces (light) */
  --page:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F9FAFB;
  --surface-3:#F3F4F6;
  --border:#E5E7EB;
  --border-strong:#D1D5DB;
  --text:#111827;
  --text-2:#4B5563;
  --text-3:#6B7280;
  --text-inv:#FFFFFF;

  /* radii */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-full:9999px;

  /* shadow */
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow-md:0 4px 6px rgba(16,24,40,.07), 0 1px 3px rgba(16,24,40,.06);
  --shadow-lg:0 10px 15px rgba(16,24,40,.08), 0 4px 6px rgba(16,24,40,.04);
  --shadow-xl:0 24px 48px -12px rgba(16,24,40,.18), 0 8px 16px rgba(16,24,40,.06);

  --maxw:1200px;
  --ease:cubic-bezier(.4,0,.2,1);

  --font-sans:var(--font-inter, 'Inter'), system-ui, -apple-system, sans-serif;
  --font-mono:var(--font-jetbrains-mono, 'JetBrains Mono'), ui-monospace, monospace;
  --font-armenian:var(--font-noto-armenian, 'Noto Sans Armenian'), sans-serif;
  --font-arabic:var(--font-noto-arabic, 'Noto Sans Arabic'), sans-serif;
}

[data-theme="dark"]{
  --page:#0B0E16;
  --surface:#12151F;
  --surface-2:#171B27;
  --surface-3:#1E2330;
  --border:#262C3B;
  --border-strong:#333B4D;
  --text:#F3F5F9;
  --text-2:#AEB6C6;
  --text-3:#8A93A6;
  --brand:#6366F1;
  --brand-dark:#4F46E5;
  --brand-light:#1E1B4B;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 4px 8px rgba(0,0,0,.4);
  --shadow-lg:0 12px 24px rgba(0,0,0,.5);
  --shadow-xl:0 28px 56px -12px rgba(0,0,0,.6);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--page); color:var(--text);
  font-family:var(--font-sans);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  transition:background .25s var(--ease), color .25s var(--ease);
}
html[lang="ar"] body{ font-family:var(--font-arabic), var(--font-sans); }
h1,h2,h3,h4,p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
img{ max-width:100%; display:block; }
::selection{ background:rgba(var(--brand-rgb),.2); }

.mono{ font-family:var(--font-mono); }
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }

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

/* ---------- logo ---------- */
.logo{ display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:20px; letter-spacing:-.02em; color:var(--text); }
.logo svg{ width:30px; height:30px; flex:none; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 18px; border-radius:var(--r-md);
  font-size:15px; font-weight:600; line-height:1; white-space:nowrap;
  border:1px solid transparent; transition:all .15s var(--ease);
}
.btn svg{ width:18px; height:18px; }
.btn-sm{ height:36px; padding:0 14px; font-size:14px; }
.btn-lg{ height:52px; padding:0 26px; font-size:16px; }
.btn-primary{ background:var(--brand); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--brand-dark); box-shadow:var(--shadow-md); transform:translateY(-1px); }
.btn-secondary{ background:var(--surface); color:var(--text); border-color:var(--border-strong); }
.btn-secondary:hover{ background:var(--surface-2); border-color:var(--text-3); }
.btn-ghost{ background:transparent; color:var(--text); }
.btn-ghost:hover{ background:var(--surface-3); }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-block{ width:100%; }

/* ---------- badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:12px; font-weight:500;
  letter-spacing:.03em; padding:3px 9px; border-radius:var(--r-sm); white-space:nowrap;
}
.badge .dot{ width:6px; height:6px; border-radius:50%; flex:none; }
.b-normal{ background:var(--surface-3); color:var(--text-3); }
.b-normal .dot{ background:var(--n400); }
.b-spam{ background:#FFFBEB; color:#B45309; } .b-spam .dot{ background:#D97706; }
.b-scam{ background:#FFF7ED; color:#C2410C; } .b-scam .dot{ background:#EA580C; }
.b-insult{ background:#FEF2F2; color:#DC2626; } .b-insult .dot{ background:#DC2626; }
.b-hate{ background:#FEE2E2; color:#B91C1C; font-weight:600; } .b-hate .dot{ background:#DC2626; }
.b-threat{ background:#FECACA; color:#991B1B; font-weight:600; } .b-threat .dot{ background:#991B1B; }
.b-toxic{ background:#FFF1F2; color:#BE123C; } .b-toxic .dot{ background:#E11D48; }
[data-theme="dark"] .b-spam{ background:rgba(217,119,6,.14); color:#FBBF24; }
[data-theme="dark"] .b-scam{ background:rgba(234,88,12,.14); color:#FB923C; }
[data-theme="dark"] .b-insult{ background:rgba(220,38,38,.14); color:#F87171; }
[data-theme="dark"] .b-hate{ background:rgba(220,38,38,.2); color:#FCA5A5; }
[data-theme="dark"] .b-threat{ background:rgba(153,27,27,.32); color:#FCA5A5; }
[data-theme="dark"] .b-toxic{ background:rgba(225,29,72,.16); color:#FDA4AF; }

/* ---------- confidence bar ---------- */
.conf{ display:inline-flex; align-items:center; gap:8px; }
.conf .track{ width:72px; height:6px; border-radius:var(--r-full); background:var(--surface-3); overflow:hidden; }
.conf .fill{ height:100%; border-radius:var(--r-full); }
.conf .pct{ font-family:var(--font-mono); font-size:12px; color:var(--text-3); min-width:34px; }
.c-hi{ background:var(--success); } .c-mid{ background:var(--warning); } .c-lo{ background:var(--danger); }

/* ---------- avatar ---------- */
.avatar{ width:36px; height:36px; border-radius:50%; flex:none; display:flex; align-items:center;
  justify-content:center; font-weight:600; font-size:14px; color:#fff; }

/* ---------- theme toggle ---------- */
.theme-toggle{
  width:36px; height:36px; border-radius:var(--r-md); display:inline-flex;
  align-items:center; justify-content:center; color:var(--text-2);
  border:1px solid var(--border); background:var(--surface);
}
.theme-toggle:hover{ background:var(--surface-2); color:var(--text); }
.theme-toggle svg{ width:18px; height:18px; }
.theme-toggle .moon{ display:none; }
[data-theme="dark"] .theme-toggle .sun{ display:none; }
[data-theme="dark"] .theme-toggle .moon{ display:block; }

/* ---------- lang switcher ---------- */
.lang-switch{ position:relative; }
.lang-switch summary{
  list-style:none; display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font-size:14px; font-weight:500; color:var(--text-2); padding:8px 10px; border-radius:var(--r-md);
}
.lang-switch summary::-webkit-details-marker{ display:none; }
.lang-switch summary:hover{ color:var(--text); background:var(--surface-3); }
.lang-menu{
  position:absolute; top:calc(100% + 6px); inset-inline-end:0; min-width:170px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  box-shadow:var(--shadow-lg); padding:6px; z-index:60;
}
.lang-menu a{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-sm);
  font-size:14px; color:var(--text-2); }
.lang-menu a:hover{ background:var(--surface-3); color:var(--text); }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ---------- parity font bridge (mono + armenian in page CSS) ---------- */
.eyebrow,.eyebrow-pill .tagk,.ps-card .lab,.sb-nav a .count,.tab .n,.cm .meta .lg,.step .num,
.legend .li .pc,.area-x,.area .axis{ font-family:var(--font-mono); }
.hy,.fx.hy,.tcard .quote.hy,.cm .txt.hy,.fitem .fx.hy{ font-family:var(--font-armenian); }

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