/* ============================================================ XRaise Design System — Colors & Typography (Dual-Mode) Source: XRaise v2 production CSS (Project 2e021ec5...) Font: Satoshi via Fontshare; JetBrains Mono via Google Fonts ============================================================ XRaise has TWO canonical surfaces: 1) Marketing / Landing — LIGHT mode (`:root` defaults) 2) Product / App — DARK mode (`[data-theme="ink"]`) ============================================================ */ @import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,600,700,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ============================================================ BASE TOKENS (Brand) — never change across modes ============================================================ */ :root { /* Brand Blues (constant) */ --blue: #245BFF; /* Primary brand */ --blue-deep: #1A45D6; /* Pressed / dark */ --blue-glow: #3B82FF; /* Mid blue, secondary */ --blue-tint: #E7EEFF; /* Soft tint background */ --cyan: #32C7FF; /* Cyan accent / tertiary */ --violet: #3B82FF; /* Used alongside blue in gradients */ --indigo: #245BFF; --pink: #32C7FF; /* Soft tint accents */ --mint: #DDF5E4; --sky: #DCEAFF; --lavender: #E7EEFF; /* Semantic status */ --green: #0e7c45; --green-dot: #15a554; /* Trust pill green dot */ --warn: #b07206; --warn-bg: rgba(204, 124, 0, 0.08); /* Gradient definitions */ --grad-blue-violet: linear-gradient(90deg, #245BFF, #3B82FF); --grad-rainbow: linear-gradient(90deg, #245BFF 0%, #3B82FF 50%, #32C7FF 100%); --grad-btn-blue: linear-gradient(180deg, #3B82FF, #245BFF); --grad-btn-blue-h: linear-gradient(180deg, #3a6cff, #1846e6); /* Font families */ --f-display: "Satoshi", "Sora", ui-sans-serif, -apple-system, sans-serif; --f-sans: "Satoshi", "Sora", ui-sans-serif, -apple-system, sans-serif; --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; /* Layout */ --maxw: 1320px; --pad-x: 48px; --gutter: 32px; /* Type scale (marketing display) */ --h1: clamp(24px, 6.8vw, 50px); --h2: clamp(28px, 3vw, 40px); --h3: 28px; --body-lg: 18px; --body: 15px; --small: 13px; --caption: 11px; /* Spacing */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; /* Radii */ --r-sm: 6px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px; --r-3xl: 24px; --r-full: 9999px; } /* ============================================================ LIGHT MODE — Marketing / Landing surface (default) ============================================================ */ :root { --ink: #0F172A; /* Body & heading text */ --ink-2: #1E293B; /* Secondary text */ --paper: #ffffff; /* Base background */ --paper-2: #F7F9FC; /* Surface 1 */ --paper-3: #EFF2F8; /* Surface 2 */ --rule: rgba(15, 23, 42, 0.10); --rule-soft: rgba(15, 23, 42, 0.06); --muted: #64748B; --muted-2: #CBD5E1; /* Shadows */ --shadow-sm: 0 1px 2px rgba(15,23,42,0.04); --shadow-md: 0 6px 14px -8px rgba(10,13,31,.35); --shadow-lg: 0 24px 60px -28px rgba(29,78,255,.4); --shadow-blue: 0 6px 22px -8px rgba(29,78,255,.55); } /* ============================================================ DARK MODE — Product / App surface Toggle via: or ============================================================ */ [data-theme="ink"] { --ink: #F7F9FC; --ink-2: #CBD5E1; --paper: #071120; --paper-2: #0B1730; --paper-3: #101A2B; --rule: rgba(247, 249, 252, 0.12); --rule-soft: rgba(247, 249, 252, 0.06); --muted: rgba(247, 249, 252, 0.62); --muted-2: rgba(247, 249, 252, 0.36); /* Dark-mode blue adjustments */ --blue: #4A8DFF; --blue-glow: #6FE3FF; --blue-tint: #1A235A; --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow-md: 0 4px 12px rgba(0,0,0,0.5); --shadow-lg: 0 8px 32px rgba(0,0,0,0.6); --shadow-blue: 0 0 24px rgba(36, 91, 255, 0.35); } /* ============================================================ LEGACY ALIASES (back-compat with original dark-only system) ============================================================ */ :root { --color-blue-deep: var(--blue); --color-blue-mid: var(--blue-glow); --color-blue-light: var(--cyan); --gradient-primary: var(--grad-rainbow); --bg-base: var(--paper); --bg-surface: var(--paper-2); --bg-elevated: var(--paper-3); --fg-primary: var(--ink); --fg-secondary: var(--ink-2); --fg-muted: var(--muted); --font-sans: var(--f-sans); --font-mono: var(--f-mono); } /* ============================================================ BASE TYPE ============================================================ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--paper); color: var(--ink); font-family: var(--f-sans); font-size: 18px; line-height: 1.556; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; } .eyebrow { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .tnum { font-variant-numeric: tabular-nums; } .mono { font-family: var(--f-mono); } /* Gradient text */ .accent-grad { background: var(--grad-rainbow); -webkit-background-clip: text; background-clip: text; color: transparent; }