/* ShaanJaanSoni.com — Design Tokens Source of truth: "ShaanJaanSoni.com Unified Design System and Game Transformation Standard" — Part I (§5 Visual Identity, §6 Typography/Shape/ Motion), Part IV §23 (CSS contract), Appendix A (token reference). Every shared surface and every transformed game must consume these semantic tokens rather than raw hex values or arbitrary spacing (§23, Token governance). Game-world art may keep its own palette; only shared chrome (menus, HUD containers, shell controls, overlays) must map here. Theme: dark ("Deep Ocean") is the default — this matches the existing catalog, which is uniformly dark-themed, and the brand character's "ocean-inspired... deep blues" identity (§2). [data-theme="light"] on opts into the light theme described in §23's :root block. This is a documented adaptation of §23, which shows light as the bare :root and dark behind [data-theme="dark"] — inverted here for the reasons above. */ :root { /* ---- Color: Deep Ocean (dark, default) — §5 Color roles ---- */ --sjs-color-bg: #071824; /* Deep Ocean — canvas / shell bg */ --sjs-color-surface: #0D2433; /* Ocean Surface — cards, bars, panels */ --sjs-color-surface-raised: #123244; /* Raised Surface — hover / nested layers */ --sjs-color-text: #F4FBFF; /* Foam — primary text on dark */ --sjs-color-text-muted: #AFC6D4; /* Mist — secondary text / icons */ --sjs-color-primary: #27D3C2; /* Reef Aqua — primary action / active */ --sjs-color-primary-strong: #42E4D2; --sjs-color-secondary: #54A7FF; /* Current Blue — secondary action / links */ --sjs-color-danger: #FF6B6B; /* Coral — danger / loss (not decoration) */ --sjs-color-warning: #FFC857; /* Sun Gold — best score / reward, sparing */ --sjs-color-success: #27D3C2; --sjs-color-focus: #6FE8DC; --sjs-color-border: rgba(244, 251, 255, 0.10); --sjs-color-border-strong: rgba(244, 251, 255, 0.20); --sjs-overlay-scrim: rgba(3, 10, 16, 0.72); --sjs-color-on-primary: #04211E; /* text placed on aqua/gold fills */ /* ---- Typography — §6 ---- */ --sjs-font-display: "Inter Display", "Inter", system-ui, "Segoe UI", Arial, sans-serif; --sjs-font-ui: "Inter", system-ui, "Segoe UI", Arial, sans-serif; --sjs-font-numeric: "Inter", system-ui, "Segoe UI", Arial, sans-serif; --sjs-text-caption: 0.75rem; /* 12px */ --sjs-text-compact: 0.875rem; /* 14px */ --sjs-text-body: 1rem; /* 16px */ --sjs-text-prominent: 1.125rem; /* 18px */ --sjs-text-section: 1.5rem; /* 24px */ --sjs-text-feature: clamp(2rem, 4vw, 3rem); /* 32–48px, responsive */ /* ---- Spacing — Appendix A ---- */ --sjs-space-1: 4px; --sjs-space-2: 8px; --sjs-space-3: 12px; --sjs-space-4: 16px; --sjs-space-6: 24px; --sjs-space-8: 32px; --sjs-space-12: 48px; --sjs-space-16: 64px; /* ---- Shape — §6, Appendix A ---- */ --sjs-radius-sm: 8px; --sjs-radius-md: 12px; --sjs-radius-lg: 16px; --sjs-radius-xl: 24px; --sjs-radius-pill: 999px; /* ---- Control sizing — Appendix A ---- */ --sjs-control-compact: 36px; --sjs-control-standard: 44px; --sjs-control-prominent: 52px; /* ---- Layout ---- */ --sjs-content-max: 1440px; /* ---- Motion — §6, Appendix A ---- */ --sjs-motion-micro: 140ms; --sjs-motion-ui: 220ms; --sjs-motion-celebration: 700ms; --sjs-ease-standard: cubic-bezier(.2, .8, .2, 1); /* ---- Elevation ---- */ --sjs-shadow-1: 0 1px 2px rgba(3, 12, 18, 0.28); --sjs-shadow-2: 0 20px 40px -12px rgba(3, 12, 18, 0.55); /* ---- Z-index tiers — Appendix A ---- */ --sjs-z-base: 0; --sjs-z-sticky: 10; --sjs-z-dropdown: 20; --sjs-z-overlay: 30; --sjs-z-modal: 40; --sjs-z-toast: 50; /* ---- Focus — Appendix A ---- */ --sjs-focus-ring: 0 0 0 3px var(--sjs-color-focus); } [data-theme="light"] { --sjs-color-bg: #F6FAFC; /* Light Canvas */ --sjs-color-surface: #FFFFFF; --sjs-color-surface-raised: #EDF5F8; --sjs-color-text: #10212C; --sjs-color-text-muted: #587381; --sjs-color-primary: #16879B; --sjs-color-primary-strong: #0B6672; --sjs-color-secondary: #2F78C4; --sjs-color-danger: #D9485F; --sjs-color-warning: #A86700; --sjs-color-success: #198754; --sjs-color-focus: #16879B; --sjs-color-border: rgba(16, 33, 44, 0.10); --sjs-color-border-strong: rgba(16, 33, 44, 0.20); --sjs-overlay-scrim: rgba(16, 33, 44, 0.45); --sjs-color-on-primary: #FFFFFF; } @media (prefers-reduced-motion: reduce) { :root { --sjs-motion-micro: 0ms; --sjs-motion-ui: 0ms; --sjs-motion-celebration: 0ms; } }