/* |-------------------------------------------------------------------------- | FortuneSpace Theme V3 Core |-------------------------------------------------------------------------- | | Global semantic appearance foundation. | | Midnight = FortuneSpace dark appearance. | Pearl = FortuneSpace light appearance. | | Phase 1A defines the system without changing the current visual | presentation. Components will progressively migrate from hard-coded | colors to these semantic tokens. | */ /* ================================================================ MIDNIGHT — DEFAULT / CURRENT FORTUNESPACE ================================================================ */ :root, html[data-fs-theme="dark"] { color-scheme: dark; /* Canvas / surfaces */ --fs-canvas: #0a0f1d; --fs-surface: #121826; --fs-surface-raised: #1e293b; --fs-surface-soft: #182131; --fs-surface-subtle: rgba(148, 163, 184, 0.08); --fs-overlay: rgba(2, 6, 23, 0.72); /* Typography */ --fs-text: #f8fafc; --fs-text-secondary: #cbd5e1; --fs-text-muted: #94a3b8; --fs-text-subtle: #64748b; --fs-text-inverse: #17211a; /* Borders */ --fs-border: rgba(148, 163, 184, 0.16); --fs-border-strong: rgba(148, 163, 184, 0.24); --fs-border-emphasis: rgba(148, 163, 184, 0.32); /* FortuneSpace identity */ --fs-brand: #22c55e; --fs-brand-hover: #16a34a; --fs-brand-active: #15803d; --fs-brand-contrast: #052e16; --fs-brand-soft: rgba(34, 197, 94, 0.14); --fs-brand-softer: rgba(34, 197, 94, 0.08); --fs-brand-text: #86efac; /* Interactive */ --fs-link: #86efac; --fs-link-hover: #bbf7d0; --fs-focus: 0 0 0 3px rgba(34, 197, 94, 0.20); /* Semantic states */ --fs-success: #22c55e; --fs-success-soft: rgba(34, 197, 94, 0.12); --fs-warning: #f59e0b; --fs-warning-soft: rgba(245, 158, 11, 0.12); --fs-danger: #ef4444; --fs-danger-soft: rgba(239, 68, 68, 0.12); --fs-info: #38bdf8; --fs-info-soft: rgba(56, 189, 248, 0.12); /* Shadows */ --fs-shadow-sm: 0 4px 14px rgba(2, 6, 23, 0.16); --fs-shadow-md: 0 12px 30px rgba(2, 6, 23, 0.24); --fs-shadow-lg: 0 20px 46px rgba(2, 6, 23, 0.34); /* Radius system */ --fs-radius-sm: 10px; --fs-radius-md: 14px; --fs-radius-lg: 18px; --fs-radius-xl: 24px; /* Motion */ --fs-motion-fast: 140ms; --fs-motion-normal: 200ms; --fs-motion-slow: 280ms; /* |-------------------------------------------------------------------------- | V2 compatibility bridge |-------------------------------------------------------------------------- | | Existing V2 selectors continue working while components migrate. | */ --fs-v2-canvas: var(--fs-canvas); --fs-v2-surface: var(--fs-surface); --fs-v2-elevated: var(--fs-surface-raised); --fs-v2-text: var(--fs-text); --fs-v2-text-secondary: var(--fs-text-secondary); --fs-v2-text-muted: var(--fs-text-muted); --fs-v2-text-subtle: var(--fs-text-subtle); --fs-v2-green: var(--fs-brand); --fs-v2-green-hover: var(--fs-brand-hover); --fs-v2-green-pale: var(--fs-brand-text); --fs-v2-border: var(--fs-border); --fs-v2-border-hover: var(--fs-border-strong); } /* ================================================================ PEARL — FORTUNESPACE LIGHT APPEARANCE ================================================================ */ html[data-fs-theme="light"] { color-scheme: light; /* * Pearl intentionally avoids a harsh pure-white canvas. * White is reserved for cards and raised surfaces. */ --fs-canvas: #f6f8f6; --fs-surface: #ffffff; --fs-surface-raised: #eef3ef; --fs-surface-soft: #f2f5f3; --fs-surface-subtle: rgba(23, 33, 26, 0.045); --fs-overlay: rgba(23, 33, 26, 0.46); /* Deep natural ink rather than absolute black */ --fs-text: #17211a; --fs-text-secondary: #58665d; --fs-text-muted: #78857d; --fs-text-subtle: #939e97; --fs-text-inverse: #f8fafc; /* Mineral borders */ --fs-border: rgba(23, 33, 26, 0.10); --fs-border-strong: rgba(23, 33, 26, 0.16); --fs-border-emphasis: rgba(23, 33, 26, 0.24); /* * Pearl uses a slightly deeper Fortune green so text/buttons * maintain excellent contrast on bright backgrounds. */ --fs-brand: #168f49; --fs-brand-hover: #117a3e; --fs-brand-active: #0d6835; --fs-brand-contrast: #ffffff; --fs-brand-soft: #e6f5eb; --fs-brand-softer: #f0faf3; --fs-brand-text: #11733b; --fs-link: #117a3e; --fs-link-hover: #0b6232; --fs-focus: 0 0 0 3px rgba(22, 143, 73, 0.17); --fs-success: #168f49; --fs-success-soft: #e7f6ec; --fs-warning: #b76b00; --fs-warning-soft: #fff5df; --fs-danger: #c93636; --fs-danger-soft: #fff0f0; --fs-info: #176b99; --fs-info-soft: #edf7fc; /* * Light-mode shadows should be soft enough that cards appear * elevated without looking like floating gray boxes. */ --fs-shadow-sm: 0 2px 8px rgba(23, 33, 26, 0.045); --fs-shadow-md: 0 8px 24px rgba(23, 33, 26, 0.065); --fs-shadow-lg: 0 18px 42px rgba(23, 33, 26, 0.085); --fs-radius-sm: 10px; --fs-radius-md: 14px; --fs-radius-lg: 18px; --fs-radius-xl: 24px; --fs-motion-fast: 140ms; --fs-motion-normal: 200ms; --fs-motion-slow: 280ms; /* * Existing V2 variable consumers automatically become compatible * with Pearl once their selectors are migrated in later phases. */ --fs-v2-canvas: var(--fs-canvas); --fs-v2-surface: var(--fs-surface); --fs-v2-elevated: var(--fs-surface-raised); --fs-v2-text: var(--fs-text); --fs-v2-text-secondary: var(--fs-text-secondary); --fs-v2-text-muted: var(--fs-text-muted); --fs-v2-text-subtle: var(--fs-text-subtle); --fs-v2-green: var(--fs-brand); --fs-v2-green-hover: var(--fs-brand-hover); --fs-v2-green-pale: var(--fs-brand-text); --fs-v2-border: var(--fs-border); --fs-v2-border-hover: var(--fs-border-strong); } /* ================================================================ SHARED THEME BEHAVIOUR ================================================================ */ html { background: var(--fs-canvas); } /* * Smooth component transitions will be enabled progressively. * Avoid global transition:all because it causes poor performance * and unwanted animations. */ @media (prefers-reduced-motion: reduce) { :root { --fs-motion-fast: 0ms; --fs-motion-normal: 0ms; --fs-motion-slow: 0ms; } }