:root{
/* base surfaces */
--bg-0:#0B0B10;--bg-1:#111118;--bg-2:#181822;--bg-3:#1F1F2B;
/* hairlines */
--line-1:rgba(244,244,248,.08);--line-2:rgba(244,244,248,.16);--line-3:rgba(244,244,248,.28);
/* text — reading text is always near-white on dark */
--text-1:#F4F4F8;--text-2:#B9B9C6;--text-3:#7C7C8A;--text-4:#54545F;
/* suit accents — brand mapping, never "corrected" to red/black */
--spade:#A855F7;--diamond:#3B82F6;--heart:#FACC15;--club:#22C55E;
/* wordmark gold accent */
--gold:#FACC15;/* @kind color */
--spade-rgb:168,85,247;/* @kind color */
--diamond-rgb:59,130,246;/* @kind color */
--heart-rgb:250,204,21;/* @kind color */
--club-rgb:34,197,94;/* @kind color */
/* semantic aliases */
--surface-page:var(--bg-0);--surface-card:var(--bg-1);--surface-raised:var(--bg-2);
--text-body:var(--text-1);--text-muted:var(--text-2);--text-faint:var(--text-3);
--accent:var(--spade);--accent-rgb:var(--spade-rgb);
--on-accent:#0B0B10;
}
/* suit scopes: set data-suit on any element to theme its subtree */
[data-suit="spade"]{--suit:var(--spade);--suit-rgb:var(--spade-rgb)}
[data-suit="diamond"]{--suit:var(--diamond);--suit-rgb:var(--diamond-rgb)}
[data-suit="heart"]{--suit:var(--heart);--suit-rgb:var(--heart-rgb)}
[data-suit="club"]{--suit:var(--club);--suit-rgb:var(--club-rgb)}