/* EMBER DESIGN TOKENS — Three-tier system: Primitives → Semantic → Component */

:root {
  --zinc-50:#fafafa;--zinc-100:#f4f4f5;--zinc-200:#e4e4e7;--zinc-300:#d4d4d8;--zinc-400:#a1a1aa;
  --zinc-500:#71717a;--zinc-600:#52525b;--zinc-700:#3f3f46;--zinc-800:#27272a;--zinc-900:#18181b;--zinc-950:#09090b;
  --orange-400:#fb923c;--orange-500:#f97316;--orange-600:#ea580c;
  --green-500:#22c55e;--red-500:#ef4444;--blue-500:#3b82f6;--yellow-500:#eab308;
  --sp-1:0.25rem;--sp-2:0.5rem;--sp-3:0.75rem;--sp-4:1rem;--sp-5:1.25rem;--sp-6:1.5rem;--sp-8:2rem;
  --radius-sm:4px;--radius-md:6px;--radius-lg:10px;--radius-xl:14px;--radius-full:9999px;
  --font-sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','Fira Code',monospace;
  --text-xs:0.75rem;--text-sm:0.8125rem;--text-base:0.875rem;--text-lg:1.0625rem;--text-xl:1.25rem;--text-2xl:1.5rem;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.25);--shadow-md:0 2px 8px rgba(0,0,0,0.3);
  --fast:120ms ease;--base:200ms ease;
}

/* DARK THEME (default) */
:root,[data-theme="dark"] {
  --bg:var(--zinc-950);--sf:var(--zinc-900);--sf2:var(--zinc-800);--sf3:var(--zinc-700);
  --bd:var(--zinc-800);--bd2:var(--zinc-700);
  --tx:var(--zinc-50);--tx2:var(--zinc-400);--tx3:var(--zinc-500);
  --ac:var(--orange-500);--ac-h:var(--orange-400);--ac-m:rgba(249,115,22,0.12);--ac-tx:#fff;
  --ok:var(--green-500);--no:var(--red-500);--warn:var(--yellow-500);--info:var(--blue-500);
  --inp-bg:var(--zinc-800);--inp-bd:var(--zinc-700);--inp-focus:var(--orange-500);
  --code-bg:var(--zinc-800);--code-tx:var(--zinc-300);
}

/* LIGHT THEME */
[data-theme="light"] {
  --bg:var(--zinc-100);--sf:#ffffff;--sf2:var(--zinc-100);--sf3:var(--zinc-200);
  --bd:var(--zinc-200);--bd2:var(--zinc-300);
  --tx:var(--zinc-900);--tx2:var(--zinc-600);--tx3:var(--zinc-400);
  --ac:var(--orange-600);--ac-h:var(--orange-500);--ac-m:rgba(249,115,22,0.08);--ac-tx:#fff;
  --inp-bg:#fff;--inp-bd:var(--zinc-300);
  --code-bg:var(--zinc-100);--code-tx:var(--zinc-700);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.06);--shadow-md:0 2px 8px rgba(0,0,0,0.08);
}

/* COMPONENT TOKENS */
:root {
  --card-bg:var(--sf);--card-bd:var(--bd);--card-r:var(--radius-xl);--card-p:var(--sp-4);
  --btn-r:var(--radius-md);--btn-p:var(--sp-2) var(--sp-4);--btn-fs:var(--text-sm);
  --av-xs:24px;--av-sm:32px;--av-md:40px;--av-lg:56px;--av-xl:80px;
  --post-sidebar:180px;
}

/* BASE RESET */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-sans);font-size:var(--text-base);line-height:1.5;color:var(--tx);background:var(--bg)}
a{color:var(--ac);text-decoration:none;transition:color var(--fast)}
a:hover{color:var(--ac-h)}
code,pre{font-family:var(--font-mono)}
h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.25}
.container{width:100%;max-width:1140px;margin:0 auto;padding:0 var(--sp-4)}
.text-muted{color:var(--tx2)}.text-faint{color:var(--tx3)}.text-accent{color:var(--ac)}
.text-success{color:var(--ok)}.text-danger{color:var(--no)}.text-sm{font-size:var(--text-sm)}.text-xs{font-size:var(--text-xs)}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}