/* Xavira AI — Design System: Colors & Type * Light by default. Magenta accent preserved across both themes. * Toggle dark via or any ancestor. */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=Geist+Mono:wght@400;500;600&display=swap'); :root { /* ───── LIGHT (default) ───── */ /* Surfaces — warm cream, faintly pink-tinted for depth */ --x-ink-0: #FAF6F2; /* page bg */ --x-ink-1: #FFFFFF; /* default surface */ --x-ink-2: #F4EFE9; /* raised card / table head */ --x-ink-3: #EBE4DC; /* hover / pressed */ --x-line: #E5DDD4; --x-line-strong: #CFC6BB; /* Text — near-black with warmth */ --x-fg: #14141A; --x-fg-soft: #44444C; --x-fg-muted: #76757D; --x-fg-dim: #ADACA4; /* Brand — magenta-coral (primary) */ --x-accent: #E62870; --x-accent-hover: #FF3D7F; --x-accent-press: #C71860; --x-accent-soft: #FFE6EE; --x-accent-line: #FFB8D0; --x-accent-glow: rgba(230, 40, 112, 0.22); /* Secondary brand — electric teal. Used for charts, secondary tags, "info" stops. */ --x-accent-2: #0AA8A0; --x-accent-2-hover: #16C2B8; --x-accent-2-soft: #D7F4F1; --x-accent-2-line: #95E0DA; --x-accent-2-glow: rgba(10, 168, 160, 0.22); /* Tertiary brand — warm amber. Used for highlighted numbers and balance UI. */ --x-accent-3: #FF8B1F; --x-accent-3-soft: #FFE9D2; /* Gradient compositions — sanctioned background fills */ --x-gradient-aurora: radial-gradient(120% 80% at 100% 0%, rgba(230,40,112,0.10) 0%, transparent 50%), radial-gradient(100% 100% at 0% 100%, rgba(10,168,160,0.08) 0%, transparent 55%), radial-gradient(80% 60% at 50% 50%, rgba(255,139,31,0.05) 0%, transparent 60%); --x-gradient-hero: linear-gradient(135deg, #FFE6EE 0%, #FAF6F2 35%, #D7F4F1 100%); --x-gradient-brand: linear-gradient(135deg, #FF5C92 0%, #E62870 50%, #C71860 100%); --x-gradient-sheen: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 60%); /* Status — darkened for light-mode contrast */ --x-positive: #2F8A1F; --x-positive-soft: #E8F6DC; --x-warn: #B26F00; --x-warn-soft: #FFF1CC; --x-danger: #C2362A; --x-danger-soft: #FFE0DC; --x-info: #0AA8A0; /* same as accent-2 — info reads as the teal */ --x-info-soft: #D7F4F1; /* Type */ --x-sans: 'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --x-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Spacing scale (4px base) */ --x-s-1: 4px; --x-s-2: 8px; --x-s-3: 12px; --x-s-4: 16px; --x-s-5: 24px; --x-s-6: 32px; --x-s-7: 48px; --x-s-8: 64px; --x-s-9: 96px; /* Radius — sharp */ --x-r-1: 3px; --x-r-2: 6px; --x-r-3: 10px; --x-r-4: 16px; --x-r-pill: 999px; /* Shadows — soft, never floaty on light */ --x-shadow-sm: 0 1px 2px rgba(20, 20, 26, 0.04); --x-shadow-md: 0 1px 3px rgba(20, 20, 26, 0.06), 0 12px 24px rgba(20, 20, 26, 0.06); --x-shadow-glow: 0 0 0 1px var(--x-accent-line), 0 0 24px var(--x-accent-glow); /* Motion */ --x-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --x-dur-fast: 120ms; --x-dur: 200ms; /* Logo paint — tokens so SVG inlines can adapt to theme */ --x-logo-wordmark: #14141A; --x-logo-seed-core: #FAFAF7; font-family: var(--x-sans); color: var(--x-fg); background: var(--x-ink-0); font-feature-settings: "ss01", "ss02", "cv11"; -webkit-font-smoothing: antialiased; } /* ───── DARK (opt-in) ───── * Set [data-theme="dark"] on any ancestor (typically ) to flip surfaces. * Magenta accent retained; status colors return to neon/acid stops that work on near-black. */ [data-theme="dark"] { --x-ink-0: #07070B; --x-ink-1: #0E0E14; --x-ink-2: #14141C; --x-ink-3: #1C1C26; --x-line: #22222E; --x-line-strong: #2E2E3C; --x-fg: #F2F1EC; --x-fg-soft: #C9C8C2; --x-fg-muted: #7A7A86; --x-fg-dim: #4F4F5A; --x-accent: #FF3D7F; --x-accent-hover: #FF5C92; --x-accent-press: #E62870; --x-accent-soft: #2A1220; --x-accent-line: #4A1A30; --x-accent-glow: rgba(255, 61, 127, 0.22); --x-accent-2: #2EE5D9; --x-accent-2-hover: #5BF0E6; --x-accent-2-soft: #0A2724; --x-accent-2-line: #1A4A45; --x-accent-2-glow: rgba(46, 229, 217, 0.22); --x-accent-3: #FFB020; --x-accent-3-soft: #2A1F08; --x-gradient-aurora: radial-gradient(120% 80% at 100% 0%, rgba(255,61,127,0.14) 0%, transparent 50%), radial-gradient(100% 100% at 0% 100%, rgba(46,229,217,0.10) 0%, transparent 55%), radial-gradient(80% 60% at 50% 50%, rgba(255,176,32,0.05) 0%, transparent 60%); --x-gradient-hero: linear-gradient(135deg, #2A1220 0%, #0E0E14 50%, #0A2724 100%); --x-gradient-brand: linear-gradient(135deg, #FF5C92 0%, #FF3D7F 50%, #E62870 100%); --x-gradient-sheen: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 60%); --x-positive: #C8FF1A; --x-positive-soft: #1F2407; --x-warn: #FFB020; --x-warn-soft: #2A1F08; --x-danger: #FF5C4D; --x-danger-soft: #2A100E; --x-info: #2EE5D9; --x-info-soft: #0A2724; --x-shadow-sm: 0 1px 0 0 rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.4); --x-shadow-md: 0 1px 0 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.5); --x-logo-wordmark: #F2F1EC; --x-logo-seed-core: #07070B; color: var(--x-fg); background: var(--x-ink-0); } /* ───── Semantic type ───── */ .x-display { font: 600 56px/1.04 var(--x-sans); letter-spacing: -0.035em; } .x-h1 { font: 600 40px/1.08 var(--x-sans); letter-spacing: -0.03em; } .x-h2 { font: 600 28px/1.16 var(--x-sans); letter-spacing: -0.025em; } .x-h3 { font: 600 20px/1.25 var(--x-sans); letter-spacing: -0.015em; } .x-h4 { font: 600 16px/1.3 var(--x-sans); letter-spacing: -0.01em; } .x-body { font: 400 15px/1.55 var(--x-sans); letter-spacing: -0.005em; } .x-body-sm { font: 400 13px/1.5 var(--x-sans); } .x-caption { font: 500 11px/1.3 var(--x-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--x-fg-muted); } .x-mono { font: 400 13px/1.5 var(--x-mono); } .x-mono-sm { font: 400 11px/1.4 var(--x-mono); } .x-num { font: 500 36px/1 var(--x-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } /* ───── Defaults ───── */ body { margin: 0; background: var(--x-ink-0); color: var(--x-fg); font-family: var(--x-sans); } /* Aurora page wash — attach to or any full-bleed container for ambient depth */ .x-aurora { position: relative; } .x-aurora::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: var(--x-gradient-aurora); } .x-aurora > * { position: relative; z-index: 1; } a { color: var(--x-accent); text-decoration: none; } a:hover { color: var(--x-accent-press); } code, pre { font-family: var(--x-mono); } ::selection { background: var(--x-accent); color: #fff; }