/* ═══════════════════════════════════════════════════════════════ MANVA — UNIFIED DESIGN SYSTEM Single source of truth for colors / typography / spacing across every page. Include via . Light mode is default. Dark mode activates when the element has data-theme="dark" (set by the toggle in JS, persisted to localStorage as 'manva_theme'). Pages can opt-in to follow the OS preference by leaving the attribute unset on first load — see manva-theme-init below for the recommended initialiser. ═══════════════════════════════════════════════════════════════ */ :root, [data-theme="light"] { /* ── Surfaces ────────────────────────────────────────────── */ --bg: #ffffff; --bg-soft: #f8f9fc; /* page wash for sections */ --bg-tinted: #faf5ff; /* faint lavender wash for "elevated" sections */ /* Deep ink with a faint purple undertone \u2014 lets content cards pop instead of competing with the bg. Use --bg-brand-vivid for places that WANT the loud gradient (CTAs, hero banners). */ --bg-brand: linear-gradient(165deg,#2e1065 0%,#4c1d95 50%,#2e1065 100%); --bg-brand-vivid: linear-gradient(135deg,#4c1d95 0%,#5b21b6 50%,#7c3aed 100%); --bg-brand-soft: linear-gradient(135deg,#ede9fe,#dbeafe); /* light alt */ /* ── Text ────────────────────────────────────────────────── */ --text: #0a0f1e; --text-secondary: #3d4a5c; --text-muted: #6b7a90; --text-on-brand: #ffffff; /* text that sits on --bg-brand */ --text-on-brand-muted: rgba(255,255,255,.78); /* ── Brand accents ──────────────────────────────────────── */ --blue: #2563eb; --blue-soft: #dbeafe; --purple: #7c3aed; --purple-soft: #ede9fe; --pink: #db2777; --pink-soft: #fce7f3; --green: #059669; --green-soft: #d1fae5; --orange: #d97706; --orange-soft: #fef3c7; --red: #dc2626; --red-soft: #fee2e2; /* ── Brand gradients (single source of truth) ────────────── */ --grad-primary: linear-gradient(135deg,#2563eb,#7c3aed); /* blue → purple */ --grad-secondary:linear-gradient(135deg,#7c3aed,#db2777); /* purple → pink */ --grad-warm: linear-gradient(135deg,#7c3aed,#ec4899,#f59e0b); /* triad */ --grad-hero: radial-gradient(ellipse at 20% 20%,rgba(37,99,235,.10),transparent 55%), radial-gradient(ellipse at 80% 80%,rgba(124,58,237,.08),transparent 55%); /* ── Borders + dividers ─────────────────────────────────── */ --border: rgba(10,15,30,.08); --border-strong: rgba(10,15,30,.14); --divider: rgba(10,15,30,.06); /* ── Cards + shadows ────────────────────────────────────── */ --card: #ffffff; --card-shadow: 0 1px 3px rgba(0,0,0,.04),0 6px 24px rgba(0,0,0,.04); --card-shadow-hover: 0 4px 12px rgba(0,0,0,.06),0 16px 40px rgba(0,0,0,.06); --card-radius: 14px; /* ── Typography ─────────────────────────────────────────── */ --font: 'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --font-display: 'Inter',system-ui,-apple-system,sans-serif; --font-mono: 'JetBrains Mono',ui-monospace,monospace; /* ── Spacing ────────────────────────────────────────────── */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; /* ── Glow effects ───────────────────────────────────────── */ --glow-blue: 0 0 20px rgba(37,99,235,.15),0 0 40px rgba(37,99,235,.05); --glow-purple: 0 0 20px rgba(124,58,237,.15),0 0 40px rgba(124,58,237,.05); --glow-pink: 0 0 20px rgba(219,39,119,.15),0 0 40px rgba(219,39,119,.05); /* ── Legacy aliases (keep old per-page CSS working) ────── */ --bg2: var(--bg-soft); --bg-dark: var(--bg-brand); /* old "dark" sections now use brand gradient */ --bg-dark2: #312e81; /* deep indigo if a page hard-coded a 2nd dark */ --card-border: var(--border); --grad1: var(--grad-primary); --grad2: var(--grad-secondary); --gradient: var(--grad-primary); --dark: var(--text); --muted: var(--text-muted); } /* ═══════════════════════════════════════════════════════════════ DARK MODE Same hue family, inverted lightness. Brand accents stay vivid so buttons / focus states still pop. Card backgrounds get a faint purple tint so they feel "Manva" not generic dark dashboard. ═══════════════════════════════════════════════════════════════ */ [data-theme="dark"] { --bg: #0b0a1a; /* deep ink with purple undertone, not pure black */ --bg-soft: #15132a; --bg-tinted: #1d1a3a; --bg-brand: linear-gradient(135deg,#1e1b4b 0%,#3b0764 50%,#1e1b4b 100%); --bg-brand-soft: linear-gradient(135deg,rgba(124,58,237,.18),rgba(37,99,235,.12)); --text: #f5f3ff; --text-secondary: #c7c5e0; --text-muted: #8a87b8; --text-on-brand: #ffffff; --text-on-brand-muted: rgba(255,255,255,.72); --blue: #60a5fa; --blue-soft: rgba(96,165,250,.16); --purple: #a78bfa; --purple-soft: rgba(167,139,250,.18); --pink: #f472b6; --pink-soft: rgba(244,114,182,.18); --green: #34d399; --green-soft: rgba(52,211,153,.18); --orange: #fbbf24; --orange-soft: rgba(251,191,36,.18); --red: #f87171; --red-soft: rgba(248,113,113,.18); --grad-primary: linear-gradient(135deg,#3b82f6,#8b5cf6); --grad-secondary: linear-gradient(135deg,#8b5cf6,#ec4899); --border: rgba(255,255,255,.10); --border-strong: rgba(255,255,255,.18); --divider: rgba(255,255,255,.06); --card: #1a172e; --card-shadow: 0 1px 3px rgba(0,0,0,.4),0 6px 24px rgba(0,0,0,.4); --card-shadow-hover: 0 4px 12px rgba(0,0,0,.5),0 16px 40px rgba(0,0,0,.5); --glow-blue: 0 0 20px rgba(96,165,250,.25),0 0 40px rgba(96,165,250,.12); --glow-purple: 0 0 20px rgba(167,139,250,.30),0 0 40px rgba(167,139,250,.15); --glow-pink: 0 0 20px rgba(244,114,182,.25),0 0 40px rgba(244,114,182,.12); } /* Light is the default. We intentionally do NOT follow prefers-color-scheme — users who want dark flip the toggle explicitly, and that choice is persisted in localStorage by manva-theme.js. */ /* ═══════════════════════════════════════════════════════════════ THEME TOGGLE BUTTON (drop in anywhere with class="manva-theme-toggle") Renders a sun/moon based on current theme. JS hooks into the click. ═══════════════════════════════════════════════════════════════ */ .manva-theme-toggle { appearance: none; background: var(--card); border: 1.5px solid var(--border); border-radius: 999px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.05rem; color: var(--text); transition: transform .2s ease, background .2s ease, border-color .2s ease; } .manva-theme-toggle:hover { transform: rotate(15deg); border-color: var(--purple); } .manva-theme-toggle:active { transform: scale(.92); } [data-theme="dark"] .manva-theme-toggle::before { content: "☀"; } /* dark mode: show sun (offer light) */ [data-theme="light"] .manva-theme-toggle::before, :root:not([data-theme]) .manva-theme-toggle::before { content: "🌙"; } /* light mode (default): show moon (offer dark) */ /* ═══════════════════════════════════════════════════════════════ GLOBAL UTILITY CLASSES — small, opinionated, reusable. Use sparingly; per-page CSS still owns layout. ═══════════════════════════════════════════════════════════════ */ .brand-gradient-text { background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .brand-bg { background: var(--bg-brand); color: var(--text-on-brand); } .brand-bg-soft { background: var(--bg-brand-soft); } .surface-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); } .surface-card:hover { box-shadow: var(--card-shadow-hover); } /* Smooth transition when toggling theme — prevents flash */ :root, body, .surface-card, .manva-theme-toggle, nav, footer { transition: background-color .25s ease, color .2s ease, border-color .2s ease; }