/* ═══ DESIGN TOKENS ═══ */
:root{
  --ink:#0B0F1A;--ink2:#1C2235;--ink3:#2D3452;
  --slate:#4A5270;--muted:#7C8299;
  /* Refined borders — more visible hierarchy without harshness */
  --border:#D8DCE9;--border2:#B8C0D0;
  /* Premium light mode: atmospheric bg + near-white surface for clear depth */
  --bg:#EDEEF6;--surface:#FAFBFF;
  --gold:#D4A843;--gold2:#F0C96A;--gold-bg:#FDF8EC;--gold-dim:rgba(212,168,67,.12);
  --emerald:#10A06A;--em-bg:#E8F8F2;--em-dim:rgba(16,160,106,.12);
  --ruby:#D63B3B;--ru-bg:#FDEAEA;--ru-dim:rgba(214,59,59,.12);
  --azure:#2563EB;--az-bg:#EEF3FF;--az-dim:rgba(37,99,235,.1);
  --amber:#D97706;--am-bg:#FFFBEB;--am-dim:rgba(217,119,6,.12);
  --violet:#7C3AED;--vi-bg:#F5F3FF;--vi-dim:rgba(124,58,237,.1);
  --sky:#0EA5E9;--sk-bg:#F0F9FF;
  --wa:#25D366;--radius:14px;--radius-sm:8px;
  /* Layered shadows for genuine depth hierarchy */
  --shadow:0 1px 3px rgba(11,15,26,.04),0 4px 16px rgba(11,15,26,.08);
  --shadow-lg:0 4px 12px rgba(11,15,26,.07),0 20px 48px rgba(11,15,26,.13);
  --sh:0 1px 3px rgba(11,15,26,.04),0 2px 12px rgba(11,15,26,.07);
  --sh-md:0 2px 8px rgba(11,15,26,.07),0 8px 28px rgba(11,15,26,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;min-height:100vh;font-size:14px}
/* Premium scrollbars — thin & brand-consistent */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}
/* Brand selection colour */
::selection{background:rgba(212,168,67,.22);color:var(--ink)}