/** * Nibiru Design System — v4.0.0 "Cosmos" * * Canonical source of truth for the brand. Imported globally by the site * (see astro.config.mjs `customCss`) and published verbatim at * https://nibiru-framework.com/design-system/tokens.css * * v4 is dark-first: the page lives in space, headlines glow magenta-amber, * the lotus mark is the star at the centre. Light "paper" surfaces are * available via .alt sections for content-heavy reading. * * All tokens namespaced --nibiru-* so they coexist with other systems. */ :root { /* === Cosmos surfaces (dark-first page) === */ --nibiru-void: #06030f; /* deepest, used for chat/code panes */ --nibiru-space: #0a0414; /* the page background */ --nibiru-night: #120825; /* card surface on dark */ --nibiru-plum: #1c0f3a; /* MMVC stage glow base */ /* === Nebula brand colours (the petals, retuned) === */ --nibiru-nebula-mag: #b86bff; /* primary brand — magenta */ --nibiru-nebula-blue: #5b8dff; --nibiru-nebula-amber:#ffb574; /* Legacy aliases — same role, mapped to new hexes */ --nibiru-iris: #b86bff; --nibiru-iris-deep: #8a3fd0; --nibiru-iris-soft: #d4b4ff; --nibiru-skyfall: #5b8dff; --nibiru-skyfall-deep:#3a6ad0; --nibiru-skyfall-soft:#a8c0ff; --nibiru-aurum: #ffb574; /* warm amber, brighter than v3 */ --nibiru-aurum-soft: #ffd0a3; /* === Light "paper" surfaces (for .alt sections) === */ --nibiru-star: #f4eedb; /* the cream — also used as text on dark */ --nibiru-paper: #f4eedb; --nibiru-paper-2: #ebe3c8; --nibiru-bg: #f4eedb; /* legacy alias for content cards */ --nibiru-bg-2: #ebe3c8; --nibiru-mist: #f8f3e2; --nibiru-lavender: #ece6f3; --nibiru-lavender-deep:#ddd3eb; /* === Ink (text on light surfaces) === */ --nibiru-ink: #0a0414; /* deeper than v3, matches space */ --nibiru-ink-2: #2a2438; --nibiru-ink-deep: #06030f; --nibiru-ink-soft: #4a4258; /* legacy */ --nibiru-ink-faint: #6e6680; --nibiru-muted: #6e6680; /* === Hairlines === */ --nibiru-line: rgba(244, 238, 219, 0.12); /* on dark surfaces */ --nibiru-line-strong: rgba(244, 238, 219, 0.28); /* hover / focus */ --nibiru-line-light: rgba(20, 4, 30, 0.10); /* on light surfaces */ --nibiru-line-2: rgba(20, 4, 30, 0.18); --nibiru-grid: rgba(244, 238, 219, 0.04); /* faint grid overlay */ /* === Status / accents === */ --nibiru-success: #7ad6a3; --nibiru-rose: #ff8a9d; --nibiru-moss: #94a96e; /* === Code surface === */ --nibiru-code-bg: #050208; --nibiru-code-line: rgba(244, 238, 219, 0.08); --nibiru-code-text: #f4eedb; --nibiru-code-mute: #6e6680; /* === Twilight (legacy dark theme — kept for Starlight compatibility) === */ --nibiru-dark-bg: #0a0414; --nibiru-dark-surface: #120825; --nibiru-dark-surface-raised:#1c0f3a; --nibiru-dark-ink: #f4eedb; --nibiru-dark-ink-soft: #c5bfd1; --nibiru-dark-ink-faint: #6e6680; /* === Gradients === */ --nibiru-gradient-headline: linear-gradient(110deg, #ffb574 0%, #b86bff 50%, #5b8dff 100%); --nibiru-gradient-accent: linear-gradient(110deg, #ffb574 0%, #b86bff 70%); --nibiru-gradient-accent-light: linear-gradient(110deg, #b46500 0%, #5b1f9e 70%); --nibiru-gradient-iris-to-sky: linear-gradient(135deg, #b86bff 0%, #5b8dff 100%); --nibiru-gradient-nebula: radial-gradient(120% 90% at 50% 20%, #2a2156 0%, #1a1442 24%, #0e0a2a 52%, #06050f 82%), linear-gradient(180deg, #06050f 0%, #07060f 100%); --nibiru-gradient-mmvc-stage: radial-gradient(ellipse at 50% 50%, #1c0f3a, #0a0414 60%); --nibiru-gradient-lotus-wash: radial-gradient(ellipse 80% 50% at 0% 0%, rgba(184, 107, 255, 0.10), transparent 60%), radial-gradient(ellipse 60% 40% at 100% 0%, rgba(91, 141, 255, 0.10), transparent 60%); /* === Shadows === */ --nibiru-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20); --nibiru-shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.40); --nibiru-shadow-lg: 0 30px 60px -30px rgba(0, 0, 0, 0.7); --nibiru-shadow-xl: 0 60px 120px -40px rgba(0, 0, 0, 0.7); --nibiru-shadow-cosmos: 0 60px 120px -40px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(184, 107, 255, 0.06) inset; --nibiru-shadow-glow-mag: 0 0 24px rgba(184, 107, 255, 0.45); --nibiru-shadow-glow-amb: 0 0 24px rgba(255, 181, 116, 0.45); --nibiru-shadow-glow-blue:0 0 24px rgba(91, 141, 255, 0.45); /* === Typography === */ --nibiru-font-text: 'Inter Tight', ui-sans-serif, system-ui, -apple-system, sans-serif; --nibiru-font-display: 'Inter Tight', ui-sans-serif, system-ui, sans-serif; --nibiru-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Legacy alias — the v3 components reference --nibiru-font-text */ --nibiru-font-body: var(--nibiru-font-text); /* Weights */ --nibiru-weight-light: 300; --nibiru-weight-regular: 400; --nibiru-weight-medium: 500; --nibiru-weight-semibold: 600; --nibiru-weight-bold: 700; /* Letter-spacing */ --nibiru-tracking-display: -0.04em; --nibiru-tracking-heading: -0.03em; --nibiru-tracking-body: -0.005em; --nibiru-tracking-mono: 0.04em; --nibiru-tracking-label: 0.10em; --nibiru-tracking-eyebrow: 0.18em; /* Type scale */ --nibiru-text-xs: 0.69rem; /* 11px */ --nibiru-text-sm: 0.81rem; /* 13px */ --nibiru-text-md: 0.875rem; /* 14px */ --nibiru-text-base: 1rem; /* 16px — body */ --nibiru-text-lg: 1.125rem; /* 18px */ --nibiru-text-xl: 1.25rem; /* 20px */ --nibiru-text-2xl: 1.5rem; --nibiru-text-3xl: 2rem; --nibiru-text-section: clamp(2.5rem, 4vw + 0.5rem, 5rem); /* 40-80 */ --nibiru-text-hero: clamp(3.5rem, 7vw + 0.5rem, 7.75rem); /* 56-124 */ /* === Radii === */ --nibiru-radius-sm: 6px; --nibiru-radius-md: 10px; --nibiru-radius-lg: 14px; --nibiru-radius-xl: 18px; --nibiru-radius-2xl: 22px; --nibiru-radius-pill: 999px; /* === Spacing === */ --nibiru-space-0: 0; --nibiru-space-1: 0.25rem; --nibiru-space-2: 0.5rem; --nibiru-space-3: 0.75rem; --nibiru-space-4: 1rem; --nibiru-space-5: 1.5rem; --nibiru-space-6: 2rem; --nibiru-space-8: 3rem; --nibiru-space-10: 4rem; --nibiru-space-12: 6rem; --nibiru-space-section: 10rem; --nibiru-container: 1280px; --nibiru-content: 50rem; /* === Motion === */ --nibiru-duration-fast: 160ms; --nibiru-duration-normal: 240ms; --nibiru-duration-slow: 500ms; --nibiru-duration-pulse: 2.4s; --nibiru-duration-blink: 1s; --nibiru-duration-breathe: 18s; --nibiru-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --nibiru-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); }