/* Catalyxt DS — primitives + variants Apply variant on or : data-cx-variant="app-shell|marketing|desk" */ :root { --cx-font-sans: "Segoe UI", system-ui, -apple-system, sans-serif; --cx-font-display: "Raleway", "Segoe UI", system-ui, sans-serif; --cx-font-body: "Open Sans", "Segoe UI", system-ui, sans-serif; --cx-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --cx-space-1: 0.25rem; --cx-space-2: 0.5rem; --cx-space-3: 0.75rem; --cx-space-4: 1rem; --cx-space-5: 1.25rem; --cx-space-6: 1.5rem; --cx-space-8: 2rem; --cx-text-xs: 0.75rem; --cx-text-sm: 0.875rem; --cx-text-base: 1rem; --cx-text-md: 1.02rem; --cx-text-lg: 1.25rem; --cx-leading: 1.45; --cx-radius: 12px; --cx-radius-sm: 8px; --cx-radius-xs: 6px; --cx-touch: 44px; --cx-motion: 150ms; --cx-ease: cubic-bezier(0.4, 0, 0.2, 1); --cx-focus-ring: 0 0 0 3px var(--cx-focus); } /* Default = app-shell (bip39 / card / artauthenticity) */ :root, [data-cx-variant="app-shell"] { --cx-bg: #0b0f14; --cx-bg-elevated: #121821; --cx-panel: #161d27; --cx-panel-2: #1c2533; --cx-text: #eef2f7; --cx-muted: #8b9bb0; --cx-accent: #3d8bfd; --cx-accent-soft: rgba(61, 139, 253, 0.14); --cx-accent-hover: #5a9fff; --cx-ok: #22a06b; --cx-bad: #e2483d; --cx-warn: #cf9f02; --cx-border: #2a3545; --cx-border-strong: #3a4a60; --cx-focus: #7eb6ff; --cx-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); color-scheme: dark; } [data-cx-variant="app-shell"][data-theme="light"], [data-theme="light"][data-cx-variant="app-shell"] { --cx-bg: #f4f6f9; --cx-bg-elevated: #ffffff; --cx-panel: #ffffff; --cx-panel-2: #eef2f7; --cx-text: #121821; --cx-muted: #5a6b80; --cx-accent: #2563eb; --cx-accent-soft: rgba(37, 99, 235, 0.12); --cx-accent-hover: #1d4ed8; --cx-ok: #15803d; --cx-bad: #b91c1c; --cx-warn: #a16207; --cx-border: #d0d7e2; --cx-border-strong: #94a3b8; --cx-focus: #2563eb; --cx-shadow: 0 10px 30px rgba(15, 23, 42, 0.08); color-scheme: light; } [data-cx-variant="marketing"] { --cx-bg: #0a1620; --cx-bg-elevated: #0e1f2e; --cx-panel: rgba(15, 35, 55, 0.7); --cx-panel-2: rgba(20, 45, 70, 0.6); --cx-text: #f0f7fc; --cx-muted: #8bb8d9; --cx-accent: #3d8bfd; --cx-accent-soft: rgba(61, 139, 253, 0.18); --cx-accent-hover: #6aa8ff; --cx-ok: #22c55e; --cx-bad: #ef4444; --cx-warn: #f59e0b; --cx-border: rgba(100, 160, 210, 0.25); --cx-border-strong: rgba(100, 160, 210, 0.4); --cx-focus: #7eb6ff; --cx-shadow: 0 20px 50px rgba(0, 20, 40, 0.5); --cx-font-sans: var(--cx-font-body); color-scheme: dark; } [data-cx-variant="desk"] { --cx-bg: #15212a; --cx-bg-elevated: #1e2d3a; --cx-panel: #253a4b; --cx-panel-2: #3f586e; --cx-text: #e8f1f8; --cx-muted: #b8e0f6; --cx-accent: #7fb1d6; --cx-accent-soft: rgba(127, 177, 214, 0.16); --cx-accent-hover: #a3c8e6; --cx-ok: #34d399; --cx-bad: #f87171; --cx-warn: #fbbf24; --cx-border: #4d7696; --cx-border-strong: #5a8aab; --cx-focus: #7fb1d6; --cx-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); color-scheme: dark; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }