/* Canonical Color System — 9Bit Studios Enterprise Triple-brand theme: 9Bit Studios · Oksana · Dewdrop Source of truth for all color, glass, depth, and glow variables. Typography lives in typography.css (canonical-typography.css). Brand layers activate via data-brand attribute on . */ /* ═══════════════════════════════════════════════════ 1. FOUNDATION — shared across all brands ═══════════════════════════════════════════════════ */ :root { /* ── Backgrounds ── */ --bg-void: #010005; --bg-nebula: #0A0621; --bg-twilight: #131A36; --bg-midnight: #1E1F5C; --bg-eggplant: #331F4A; /* ── Neutrals (RunSmart foundation) ── */ --neutral-black: #000000; --neutral-dark: #0A0A0A; --neutral-surface: #151515; --border-subtle: #1A1A1A; --border-medium: #2A2A2A; --border-strong: #3A3A3A; /* ── Text hierarchy (Apple NSColor labelColor, dark mode) ── */ --text-primary: rgba(255, 255, 255, 0.85); --text-secondary: rgba(255, 255, 255, 0.55); --text-tertiary: rgba(255, 255, 255, 0.25); --text-quaternary: rgba(255, 255, 255, 0.10); --text-placeholder: rgba(255, 255, 255, 0.25); --text-vibrant-primary: #E5E5E5; --text-vibrant-secondary: #7C7C7C; /* ── Semantic / Status (HIG) ── */ --success: #34C759; --warning: #FF9500; --error: #FF3B30; --info: #007AFF; --status-critical: #EF4444; --status-warning: #F59E0B; --status-success: #10B981; --status-info: #3B82F6; /* ── Medals / gamification ── */ --gold: #FFD60A; --gold-end: #FF9F0A; --silver: #E5E5EA; --silver-dk: #AEAEB2; --bronze: #FF9F0A; /* ── AR / spatial computing — shared across ALL brands ── */ --ar-cyan: #5AC8FA; /* ── Quantum canonical accents ── */ --quantum-violet: #7B00FF; --quantum-violet-deep: #6E00FF; --rose-energy: #BF4080; --quantum-pulse-pink: #FF2D55; /* ── Heritage green canonical (Dewdrop spectrum) ── */ --heritage-dark: #1B3D1A; --heritage-core: #2C5F2D; --heritage-light: #3D8B40; --heritage-pixel: #3DFF74; /* ── Complementary ── */ --cobalt-blue: #0047AB; --silver-gray: #C0C0C0; /* ═══════════════════════════════════════════════════ 2. GLASS SYSTEM — shared foundation ═══════════════════════════════════════════════════ */ --glass-blur: blur(20px); --glass-blur-heavy: blur(32px); --glass-blur-light: blur(10px); --glass-saturate: saturate(160%); --glass-bg: rgba(10, 6, 33, 0.60); --glass-bg-deep: rgba(10, 6, 33, 0.82); --glass-bg-subtle: rgba(10, 6, 33, 0.40); --glass-border: rgba(90, 200, 250, 0.12); --glass-border-hi: rgba(90, 200, 250, 0.28); /* ── Quantum depth layers ── */ --depth-surface: 0.20; --depth-mid: 0.45; --depth-deep: 0.75; /* ── Quantum opacity states ── */ --opacity-ethereal: 0.15; --opacity-emerging: 0.65; --opacity-stabilized: 0.90; /* ═══════════════════════════════════════════════════ 3. BRAND SEMANTIC VARIABLES — default (Oksana) Overridden per data-brand. Components reference these --brand-* variables, never raw hex. ═══════════════════════════════════════════════════ */ --brand-bg: var(--bg-nebula); --brand-bg-elevated: var(--bg-twilight); --brand-accent: #613FE7; --brand-accent-bright: #7B3FFF; --brand-accent-dim: rgba(97, 63, 231, 0.15); --brand-secondary: var(--ar-cyan); --brand-secondary-dim: rgba(90, 200, 250, 0.12); --brand-tertiary: var(--rose-energy); --brand-gradient: linear-gradient(135deg, #0A0621 0%, #131A36 40%, #331F4A 100%); --brand-glass-bg: rgba(10, 6, 33, 0.60); --brand-glass-border: rgba(90, 200, 250, 0.20); --brand-glow: rgba(97, 63, 231, 0.30); --brand-nav-active: var(--ar-cyan); --brand-action: var(--brand-accent); --brand-action-hover: var(--brand-accent-bright); --brand-aurora-1: rgba(97, 63, 231, 0.15); --brand-aurora-2: rgba(90, 200, 250, 0.08); } /* ═══════════════════════════════════════════════════ 4. BRAND: 9BIT STUDIOS Purple-fuschia-tangerine spectrum on dark aurora. Primary action: #007AFF (Apple system blue). ═══════════════════════════════════════════════════ */ [data-brand="9bit"] { --brand-bg: var(--neutral-black); --brand-bg-elevated: var(--neutral-dark); --brand-accent: var(--quantum-violet); --brand-accent-bright: #8C45FF; --brand-accent-dim: rgba(123, 0, 255, 0.15); --brand-secondary: #EC4899; --brand-secondary-dim: rgba(236, 72, 153, 0.12); --brand-tertiary: #FF9F0A; --brand-gradient: linear-gradient(135deg, #000000 0%, #0A0A0A 50%, #151515 100%); --brand-glass-bg: rgba(0, 0, 0, 0.60); --brand-glass-border: rgba(123, 0, 255, 0.20); --brand-glow: rgba(123, 0, 255, 0.30); --brand-nav-active: var(--quantum-violet); --brand-action: #007AFF; --brand-action-hover: #409CFF; --brand-aurora-1: rgba(123, 0, 255, 0.15); --brand-aurora-2: rgba(236, 72, 153, 0.06); /* 9Bit vibrant spectrum */ --9bit-violet: #7B00FF; --9bit-violet-deep: #6E00FF; --9bit-apple-purple: #BF5AF2; --9bit-indigo: #3B39EC; --9bit-coral: #FF6B6B; --9bit-fuschia: #EC4899; --9bit-neon-pink: #FF2D92; --9bit-deep-fuschia: #D0196B; --9bit-apple-red: #FF375F; --9bit-hot-pink: #FF66E3; --9bit-vivid-red: #FF4F52; --9bit-tangerine: #FF9F0A; } /* ═══════════════════════════════════════════════════ 5. BRAND: OKSANA Nebula indigo + violet + cyan on deep-space glass. Already the :root default; this block is explicit for clarity and forward-compatibility. ═══════════════════════════════════════════════════ */ [data-brand="oksana"] { --brand-bg: var(--bg-nebula); --brand-bg-elevated: var(--bg-twilight); --brand-accent: #613FE7; --brand-accent-bright: #7B3FFF; --brand-accent-dim: rgba(97, 63, 231, 0.15); --brand-secondary: var(--ar-cyan); --brand-secondary-dim: rgba(90, 200, 250, 0.12); --brand-tertiary: var(--rose-energy); --brand-gradient: linear-gradient(135deg, #0A0621 0%, #131A36 40%, #331F4A 100%); --brand-glass-bg: rgba(10, 6, 33, 0.60); --brand-glass-border: rgba(90, 200, 250, 0.20); --brand-glow: rgba(97, 63, 231, 0.30); --brand-nav-active: var(--ar-cyan); --brand-action: #613FE7; --brand-action-hover: #7B3FFF; --brand-aurora-1: rgba(97, 63, 231, 0.15); --brand-aurora-2: rgba(90, 200, 250, 0.08); } /* ═══════════════════════════════════════════════════ 6. BRAND: DEWDROP Heritage green spectrum on deep indigo glass. Quantum states: dark → core → light → pixel. ═══════════════════════════════════════════════════ */ [data-brand="dewdrop"] { --brand-bg: var(--bg-nebula); --brand-bg-elevated: #0D1B14; --brand-accent: var(--heritage-light); --brand-accent-bright: var(--heritage-pixel); --brand-accent-dim: rgba(61, 139, 64, 0.15); --brand-secondary: var(--heritage-core); --brand-secondary-dim: rgba(44, 95, 45, 0.12); --brand-tertiary: var(--cobalt-blue); --brand-gradient: linear-gradient(135deg, #0A0621 0%, #0D1B14 40%, #1A3328 100%); --brand-glass-bg: rgba(27, 61, 26, 0.15); --brand-glass-border: rgba(61, 255, 116, 0.12); --brand-glow: rgba(61, 139, 64, 0.30); --brand-nav-active: var(--heritage-light); --brand-action: var(--heritage-light); --brand-action-hover: var(--heritage-pixel); --brand-aurora-1: rgba(44, 95, 45, 0.12); --brand-aurora-2: rgba(61, 255, 116, 0.06); /* Dewdrop light-mode tokens (app UI) */ --dew-forest: #2D6A4F; --dew-sage: #52B788; --dew-terra: #BC4749; --dew-cream: #FEFAE0; --dew-charcoal: #2C3E2D; --dew-muted: #6B7C6D; --dew-healthy: #D8F3DC; --dew-due-soon: #FFE8A3; --dew-overdue: #FFDAD6; } /* ═══════════════════════════════════════════════════ 7. GLASS SURFACES — brand-aware classes ═══════════════════════════════════════════════════ */ .glass { background: var(--brand-glass-bg); backdrop-filter: var(--glass-blur) var(--glass-saturate); -webkit-backdrop-filter: var(--glass-blur) var(--glass-saturate); border: 1px solid var(--brand-glass-border); } .glass-subtle { background: var(--glass-bg-subtle); backdrop-filter: var(--glass-blur-light); -webkit-backdrop-filter: var(--glass-blur-light); border: 1px solid var(--brand-glass-border); } .glass-deep { background: var(--glass-bg-deep); backdrop-filter: var(--glass-blur-heavy); -webkit-backdrop-filter: var(--glass-blur-heavy); border: 1px solid var(--brand-glass-border); } .glass-elevated { background: var(--brand-glass-bg); backdrop-filter: var(--glass-blur) var(--glass-saturate); -webkit-backdrop-filter: var(--glass-blur) var(--glass-saturate); border: 1px solid var(--brand-glass-border); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } /* ═══════════════════════════════════════════════════ 8. QUANTUM DEPTH — layered surfaces ═══════════════════════════════════════════════════ */ .depth-surface { background: color-mix(in srgb, var(--brand-accent) calc(var(--depth-surface) * 100%), transparent); } .depth-mid { background: color-mix(in srgb, var(--brand-accent) calc(var(--depth-mid) * 100%), transparent); } .depth-deep { background: color-mix(in srgb, var(--brand-accent) calc(var(--depth-deep) * 100%), transparent); } /* ═══════════════════════════════════════════════════ 9. QUANTUM OPACITY STATES ═══════════════════════════════════════════════════ */ .opacity-ethereal { background: color-mix(in srgb, var(--brand-accent) calc(var(--opacity-ethereal) * 100%), transparent); } .opacity-emerging { background: color-mix(in srgb, var(--brand-accent) calc(var(--opacity-emerging) * 100%), transparent); } .opacity-stabilized { background: color-mix(in srgb, var(--brand-accent) calc(var(--opacity-stabilized) * 100%), transparent); } /* ═══════════════════════════════════════════════════ 10. GLOW EFFECTS — brand-tuned halos ═══════════════════════════════════════════════════ */ .glow-sm { box-shadow: 0 0 20px var(--brand-glow); } .glow-md { box-shadow: 0 0 40px var(--brand-glow); } .glow-lg { box-shadow: 0 0 60px var(--brand-glow), 0 0 120px var(--brand-glow); } .glow-accent { box-shadow: 0 0 20px color-mix(in srgb, var(--brand-accent) 40%, transparent); } .glow-ar { box-shadow: 0 0 20px rgba(90, 200, 250, 0.30); } /* ═══════════════════════════════════════════════════ 11. DARK AURORA BACKGROUND — 9Bit Studios Oil-slick gradient mesh, animated. Applied automatically when data-brand="9bit". ═══════════════════════════════════════════════════ */ [data-brand="9bit"] body, body.aurora { background: var(--neutral-black); background-image: radial-gradient(ellipse at 20% 30%, var(--brand-aurora-1) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, var(--brand-aurora-2) 0%, transparent 50%), radial-gradient(ellipse at 50% 100%, var(--brand-aurora-1) 0%, transparent 60%); background-attachment: fixed; background-size: 200% 200%; animation: aurora-shift 20s ease-in-out infinite; } @keyframes aurora-shift { 0%, 100% { background-position: 0% 0%, 100% 100%, 50% 100%; } 25% { background-position: 10% 10%, 90% 90%, 60% 90%; } 50% { background-position: 20% 5%, 80% 95%, 40% 95%; } 75% { background-position: 5% 15%, 95% 85%, 55% 85%; } } /* ═══════════════════════════════════════════════════ 12. QUANTUM STATE CLASSES — heritage / transitional / quantum / superposition ═══════════════════════════════════════════════════ */ .state-heritage { --state-primary: var(--heritage-core); --state-secondary: var(--heritage-dark); --state-accent: var(--heritage-pixel); } .state-transitional { --state-primary: var(--bg-eggplant); --state-secondary: var(--bg-midnight); --state-accent: var(--ar-cyan); } .state-quantum { --state-primary: var(--quantum-violet); --state-secondary: var(--bg-eggplant); --state-accent: var(--rose-energy); } .state-superposition { --state-primary: var(--quantum-violet); --state-secondary: var(--ar-cyan); --state-accent: var(--quantum-pulse-pink); } /* ═══════════════════════════════════════════════════ 13. TEXT COLOR UTILITIES ═══════════════════════════════════════════════════ */ .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-tertiary { color: var(--text-tertiary); } .text-quaternary { color: var(--text-quaternary); } .text-accent { color: var(--brand-accent); } .text-accent-bright { color: var(--brand-accent-bright); } .text-action { color: var(--brand-action); } .text-ar { color: var(--ar-cyan); } .text-success { color: var(--success); } .text-warning { color: var(--warning); } .text-error { color: var(--error); } .text-info { color: var(--info); } .text-gradient-brand { background: linear-gradient(135deg, var(--brand-accent), var(--brand-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ═══════════════════════════════════════════════════ 14. BACKGROUND UTILITIES ═══════════════════════════════════════════════════ */ .bg-brand { background: var(--brand-bg); } .bg-elevated { background: var(--brand-bg-elevated); } .bg-gradient { background: var(--brand-gradient); } .bg-accent { background: var(--brand-accent); } .bg-accent-dim { background: var(--brand-accent-dim); } .bg-action { background: var(--brand-action); } .bg-surface { background: var(--neutral-surface); } .bg-void { background: var(--bg-void); } .bg-nebula { background: var(--bg-nebula); } /* ═══════════════════════════════════════════════════ 15. BORDER UTILITIES ═══════════════════════════════════════════════════ */ .border-subtle { border-color: var(--border-subtle); } .border-medium { border-color: var(--border-medium); } .border-strong { border-color: var(--border-strong); } .border-accent { border-color: var(--brand-accent); } .border-glass { border-color: var(--brand-glass-border); } /* ═══════════════════════════════════════════════════ 16. ACCENT PILLS / BADGES — brand-aware ═══════════════════════════════════════════════════ */ .pill-accent { background: var(--brand-accent-dim); color: var(--brand-accent); border: 1px solid color-mix(in srgb, var(--brand-accent) 20%, transparent); } .pill-secondary { background: var(--brand-secondary-dim); color: var(--brand-secondary); border: 1px solid color-mix(in srgb, var(--brand-secondary) 20%, transparent); } .pill-ar { background: rgba(90, 200, 250, 0.12); color: var(--ar-cyan); border: 1px solid rgba(90, 200, 250, 0.20); } .pill-success { background: rgba(52, 199, 89, 0.12); color: var(--success); border: 1px solid rgba(52, 199, 89, 0.20); } .pill-warning { background: rgba(255, 149, 0, 0.12); color: var(--warning); border: 1px solid rgba(255, 149, 0, 0.20); } .pill-error { background: rgba(255, 59, 48, 0.12); color: var(--error); border: 1px solid rgba(255, 59, 48, 0.20); } /* ═══════════════════════════════════════════════════ 17. HERITAGE GREEN ENERGY GRADIENTS (Dewdrop) ═══════════════════════════════════════════════════ */ .gradient-heritage-spectrum { background: linear-gradient(90deg, var(--heritage-dark), var(--heritage-core), var(--heritage-light), var(--heritage-pixel)); } .gradient-heritage-energy { background: linear-gradient(135deg, var(--heritage-core), var(--heritage-pixel)); } .gradient-heritage-state { background: linear-gradient(90deg, var(--heritage-dark) 0%, var(--heritage-core) 33%, var(--heritage-light) 66%, var(--heritage-pixel) 100%); } .gradient-complementary { background: linear-gradient(90deg, var(--heritage-core) 0%, var(--cobalt-blue) 50%, var(--silver-gray) 100%); } /* ═══════════════════════════════════════════════════ 18. 9BIT SPECTRUM GRADIENTS ═══════════════════════════════════════════════════ */ .gradient-9bit-spectrum { background: linear-gradient(135deg, #7B00FF, #BF5AF2, #EC4899, #FF375F, #FF9F0A); } .gradient-9bit-aurora { background: linear-gradient(135deg, #7B00FF 0%, #3B39EC 30%, #EC4899 60%, #FF9F0A 100%); } /* ═══════════════════════════════════════════════════ 19. OKSANA GRADIENTS ═══════════════════════════════════════════════════ */ .gradient-oksana-spectrum { background: linear-gradient(135deg, #613FE7, #7B3FFF, #5AC8FA); } .gradient-oksana-vivid { background: linear-gradient(135deg, #FF9F0A 0%, #FE575E 24%, #CB30E0 50%, #7B00FF 68%, #3B39EC 86%); }