/* ═══════════════════════════════════════════════════════════════ IXR-Galaxy Design Tokens v0.9.0 The unified brand system for the Nine Ruby universe. Planet Ruby — where everything converges at 9. Usage: Modes: - Default (dark/world) — cosmic anime backgrounds, rich colors - .galaxy-dashboard — clean minimal UI, same palette - .galaxy-light — light mode variant ═══════════════════════════════════════════════════════════════ */ /* ─── Google Fonts ─────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@300;400;500;600&display=swap'); /* ═══════════════════════════════════════════════════════════════ §1 — COLOR SYSTEM: Planet Ruby Palette The universe of Planet Ruby: - Void: The deep space background - Ruby: The gemstone heart — used sparingly, maximum impact - Nebula: Teal/cyan cosmic glow — tech, links, interactive - Ember: Amber/gold firefly warmth — notifications, active states - Verdant: Emerald green fields — success, growth, nature - Horizon: Soft blue atmospheric edge — secondary, informational - Stardust: White/silver — text, borders, subtle elements ═══════════════════════════════════════════════════════════════ */ :root { /* ─── Void (Backgrounds) ─────────────────────────────────── */ --void-deepest: #050D18; /* The abyss — darkest background */ --void-deep: #0A1628; /* Night sky — primary background */ --void-mid: #0F1F38; /* Elevated surfaces — cards, panels */ --void-light: #162A4A; /* Hover states, subtle elevation */ --void-lighter: #1E3A5C; /* Active states, selected items */ --void-border: #1A3050; /* Subtle borders */ --void-border-lit: #264060; /* Visible borders */ /* ─── Ruby (Primary Brand — The Gemstone) ────────────────── */ --ruby-950: #3A0812; /* Deepest ruby — barely visible glow */ --ruby-900: #5C0E1C; /* Dark ruby background */ --ruby-800: #8A1530; /* Deep ruby */ --ruby-700: #A51832; /* Ruby shadow */ --ruby: #C41A3B; /* THE Ruby — primary brand color */ --ruby-500: #D42E4F; /* Ruby hover */ --ruby-400: #E8456A; /* Ruby light */ --ruby-300: #F07088; /* Ruby soft */ --ruby-200: #F5A0B0; /* Ruby pale */ --ruby-100: #FCDCE2; /* Ruby whisper */ --ruby-glow: rgba(196, 26, 59, 0.20); /* Ruby ambient glow */ --ruby-glow-strong: rgba(196, 26, 59, 0.40); /* Ruby intense */ /* ─── Nebula (Teal/Cyan — Tech, Interactive) ─────────────── */ --nebula-900: #0A3D3D; --nebula-800: #0E5C5A; --nebula-700: #148080; --nebula: #00D4AA; /* Primary nebula — links, tech glow */ --nebula-400: #2CE8C8; /* Nebula bright */ --nebula-300: #5EEDDA; /* Nebula light */ --nebula-200: #A0F5EA; /* Nebula pale */ --nebula-100: #D4FBF5; /* Nebula whisper */ --nebula-glow: rgba(0, 212, 170, 0.15); /* Nebula ambient */ --nebula-glow-strong: rgba(0, 212, 170, 0.30); /* ─── Ember (Amber/Gold — Warmth, Notifications) ─────────── */ --ember-900: #3D2A0A; --ember-800: #5C3E0E; --ember-700: #806014; --ember: #E8A838; /* Primary ember — firefly gold */ --ember-400: #FFB84D; /* Ember bright */ --ember-300: #FFCC70; /* Ember light */ --ember-200: #FFE0A0; /* Ember pale */ --ember-100: #FFF2D4; /* Ember whisper */ --ember-glow: rgba(232, 168, 56, 0.15); --ember-glow-strong: rgba(232, 168, 56, 0.30); /* ─── Verdant (Green — Growth, Success, Nature) ──────────── */ --verdant-900: #0A3D1E; --verdant-800: #0E5C2D; --verdant-700: #1A6B3A; --verdant: #2D8B4E; /* Primary verdant — field green */ --verdant-400: #3DA864; /* Verdant bright */ --verdant-300: #5EC882; /* Verdant light */ --verdant-200: #A0E8B8; /* Verdant pale */ --verdant-100: #D4F5E0; /* Verdant whisper */ --verdant-glow: rgba(45, 139, 78, 0.15); /* ─── Horizon (Blue — Atmosphere, Informational) ─────────── */ --horizon-900: #0A2850; --horizon-800: #143870; --horizon-700: #1E4A8A; --horizon: #4A9FE8; /* Primary horizon — sky blue */ --horizon-400: #6AB5F0; /* Horizon bright */ --horizon-300: #8ECAF5; /* Horizon light */ --horizon-200: #B8DEF8; /* Horizon pale */ --horizon-100: #E0F0FC; /* Horizon whisper */ --horizon-glow: rgba(74, 159, 232, 0.15); /* ─── Stardust (Neutrals — Text, Borders) ────────────────── */ --stardust-900: #8A8FA0; /* Muted text, placeholders */ --stardust-800: #A0A5B4; /* Secondary text */ --stardust: #C8CDD8; /* Primary body text */ --stardust-200: #E0E4EA; /* Bright text */ --stardust-100: #F0F2F5; /* Near-white */ --stardust-white:#FAFBFC; /* Pure starlight */ /* ═══════════════════════════════════════════════════════════ §2 — TYPOGRAPHY ═══════════════════════════════════════════════════════════ */ /* ─── Font Families ──────────────────────────────────────── */ --font-display: 'Instrument Serif', Georgia, serif; --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* ─── Font Sizes (modular scale 1.25) ────────────────────── */ --text-xs: 0.75rem; /* 12px — captions, labels */ --text-sm: 0.875rem; /* 14px — small body, hints */ --text-base: 1rem; /* 16px — body text */ --text-md: 1.125rem; /* 18px — lead text */ --text-lg: 1.25rem; /* 20px — large body */ --text-xl: 1.5rem; /* 24px — section headers */ --text-2xl: 1.875rem; /* 30px — page headers */ --text-3xl: 2.25rem; /* 36px — hero subheading */ --text-4xl: 3rem; /* 48px — hero heading */ --text-5xl: 3.75rem; /* 60px — display text */ --text-6xl: 4.5rem; /* 72px — massive display */ /* ─── Font Weights ───────────────────────────────────────── */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ─── Line Heights ───────────────────────────────────────── */ --leading-tight: 1.2; /* Headings */ --leading-snug: 1.4; /* Subheadings */ --leading-normal: 1.6; /* Body text */ --leading-relaxed: 1.8; /* Long-form reading */ /* ─── Letter Spacing ─────────────────────────────────────── */ --tracking-tight: -0.02em; /* Display text */ --tracking-normal: 0; /* Body text */ --tracking-wide: 0.02em; /* Labels, small caps */ --tracking-wider: 0.05em; /* All-caps text */ --tracking-widest: 0.1em; /* Spacious caps */ /* ═══════════════════════════════════════════════════════════ §3 — SPACING (base 4px grid) ═══════════════════════════════════════════════════════════ */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ═══════════════════════════════════════════════════════════ §4 — BORDERS & RADII ═══════════════════════════════════════════════════════════ */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 9999px; /* ═══════════════════════════════════════════════════════════ §5 — SHADOWS & GLOWS ═══════════════════════════════════════════════════════════ */ --shadow-sm: 0 1px 3px rgba(5, 13, 24, 0.4); --shadow-md: 0 4px 12px rgba(5, 13, 24, 0.5); --shadow-lg: 0 8px 30px rgba(5, 13, 24, 0.6); --shadow-xl: 0 16px 50px rgba(5, 13, 24, 0.7); --glow-ruby: 0 0 20px var(--ruby-glow), 0 0 60px var(--ruby-glow); --glow-ruby-lg: 0 0 30px var(--ruby-glow-strong), 0 0 80px var(--ruby-glow); --glow-nebula: 0 0 20px var(--nebula-glow), 0 0 60px var(--nebula-glow); --glow-nebula-lg:0 0 30px var(--nebula-glow-strong), 0 0 80px var(--nebula-glow); --glow-ember: 0 0 20px var(--ember-glow), 0 0 60px var(--ember-glow); --glow-ember-lg: 0 0 30px var(--ember-glow-strong), 0 0 80px var(--ember-glow); /* ═══════════════════════════════════════════════════════════ §6 — TRANSITIONS & ANIMATION ═══════════════════════════════════════════════════════════ */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 100ms; --duration-normal: 200ms; --duration-slow: 400ms; --duration-slower: 600ms; /* ═══════════════════════════════════════════════════════════ §7 — LAYOUT ═══════════════════════════════════════════════════════════ */ --max-width-xs: 480px; --max-width-sm: 640px; --max-width-md: 768px; --max-width-lg: 1024px; --max-width-xl: 1200px; --max-width-2xl: 1400px; --max-width-full: 100%; /* ═══════════════════════════════════════════════════════════ §8 — SEMANTIC TOKENS (role-based aliases) ═══════════════════════════════════════════════════════════ */ /* Surfaces */ --surface-base: var(--void-deep); --surface-elevated: var(--void-mid); --surface-overlay: var(--void-light); --surface-selected: var(--void-lighter); /* Text */ --text-primary: var(--stardust-200); --text-secondary: var(--stardust); --text-muted: var(--stardust-900); --text-inverse: var(--void-deepest); /* Interactive */ --interactive: var(--nebula); --interactive-hover: var(--nebula-400); --interactive-active: var(--nebula-300); /* Status */ --status-success: var(--verdant-400); --status-warning: var(--ember); --status-error: var(--ruby); --status-info: var(--horizon); /* Brand */ --brand-primary: var(--ruby); --brand-accent: var(--nebula); --brand-warm: var(--ember); /* Borders */ --border-subtle: var(--void-border); --border-visible: var(--void-border-lit); --border-interactive: var(--nebula-800); } /* ═══════════════════════════════════════════════════════════════ §9 — DASHBOARD MODE Clean minimal UI — same palette, reduced visual noise ═══════════════════════════════════════════════════════════════ */ .galaxy-dashboard { --surface-base: #060E1A; --surface-elevated: #0C1826; --surface-overlay: #121F32; --border-subtle: #162030; --border-visible: #1E2E45; } /* ═══════════════════════════════════════════════════════════════ §10 — LIGHT MODE (for specific contexts) ═══════════════════════════════════════════════════════════════ */ .galaxy-light { --surface-base: #F8F9FB; --surface-elevated: #FFFFFF; --surface-overlay: #F0F2F5; --text-primary: #0A1628; --text-secondary: #3A4560; --text-muted: #7A8498; --border-subtle: #E0E4EA; --border-visible: #C8CDD8; --shadow-sm: 0 1px 3px rgba(10, 22, 40, 0.08); --shadow-md: 0 4px 12px rgba(10, 22, 40, 0.10); --shadow-lg: 0 8px 30px rgba(10, 22, 40, 0.12); } /* ═══════════════════════════════════════════════════════════════ §11 — BASE RESET & DEFAULTS ═══════════════════════════════════════════════════════════════ */ .galaxy, .galaxy-world, .galaxy-dashboard { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-normal); color: var(--text-primary); background-color: var(--surface-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ═══════════════════════════════════════════════════════════════ §12 — UTILITY CLASSES ═══════════════════════════════════════════════════════════════ */ /* Typography */ .galaxy-display { font-family: var(--font-display); letter-spacing: var(--tracking-tight); } .galaxy-body { font-family: var(--font-body); } .galaxy-mono { font-family: var(--font-mono); font-size: 0.9em; } /* Glows */ .glow-ruby { box-shadow: var(--glow-ruby); } .glow-ruby-lg { box-shadow: var(--glow-ruby-lg); } .glow-nebula { box-shadow: var(--glow-nebula); } .glow-nebula-lg { box-shadow: var(--glow-nebula-lg); } .glow-ember { box-shadow: var(--glow-ember); } .glow-ember-lg { box-shadow: var(--glow-ember-lg); } /* Text Colors */ .text-ruby { color: var(--ruby); } .text-nebula { color: var(--nebula); } .text-ember { color: var(--ember); } .text-verdant { color: var(--verdant-400); } .text-horizon { color: var(--horizon); } .text-stardust { color: var(--stardust); } .text-muted { color: var(--text-muted); } /* Backgrounds */ .bg-void { background-color: var(--void-deep); } .bg-ruby { background-color: var(--ruby); } .bg-nebula { background-color: var(--nebula); } .bg-ember { background-color: var(--ember); } .bg-verdant { background-color: var(--verdant); } /* ═══════════════════════════════════════════════════════════════ §13 — KEYFRAME ANIMATIONS ═══════════════════════════════════════════════════════════════ */ @keyframes pulse-ruby { 0%, 100% { box-shadow: 0 0 20px var(--ruby-glow); } 50% { box-shadow: 0 0 40px var(--ruby-glow-strong), 0 0 80px var(--ruby-glow); } } @keyframes pulse-nebula { 0%, 100% { box-shadow: 0 0 20px var(--nebula-glow); } 50% { box-shadow: 0 0 40px var(--nebula-glow-strong), 0 0 80px var(--nebula-glow); } } @keyframes firefly { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } } @keyframes stardrift { 0% { transform: translateY(0) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-100vh) rotate(180deg); opacity: 0; } } .animate-pulse-ruby { animation: pulse-ruby 3s ease-in-out infinite; } .animate-pulse-nebula { animation: pulse-nebula 3s ease-in-out infinite; } .animate-firefly { animation: firefly 2s ease-in-out infinite; } .animate-stardrift { animation: stardrift 8s linear infinite; }