/* ============================================================================= Galaxy Design System — CSS Custom Properties NeuraFlash / Agentic Navigators Usage: 1. Apply a product theme class to your root element: 2. Dark mode is handled automatically via (prefers-color-scheme: dark), or apply .mode-dark manually to override: Architecture: Layer 1 — Primitives Raw palette values. Never use directly in components. Layer 2 — Semantic Light/dark mode resolved tokens. Use for structure and text. Layer 3 — Product Theme Per-navigator accent values. Use for brand moments. ============================================================================= */ /* ============================================================================= LAYER 1 — PRIMITIVES ============================================================================= */ :root { /* --- Neutral: Light -------------------------------------------------------- */ --color-neutral-light-25: #ffffff; --color-neutral-light-50: #fdfbf7; --color-neutral-light-100: #faf7f0; --color-neutral-light-200: #f5f0e6; --color-neutral-light-300: #f2eddb; --color-neutral-light-400: #ede5cc; --color-neutral-light-500: #e5dab8; --color-neutral-light-600: #d4c78e; --color-neutral-light-700: #c0af6b; --color-neutral-light-800: #a89448; /* --- Neutral: Dark --------------------------------------------------------- */ --color-neutral-dark-200: #9c98ba; --color-neutral-dark-300: #7b76a0; --color-neutral-dark-400: #615c7c; --color-neutral-dark-500: #4d4870; --color-neutral-dark-600: #3a3557; --color-neutral-dark-700: #322d47; --color-neutral-dark-800: #272338; --color-neutral-dark-850: #1e1b2e; --color-neutral-dark-900: #161223; --color-neutral-dark-950: #0d0b14; /* --- System Grays ---------------------------------------------------------- */ --color-system-100: #f0f0f0; --color-system-300: #c0c0c0; --color-system-400: #a8a8a8; --color-system-500: #888888; --color-system-600: #6b6b6b; --color-system-700: #4a4a4a; /* --- Cosmic Tide — Command Deck -------------------------------------------- */ --color-cosmic-tide-100: #e2f7f9; --color-cosmic-tide-200: #b1dfe3; --color-cosmic-tide-300: #57becc; --color-cosmic-tide-400: #00949f; --color-cosmic-tide-500: #007a85; --color-cosmic-tide-600: #005d66; --color-cosmic-tide-700: #004a52; --color-cosmic-tide-800: #002e33; /* --- Sunspot — First Light ------------------------------------------------- */ --color-sunspot-100: #fff9e5; --color-sunspot-200: #ffe99a; --color-sunspot-300: #ffd44d; --color-sunspot-400: #f0b800; --color-sunspot-500: #c89400; --color-sunspot-600: #9e7200; --color-sunspot-700: #7a5800; --color-sunspot-800: #5a3e00; /* --- Terraform — X-Ray ----------------------------------------------------- */ --color-terraform-100: #e8f5ec; --color-terraform-200: #c3e6cb; --color-terraform-300: #72bb7a; --color-terraform-400: #3d9c47; --color-terraform-500: #2e7d38; --color-terraform-600: #1b5e25; --color-terraform-700: #123d18; --color-terraform-800: #0a2510; /* --- Outer Rim — Quality Suite --------------------------------------------- */ --color-outer-rim-100: #ebf2f7; --color-outer-rim-200: #c4d8e8; --color-outer-rim-300: #7aadc8; --color-outer-rim-400: #3e7090; --color-outer-rim-500: #2c5470; --color-outer-rim-600: #1c3a52; --color-outer-rim-700: #122637; --color-outer-rim-800: #091520; /* --- Interstellar — Continuum ---------------------------------------------- */ --color-interstellar-100: #eaf1fa; --color-interstellar-200: #b6cee7; --color-interstellar-300: #7aadd8; --color-interstellar-400: #3576df; --color-interstellar-500: #2a5fb2; --color-interstellar-600: #1e4485; --color-interstellar-700: #142e5c; --color-interstellar-800: #0c1c3d; /* --- Kelvin — Claude Code Framework ---------------------------------------- */ --color-kelvin-100: #fbe9e7; --color-kelvin-200: #ffccbc; --color-kelvin-300: #ff7043; --color-kelvin-400: #e64a19; --color-kelvin-500: #bf3a10; --color-kelvin-600: #8c2508; --color-kelvin-700: #6e1b05; --color-kelvin-800: #4a1002; /* --- Violet Eclipse — Action Framework ------------------------------------- */ --color-violet-eclipse-100: #f0e8fa; --color-violet-eclipse-200: #d9c4f5; --color-violet-eclipse-300: #a87fe0; --color-violet-eclipse-400: #7b4fc8; --color-violet-eclipse-500: #5c34a8; --color-violet-eclipse-600: #3d1e82; --color-violet-eclipse-700: #29135a; --color-violet-eclipse-800: #170a37; /* --- Nebula — Knowledge Optimizer ------------------------------------------ */ --color-nebula-100: #e0f6ff; --color-nebula-200: #a0deff; --color-nebula-300: #44c0ff; --color-nebula-400: #00b4ff; --color-nebula-500: #0090d6; --color-nebula-600: #006dad; --color-nebula-700: #005280; --color-nebula-800: #003354; /* --- Solar Flare — Orbit --------------------------------------------------- */ --color-solar-flare-100: #fff0e0; --color-solar-flare-200: #ffd0a0; --color-solar-flare-300: #ff9840; --color-solar-flare-400: #e06818; --color-solar-flare-500: #bc4e00; --color-solar-flare-600: #923600; --color-solar-flare-700: #6e2800; --color-solar-flare-800: #4a1a00; /* --- Status ---------------------------------------------------------------- */ --color-success-100: #d3f1d7; --color-success-200: #7ccd8c; --color-success-300: #16a34a; --color-success-400: #00640c; --color-warning-100: #f8e5cb; --color-warning-200: #e6b672; --color-warning-300: #ca8a04; --color-warning-400: #7f4600; --color-warning-500: #350b00; --color-error-100: #ffd9d2; --color-error-200: #ff8478; --color-error-300: #dc2626; --color-error-400: #980000; --color-error-500: #500000; --color-info-100: #dce5ff; --color-info-200: #8c98ff; --color-info-300: #4f46e5; --color-info-400: #310aad; --color-info-500: #18006a; /* --- Spacing --------------------------------------------------------------- */ /* Use size-4 through size-36 for layout. size-10, size-14, size-18 are */ /* typography-specific and should not be used for spatial layout. */ --size-4: 4px; --size-8: 8px; --size-10: 10px; /* typography only */ --size-12: 12px; --size-14: 14px; /* typography only */ --size-16: 16px; --size-18: 18px; /* typography only */ --size-20: 20px; --size-24: 24px; --size-28: 28px; --size-32: 32px; --size-36: 36px; /* --- Typography ------------------------------------------------------------ */ --font-family: 'Lexend', sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-bold: 700; --font-weight-semi-bold: 600; --font-weight-extra-bold: 800; } /* ============================================================================= LAYER 2 — SEMANTIC TOKENS (Light mode defaults) ============================================================================= */ :root { /* --- Backgrounds ----------------------------------------------------------- */ --background-app: var(--color-neutral-light-100); /* #faf7f0 */ --background-subtle: var(--color-neutral-light-200); /* #f5f0e6 */ --background-surface: var(--color-neutral-light-25); /* #ffffff */ --background-feature: var(--color-neutral-light-300); /* #f2eddb */ /* Brand card backgrounds — require product theme */ --background-brand-surface: var(--accent-subtle); /* Feature Card */ --background-action-surface: var(--accent-active); /* Action Card */ --background-disabled: var(--color-system-300); /* #c0c0c0 */ /* --- Text ------------------------------------------------------------------ */ --text-primary: var(--color-neutral-dark-900); /* #161223 */ --text-secondary: var(--color-neutral-dark-500); /* #4d4870 */ --text-disabled: var(--color-system-700); /* #4a4a4a */ /* Interactive text — require product theme */ --text-on-secondary: var(--accent-darkest); /* Secondary button label */ --text-on-secondary-active: var(--accent-on-accent); /* Secondary button label (active state) */ /* --- Borders --------------------------------------------------------------- */ --border-subtle: var(--color-neutral-dark-300); /* #7b76a0 */ --border-default: var(--color-neutral-dark-400); /* #615c7c */ --border-strong: var(--color-neutral-dark-600); /* #3a3557 */ --border-ghost: var(--color-neutral-dark-200); /* #9c98ba */ --border-tone: var(--color-neutral-light-500);/* #e5dab8 */ --border-disabled: var(--color-system-500); /* #888888 */ /* --- Accent / Interactive — require product theme -------------------------- */ --accent-on-surface: var(--accent-primary); /* Icon/text on neutral surface */ --accent-secondary-surface: var(--accent-muted); /* Secondary button default fill */ --accent-secondary-hover: var(--accent-mid); /* Secondary button hover fill */ --accent-secondary-active: var(--accent-primary); /* Secondary button active fill */ /* --- Status ---------------------------------------------------------------- */ --status-success-fg: var(--color-success-400); /* #00640c */ --status-success-bg: var(--color-success-100); /* #d3f1d7 */ --status-warning-fg: var(--color-warning-400); /* #7f4600 */ --status-warning-bg: var(--color-warning-100); /* #f8e5cb */ --status-error-fg: var(--color-error-300); /* #dc2626 */ --status-error-bg: var(--color-error-100); /* #ffd9d2 */ --status-info-fg: var(--color-info-300); /* #4f46e5 */ --status-info-bg: var(--color-info-100); /* #dce5ff */ } /* ============================================================================= LAYER 2 — SEMANTIC TOKENS (Dark mode overrides) ============================================================================= */ @media (prefers-color-scheme: dark) { :root { /* Backgrounds */ --background-app: var(--color-neutral-dark-900); /* #161223 */ --background-subtle: var(--color-neutral-dark-850); /* #1e1b2e */ --background-surface: var(--color-neutral-dark-800); /* #272338 */ --background-feature: var(--color-neutral-dark-800); /* #272338 */ /* Brand card backgrounds shift to deeper accent shades in dark mode */ --background-brand-surface: var(--accent-deep); /* Feature Card */ --background-action-surface: var(--accent-darkest); /* Action Card */ --background-disabled: var(--color-system-700); /* #4a4a4a */ /* Text */ --text-primary: var(--color-neutral-light-25); /* #ffffff */ --text-secondary: var(--color-neutral-light-400); /* #ede5cc */ --text-disabled: var(--color-system-300); /* #c0c0c0 */ --text-on-secondary: var(--accent-on-accent); /* Secondary button label */ --text-on-secondary-active: var(--accent-on-accent); /* Secondary button label (active) */ /* Borders */ --border-subtle: var(--color-neutral-light-300); /* #f2eddb */ --border-default: var(--color-neutral-light-200); /* #f5f0e6 */ --border-strong: var(--color-neutral-light-100); /* #faf7f0 */ --border-ghost: var(--color-neutral-light-400); /* #ede5cc */ --border-tone: var(--color-neutral-dark-600); /* #3a3557 */ --border-disabled: var(--color-system-600); /* #6b6b6b */ /* Accent / Interactive — darker fills in dark mode */ --accent-secondary-surface: var(--accent-hover); /* Secondary button default fill */ --accent-secondary-hover: var(--accent-active); /* Secondary button hover fill */ --accent-secondary-active: var(--accent-active); /* Secondary button active fill */ /* Status */ --status-success-fg: var(--color-success-200); /* #7ccd8c */ --status-success-bg: #0f2614; --status-warning-fg: var(--color-warning-200); /* #e6b672 */ --status-warning-bg: #2a1a00; --status-error-fg: var(--color-error-200); /* #ff8478 */ --status-error-bg: #2a0000; --status-info-fg: var(--color-info-200); /* #8c98ff */ --status-info-bg: #0a0a2e; } } /* Class-based dark mode (overrides media query when applied explicitly) */ .mode-dark { --background-app: var(--color-neutral-dark-900); --background-subtle: var(--color-neutral-dark-850); --background-surface: var(--color-neutral-dark-800); --background-feature: var(--color-neutral-dark-800); --background-brand-surface: var(--accent-deep); --background-action-surface: var(--accent-darkest); --background-disabled: var(--color-system-700); --text-primary: var(--color-neutral-light-25); --text-secondary: var(--color-neutral-light-400); --text-disabled: var(--color-system-300); --text-on-secondary: var(--accent-on-accent); --text-on-secondary-active: var(--accent-on-accent); --border-subtle: var(--color-neutral-light-300); --border-default: var(--color-neutral-light-200); --border-strong: var(--color-neutral-light-100); --border-ghost: var(--color-neutral-light-400); --border-tone: var(--color-neutral-dark-600); --border-disabled: var(--color-system-600); --accent-secondary-surface: var(--accent-hover); --accent-secondary-hover: var(--accent-active); --accent-secondary-active: var(--accent-active); --status-success-fg: var(--color-success-200); --status-success-bg: #0f2614; --status-warning-fg: var(--color-warning-200); --status-warning-bg: #2a1a00; --status-error-fg: var(--color-error-200); --status-error-bg: #2a0000; --status-info-fg: var(--color-info-200); --status-info-bg: #0a0a2e; } /* Class-based light mode (forces light mode regardless of system preference). Useful when a design needs to opt out of (prefers-color-scheme: dark). */ .mode-light { --background-app: var(--color-neutral-light-100); --background-subtle: var(--color-neutral-light-200); --background-surface: var(--color-neutral-light-25); --background-feature: var(--color-neutral-light-300); --background-brand-surface: var(--accent-subtle); --background-action-surface: var(--accent-active); --background-disabled: var(--color-system-300); --text-primary: var(--color-neutral-dark-900); --text-secondary: var(--color-neutral-dark-500); --text-disabled: var(--color-system-700); --text-on-secondary: var(--accent-darkest); --text-on-secondary-active: var(--accent-on-accent); --border-subtle: var(--color-neutral-dark-300); --border-default: var(--color-neutral-dark-400); --border-strong: var(--color-neutral-dark-600); --border-ghost: var(--color-neutral-dark-200); --border-tone: var(--color-neutral-light-500); --border-disabled: var(--color-system-500); --accent-secondary-surface: var(--accent-muted); --accent-secondary-hover: var(--accent-mid); --accent-secondary-active: var(--accent-primary); --status-success-fg: var(--color-success-400); --status-success-bg: var(--color-success-100); --status-warning-fg: var(--color-warning-400); --status-warning-bg: var(--color-warning-100); --status-error-fg: var(--color-error-300); --status-error-bg: var(--color-error-100); --status-info-fg: var(--color-info-300); --status-info-bg: var(--color-info-100); } /* ============================================================================= LAYER 3 — PRODUCT THEMES Each class sets the --accent-* variables for that Navigator. Apply to the root element alongside a mode class if needed. ============================================================================= */ /* --- Command Deck (Cosmic Tide — Teal) -------------------------------------- */ .theme-command-deck { --accent-subtle: var(--color-cosmic-tide-100); /* #e2f7f9 */ --accent-muted: var(--color-cosmic-tide-200); /* #b1dfe3 */ --accent-mid: var(--color-cosmic-tide-300); /* #57becc */ --accent-primary: var(--color-cosmic-tide-400); /* #00949f */ --accent-hover: var(--color-cosmic-tide-500); /* #007a85 */ --accent-active: var(--color-cosmic-tide-600); /* #005d66 */ --accent-on-accent: var(--color-neutral-light-25);/* #ffffff */ --accent-deep: var(--color-cosmic-tide-700); /* #004a52 */ --accent-darkest: var(--color-cosmic-tide-800); /* #002e33 */ } /* --- First Light (Sunspot — Gold) ------------------------------------------ */ /* Note: on-accent is dark navy — primary color is bright gold requiring dark text */ .theme-first-light { --accent-subtle: var(--color-sunspot-100); /* #fff9e5 */ --accent-muted: var(--color-sunspot-200); /* #ffe99a */ --accent-mid: var(--color-sunspot-300); /* #ffd44d */ --accent-primary: var(--color-sunspot-400); /* #f0b800 */ --accent-hover: var(--color-sunspot-500); /* #c89400 */ --accent-active: #aa7c00; /* nudged for WCAG AA — not a palette step */ --accent-on-accent: var(--color-neutral-dark-900); /* #161223 dark navy — required for contrast on gold */ --accent-deep: var(--color-sunspot-700); /* #7a5800 */ --accent-darkest: var(--color-sunspot-800); /* #5a3e00 */ } /* --- X-Ray (Terraform — Green) --------------------------------------------- */ .theme-x-ray { --accent-subtle: var(--color-terraform-100); /* #e8f5ec */ --accent-muted: var(--color-terraform-200); /* #c3e6cb */ --accent-mid: var(--color-terraform-300); /* #72bb7a */ --accent-primary: var(--color-terraform-400); /* #3d9c47 */ --accent-hover: var(--color-terraform-500); /* #2e7d38 */ --accent-active: var(--color-terraform-600); /* #1b5e25 */ --accent-on-accent: var(--color-neutral-light-25);/* #ffffff */ --accent-deep: var(--color-terraform-700); /* #123d18 */ --accent-darkest: var(--color-terraform-800); /* #0a2510 */ } /* --- Quality Suite (Outer Rim — Slate Blue) --------------------------------- */ .theme-quality-suite { --accent-subtle: var(--color-outer-rim-100); /* #ebf2f7 */ --accent-muted: var(--color-outer-rim-200); /* #c4d8e8 */ --accent-mid: var(--color-outer-rim-300); /* #7aadc8 */ --accent-primary: var(--color-outer-rim-400); /* #3e7090 */ --accent-hover: var(--color-outer-rim-500); /* #2c5470 */ --accent-active: var(--color-outer-rim-600); /* #1c3a52 */ --accent-on-accent: var(--color-neutral-light-25);/* #ffffff */ --accent-deep: var(--color-outer-rim-700); /* #122637 */ --accent-darkest: var(--color-outer-rim-800); /* #091520 */ } /* --- Continuum (Interstellar — Royal Blue) ---------------------------------- */ .theme-continuum { --accent-subtle: var(--color-interstellar-100); /* #eaf1fa */ --accent-muted: var(--color-interstellar-200); /* #b6cee7 */ --accent-mid: var(--color-interstellar-300); /* #7aadd8 */ --accent-primary: var(--color-interstellar-400); /* #3576df */ --accent-hover: var(--color-interstellar-500); /* #2a5fb2 */ --accent-active: var(--color-interstellar-600); /* #1e4485 */ --accent-on-accent: var(--color-neutral-light-25); /* #ffffff */ --accent-deep: var(--color-interstellar-700); /* #142e5c */ --accent-darkest: var(--color-interstellar-800); /* #0c1c3d */ } /* --- Claude Code Framework (Kelvin — Warm Red) ------------------------------ */ .theme-claude-code-framework { --accent-subtle: var(--color-kelvin-100); /* #fbe9e7 */ --accent-muted: var(--color-kelvin-200); /* #ffccbc */ --accent-mid: var(--color-kelvin-300); /* #ff7043 */ --accent-primary: var(--color-kelvin-400); /* #e64a19 */ --accent-hover: var(--color-kelvin-500); /* #bf3a10 */ --accent-active: var(--color-kelvin-600); /* #8c2508 */ --accent-on-accent: var(--color-neutral-light-25);/* #ffffff */ --accent-deep: var(--color-kelvin-700); /* #6e1b05 */ --accent-darkest: var(--color-kelvin-800); /* #4a1002 */ } /* --- Action Framework (Violet Eclipse — Purple) ----------------------------- */ .theme-action-framework { --accent-subtle: var(--color-violet-eclipse-100); /* #f0e8fa */ --accent-muted: var(--color-violet-eclipse-200); /* #d9c4f5 */ --accent-mid: var(--color-violet-eclipse-300); /* #a87fe0 */ --accent-primary: var(--color-violet-eclipse-400); /* #7b4fc8 */ --accent-hover: var(--color-violet-eclipse-500); /* #5c34a8 */ --accent-active: var(--color-violet-eclipse-600); /* #3d1e82 */ --accent-on-accent: var(--color-neutral-light-25); /* #ffffff */ --accent-deep: var(--color-violet-eclipse-700); /* #29135a */ --accent-darkest: var(--color-violet-eclipse-800); /* #170a37 */ } /* --- Knowledge Optimizer (Nebula — Cyan) ------------------------------------ */ /* Note: accent/hover is a nudged value (#0077b8) not a palette step */ .theme-knowledge-optimizer { --accent-subtle: var(--color-nebula-100); /* #e0f6ff */ --accent-muted: var(--color-nebula-200); /* #a0deff */ --accent-mid: var(--color-nebula-300); /* #44c0ff */ --accent-primary: var(--color-nebula-400); /* #00b4ff */ --accent-hover: #0077b8; /* nudged for WCAG AA — not a palette step */ --accent-active: var(--color-nebula-600); /* #006dad */ --accent-on-accent: var(--color-neutral-light-25);/* #ffffff */ --accent-deep: var(--color-nebula-700); /* #005280 */ --accent-darkest: var(--color-nebula-800); /* #003354 */ } /* --- Orbit (Solar Flare — Orange) ------------------------------------------ */ /* Note: on-accent is white — primary orange is dark enough for white text */ .theme-orbit { --accent-subtle: var(--color-solar-flare-100); /* #fff0e0 */ --accent-muted: var(--color-solar-flare-200); /* #ffd0a0 */ --accent-mid: var(--color-solar-flare-300); /* #ff9840 */ --accent-primary: var(--color-solar-flare-400); /* #e06818 */ --accent-hover: var(--color-solar-flare-500); /* #bc4e00 */ --accent-active: var(--color-solar-flare-600); /* #923600 */ --accent-on-accent: var(--color-neutral-light-25);/* #ffffff */ --accent-deep: var(--color-solar-flare-700); /* #6e2800 */ --accent-darkest: var(--color-solar-flare-800); /* #4a1a00 */ } /* ============================================================================= TYPOGRAPHY UTILITY CLASSES Font: Lexend. All weights and sizes reference primitive tokens above. ============================================================================= */ .text-h1 { font-family: var(--font-family); font-size: var(--size-28); /* 28px */ font-weight: var(--font-weight-extra-bold); line-height: 1.2; } .text-h2 { font-family: var(--font-family); font-size: var(--size-20); /* 20px */ font-weight: var(--font-weight-semi-bold); line-height: 1.3; } .text-h3 { font-family: var(--font-family); font-size: var(--size-18); /* 18px */ font-weight: var(--font-weight-regular); line-height: 1.4; } .text-h4 { font-family: var(--font-family); font-size: var(--size-14); /* 14px */ font-weight: var(--font-weight-bold); line-height: 1.4; } .text-body { font-family: var(--font-family); font-size: var(--size-14); /* 14px */ font-weight: var(--font-weight-light); line-height: 1.5; } .text-muted { font-family: var(--font-family); font-size: var(--size-12); /* 12px */ font-weight: var(--font-weight-light); line-height: 1.5; color: var(--text-secondary); } .text-button { font-family: var(--font-family); font-size: var(--size-14); /* 14px */ font-weight: var(--font-weight-semi-bold); line-height: 1; } .text-link { font-family: var(--font-family); font-size: var(--size-14); /* 14px */ font-weight: var(--font-weight-semi-bold); color: var(--accent-on-surface); text-decoration: underline; } .text-metric { font-family: var(--font-family); font-size: var(--size-24); /* 24px */ font-weight: var(--font-weight-extra-bold); line-height: 1.1; color: var(--accent-on-surface); } .text-card-title { font-family: var(--font-family); font-size: var(--size-16); /* 16px */ font-weight: var(--font-weight-semi-bold); line-height: 1.3; }