/* ============================================================
MTGG — Dark theme tokens (Direction · Slate, dark / indigo-tinted)
Drop-in companion to tokens.css. Load it AFTER tokens.css and
toggle by setting data-theme="dark" on .
…
Only re-maps variables + the handful of spots in components.css
that hardcode a light hex. Every component keeps its original CSS.
============================================================ */
[data-theme="dark"] {
/* Backgrounds — layered: page darkest, panels/cards raised, hover lighter */
--bg: #0E1016; /* page */
--bg-2: #171925; /* panel, card — raised surface */
--bg-3: #232637; /* hover, active neutral */
/* Lines & borders */
--line: #262A3B;
--line-strong: #383D52;
/* Inks (text) */
--ink: #EAECF4; /* primary text, titles */
--ink-dim: #9FA6BC; /* secondary text */
--ink-mute: #656D83; /* meta, uppercase labels */
/* Accent — INDIGO (lifted for contrast on dark) */
--accent: #7B74F7;
--accent-2: #928CFA; /* hover — brighter on dark */
--accent-soft: #211F3D; /* dark indigo tint for active chips/nav */
--accent-ring: rgba(123, 116, 247, .32);
/* Semantics (brightened for dark) */
--success: #34D399;
--warning: #E0A34A;
--danger: #F26D6D;
--muted: #656D83;
--success-soft: #10281E;
--danger-soft: #2E1618;
--warning-soft: #2A2012;
/* MTG colours (pips & identities) — re-tuned so darks stay legible on dark */
--mtg-w-from: #E7DCB0; --mtg-w-to: #B39F63;
--mtg-u-from: #6FB0E2; --mtg-u-to: #295F8F;
--mtg-b-from: #7C7370; --mtg-b-to: #2A2523;
--mtg-r-from: #E88A70; --mtg-r-to: #A83722;
--mtg-g-from: #8FCB97; --mtg-g-to: #357A47;
--mtg-c-from: #C6C1B6; --mtg-c-to: #8A8377;
--mtg-m-from: #E6BC66; --mtg-m-to: #977825;
/* Shadows — deeper & softer so raised surfaces still read on dark */
--shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
--shadow-2: 0 4px 16px rgba(0, 0, 0, .50);
--shadow-3: 0 24px 48px rgba(0, 0, 0, .60);
color-scheme: dark;
}
/* ------------------------------------------------------------
Component-level overrides — only where components.css bakes in
a light hex that a token can't reach.
------------------------------------------------------------ */
/* Ghost / danger button hovers used literal light reds */
[data-theme="dark"] .btn--danger { --btn-hover-bg: rgba(242, 109, 109, .14); }
/* Quantity badge was solid --ink (now near-white) with white text → invert it */
[data-theme="dark"] .qty-badge {
background: rgba(9, 10, 15, .82);
color: var(--ink);
border: 1px solid var(--line-strong);
box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
/* Trade segmented-control active states hardcoded pale green / red */
[data-theme="dark"] .trade-seg button[aria-pressed="true"][data-status="open"] { background: rgba(52, 211, 153, .16); color: #4ADE94; }
[data-theme="dark"] .trade-seg button[aria-pressed="true"][data-status="locked"] { background: rgba(242, 109, 109, .16); color: #F98A8A; }
/* Priority / danger chip tints referenced light red */
[data-theme="dark"] .btn--danger:hover { --btn-hover-bg: rgba(242, 109, 109, .18); }
/* Card-modal image pane used a cream gradient */
[data-theme="dark"] .card-modal__img-pane { background: linear-gradient(180deg, #1b1e2b, #12131c); }
[data-theme="dark"] .card-modal__backdrop { background: rgba(4, 5, 9, .62); }
/* “is-set” category lead + selected role icon flipped to solid white */
[data-theme="dark"] .fdrop--cat.is-set .fdrop__lead,
[data-theme="dark"] .roletoggle.is-on .roletoggle__ic { background: var(--bg-2); color: var(--accent); }
/* Card image seams: keep the media flush on dark surfaces */
[data-theme="dark"] .ccard { box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
[data-theme="dark"] .ccard:hover { box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .8); }