/* ========================================================================= TCGDash — shared base: design tokens + theming foundation. Loaded FIRST by every dashboard (Product Explorer, Set Explorer, Compare, Research) via both the WordPress snippets and the local-preview HTML. This is the single source of truth for the :root design tokens (color, spacing, radius, shadow, typography) and the light/dark theming rules. Dashboard stylesheets reference these var(--tcgd-*) tokens; never redefine them. Theming — the WEBSITE decides, the dashboards only respond: - Light by default. The dashboards never impose a theme from the OS / browser. We deliberately do NOT use `prefers-color-scheme`: that would let a visitor's OS override whatever the host WordPress site chose, so a dashboard could go dark on a light site (or vice-versa). The site is the source of truth. - Dark ONLY when the host site marks an ancestor — , , or any wrapper around the mount — with [data-theme="dark"] or a .dark class (the common WordPress dark-mode toggles). Tokens are custom properties, so they inherit down to every #tcgd-* mount with no per-dashboard rule. - [data-theme="light"] / .light force a light island back, even inside a dark ancestor. ========================================================================= */ /* ---------- design tokens: light ---------- */ :root { --tcgd-bg: #ffffff; --tcgd-surface: #ffffff; --tcgd-surface-2: #f7f8fa; --tcgd-surface-3: #eef0f4; --tcgd-border: #e6e8ec; --tcgd-border-strong: #d0d4dc; --tcgd-divider: #eef0f4; --tcgd-text: #0f172a; /* near-black, very high contrast */ --tcgd-text-soft: #475569; --tcgd-text-muted: #6b7280; --tcgd-text-faint: #9ca3af; --tcgd-accent: #3b5bdb; /* one restrained accent — cool blue */ --tcgd-accent-soft: rgba(59, 91, 219, 0.10); --tcgd-accent-text: #2840a8; /* Secondary accent — violet. Used as Compare's right-side color, single-card badges, and gradient end-stops where blue → purple reads as a "value scale". Mirrors the accent triple so dark mode shifts symmetrically. */ --tcgd-violet: #8b5cf6; --tcgd-violet-soft: rgba(139, 92, 246, 0.12); --tcgd-violet-text: #7c3aed; --tcgd-positive: #15803d; --tcgd-positive-soft: rgba(21, 128, 61, 0.10); --tcgd-negative: #b91c1c; --tcgd-negative-soft: rgba(185, 28, 28, 0.10); --tcgd-warn: #b45309; --tcgd-warn-soft: rgba(180, 83, 9, 0.10); --tcgd-tag-bg: #f1f3f7; --tcgd-tag-text: #475569; --tcgd-radius: 8px; --tcgd-radius-sm: 6px; --tcgd-radius-lg: 12px; --tcgd-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); --tcgd-shadow-hover: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 16px rgba(15, 23, 42, 0.06); --tcgd-shadow-drawer: 0 10px 40px rgba(15, 23, 42, 0.18); --tcgd-font: "Inter", "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --tcgd-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Dashboard container system (layout token, not theme — defined once, shared by all three dashboards). App-width, not marketing-width: content fills the screen up to a cap, with a minimum edge gutter. See `.tcgd-*` root rules. */ --tcgd-app-max: 1680px; /* content cap — Linear/Stripe-style app width */ --tcgd-app-gutter: 24px; /* minimum horizontal gutter at the dashboard edges */ } /* ---------- design tokens: dark ---------- No `prefers-color-scheme` block on purpose — see the theming note in the header. Dark is opt-in by the host site, never by the visitor's OS. Explicit dark — the host site sets [data-theme="dark"] or a .dark class on ANY ancestor (html, body, or a wrapper around the dashboard mount). Both selectors are bare (not scoped to a specific #tcgd-* id), so the dark tokens inherit down to every dashboard mount equally. */ [data-theme="dark"], .dark { --tcgd-bg: #0b0d12; --tcgd-surface: #11141b; --tcgd-surface-2: #161a23; --tcgd-surface-3: #1d222d; --tcgd-border: #232834; --tcgd-border-strong: #2e3441; --tcgd-divider: #1d222d; --tcgd-text: #e6e8ee; --tcgd-text-soft: #a4abb8; --tcgd-text-muted: #7c8493; --tcgd-text-faint: #5c6371; --tcgd-accent: #7c93ff; --tcgd-accent-soft: rgba(124, 147, 255, 0.15); --tcgd-accent-text: #9fb0ff; --tcgd-violet: #a78bfa; --tcgd-violet-soft: rgba(167, 139, 250, 0.18); --tcgd-violet-text: #c4b5fd; --tcgd-positive: #4ade80; --tcgd-positive-soft: rgba(74, 222, 128, 0.14); --tcgd-negative: #f87171; --tcgd-negative-soft: rgba(248, 113, 113, 0.14); --tcgd-warn: #fbbf24; --tcgd-warn-soft: rgba(251, 191, 36, 0.14); --tcgd-tag-bg: #1d222d; --tcgd-tag-text: #a4abb8; --tcgd-shadow: 0 1px 2px rgba(0, 0, 0, 0.30); --tcgd-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.30), 0 8px 24px rgba(0, 0, 0, 0.45); --tcgd-shadow-drawer: 0 10px 50px rgba(0, 0, 0, 0.55); } /* Force-light island — lets the host site reassert light inside a dark ancestor (e.g. a .dark page wrapper) by marking a closer ancestor [data-theme="light"] or .light. Resets the FULL token set, not just the background, so a light island is genuinely light and not a half-themed mix. Bare selectors so it applies to every dashboard mount. */ [data-theme="light"], .light { --tcgd-bg: #ffffff; --tcgd-surface: #ffffff; --tcgd-surface-2: #f7f8fa; --tcgd-surface-3: #eef0f4; --tcgd-border: #e6e8ec; --tcgd-border-strong: #d0d4dc; --tcgd-divider: #eef0f4; --tcgd-text: #0f172a; --tcgd-text-soft: #475569; --tcgd-text-muted: #6b7280; --tcgd-text-faint: #9ca3af; --tcgd-accent: #3b5bdb; --tcgd-accent-soft: rgba(59, 91, 219, 0.10); --tcgd-accent-text: #2840a8; --tcgd-violet: #8b5cf6; --tcgd-violet-soft: rgba(139, 92, 246, 0.12); --tcgd-violet-text: #7c3aed; --tcgd-positive: #15803d; --tcgd-positive-soft: rgba(21, 128, 61, 0.10); --tcgd-negative: #b91c1c; --tcgd-negative-soft: rgba(185, 28, 28, 0.10); --tcgd-warn: #b45309; --tcgd-warn-soft: rgba(180, 83, 9, 0.10); --tcgd-tag-bg: #f1f3f7; --tcgd-tag-text: #475569; --tcgd-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); --tcgd-shadow-hover: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 16px rgba(15, 23, 42, 0.06); --tcgd-shadow-drawer: 0 10px 40px rgba(15, 23, 42, 0.18); } /* ---------- root container ---------- */ body.tcgd-standalone { margin: 0; background: var(--tcgd-bg); font-family: var(--tcgd-font); color: var(--tcgd-text); }