/* ============================================================================= Kriyasya — Design Tokens One premium language for every page (dashboard, admin, new worlds, home). Light + dark via [data-theme]; respects prefers-color-scheme by default. ============================================================================= */ :root { /* ---- Brand ---- */ --lv-gold: #f4cf6b; --lv-gold-2: #e7b84e; --lv-gold-soft: #fbe8a6; --lv-violet: #7c5cff; --lv-violet-2: #a98bff; /* ---- Accent gradient (premium) ---- */ --lv-grad-gold: linear-gradient(135deg, var(--lv-gold-soft), var(--lv-gold), var(--lv-gold-2)); --lv-grad-royal: linear-gradient(135deg, #7c5cff, #5b21b6); --lv-grad-hero: linear-gradient(160deg, #f8f6ff, #eef2ff 55%, #f0fafa); /* ---- Semantic ---- */ --lv-success: #16a34a; --lv-success-bg: #dcfce7; --lv-warn: #d97706; --lv-warn-bg: #fef3c7; --lv-danger: #dc2626; --lv-danger-bg: #fee2e2; --lv-info: #2563eb; --lv-info-bg: #dbeafe; /* ---- Access states (Kriyasya landing) ---- Semantic, NEVER world-accented — an access badge must read identically in every world. Added additively for the landing-page workstream; unused elsewhere. Light-theme pairs, each ≥ 4.5:1 fg/bg. Dark overrides live in the dark block below. */ --lv-access-free-fg: #0f5132; --lv-access-free-bg: #d1e7dd; --lv-access-included-fg: #084298; --lv-access-included-bg: #cfe2ff; --lv-access-credits-fg: #664d03; --lv-access-credits-bg: #fff3cd; --lv-access-premium-fg: #6b21a8; --lv-access-premium-bg: #f3e8ff; --lv-access-unknown-fg: #41464b; --lv-access-unknown-bg: #e2e3e5; /* ---- Surfaces & text (LIGHT default) ---- */ --lv-bg: #f6f5fb; --lv-bg-grad: radial-gradient(1100px 560px at 85% -10%, rgba(124,92,255,.10), transparent 60%), radial-gradient(820px 460px at 8% 6%, rgba(244,207,107,.10), transparent 55%), var(--lv-bg); --lv-surface: #ffffff; --lv-surface-2: #f4f2fb; --lv-surface-glass: rgba(255,255,255,.72); --lv-border: #e7e3f3; --lv-border-2: #d9d4ec; --lv-ink: #1a1230; --lv-ink-soft: #4a4363; --lv-ink-mute: #837d9b; --lv-on-gold: #1a1230; /* ---- Typography ---- */ --lv-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --lv-font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --lv-fs-xs: .74rem; --lv-fs-sm: .84rem; --lv-fs-md: .95rem; --lv-fs-lg: 1.12rem; --lv-fs-xl: 1.4rem; --lv-fs-2xl: clamp(1.6rem, 3.4vw, 2.1rem); --lv-fs-3xl: clamp(2.1rem, 6vw, 3.4rem); --lv-lh: 1.6; /* ---- Spacing scale ---- */ --lv-sp-1: 4px; --lv-sp-2: 8px; --lv-sp-3: 12px; --lv-sp-4: 16px; --lv-sp-5: 22px; --lv-sp-6: 30px; --lv-sp-7: 42px; --lv-sp-8: 60px; /* Strict 4px-based steps for the Kriyasya landing (brief §12). Added ALONGSIDE the legacy --lv-sp-5..8 above, which ~19 worlds consume and must not change. Landing CSS uses only these. */ --lv-sp-24: 24px; --lv-sp-32: 32px; --lv-sp-48: 48px; --lv-sp-64: 64px; --lv-sp-80: 80px; /* ---- Radius ---- */ --lv-r-sm: 8px; --lv-r-md: 14px; --lv-r-lg: 20px; --lv-r-xl: 28px; --lv-r-pill: 999px; /* ---- Shadows (refined, premium) ---- */ --lv-sh-sm: 0 2px 8px rgba(26,18,48,.06); --lv-sh-md: 0 8px 26px rgba(26,18,48,.10); --lv-sh-lg: 0 20px 50px rgba(26,18,48,.16); --lv-sh-gold: 0 10px 30px rgba(231,184,78,.35); --lv-ring: 0 0 0 3px rgba(124,92,255,.35); /* ---- Motion ---- */ --lv-ease: cubic-bezier(.22,.61,.36,1); --lv-ease-out: cubic-bezier(.16,1,.3,1); --lv-dur-1: .14s; --lv-dur-2: .26s; --lv-dur-3: .5s; --lv-container-max: 1200px; --lv-container-pad: clamp(16px, 4vw, 32px); --lv-maxw: var(--lv-container-max, 1200px); } /* ---- DARK theme ---- */ :root[data-theme="dark"] { --lv-bg: #0c0a1e; --lv-bg-grad: radial-gradient(1200px 600px at 78% -8%, rgba(169,139,255,.18), transparent 60%), radial-gradient(900px 500px at 12% 8%, rgba(244,207,107,.08), transparent 55%), linear-gradient(170deg, #15102e, #0c0a1e 55%, #080612); --lv-surface: #1a1436; --lv-surface-2: #221a44; --lv-surface-glass: rgba(26,20,54,.66); --lv-border: rgba(169,139,255,.20); --lv-border-2: rgba(169,139,255,.30); --lv-ink: #f3ecff; --lv-ink-soft: #cdbff0; --lv-ink-mute: #9b8bc9; --lv-grad-hero: linear-gradient(160deg, #1a1436, #15102e 55%, #120e28); --lv-sh-sm: 0 2px 8px rgba(0,0,0,.3); --lv-sh-md: 0 10px 30px rgba(0,0,0,.4); --lv-sh-lg: 0 24px 60px rgba(0,0,0,.5); /* Access states — dark theme: brighter ink on a low-alpha wash of the same hue. */ --lv-access-free-fg: #5fd39a; --lv-access-free-bg: rgba(34,197,94,.16); --lv-access-included-fg: #86b7ff; --lv-access-included-bg: rgba(59,130,246,.18); --lv-access-credits-fg: #f1cd6d; --lv-access-credits-bg: rgba(234,179,8,.15); --lv-access-premium-fg: #d8b4fe; --lv-access-premium-bg: rgba(168,85,247,.2); --lv-access-unknown-fg: #bcc1c9; --lv-access-unknown-bg: rgba(148,163,184,.18); } /* Auto dark when user prefers it and no explicit theme is set */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --lv-bg:#0c0a1e; --lv-bg-grad: radial-gradient(1200px 600px at 78% -8%, rgba(169,139,255,.18), transparent 60%), radial-gradient(900px 500px at 12% 8%, rgba(244,207,107,.08), transparent 55%), linear-gradient(170deg, #15102e, #0c0a1e 55%, #080612); --lv-surface:#1a1436; --lv-surface-2:#221a44; --lv-surface-glass:rgba(26,20,54,.66); --lv-border:rgba(169,139,255,.20); --lv-border-2:rgba(169,139,255,.30); --lv-ink:#f3ecff; --lv-ink-soft:#cdbff0; --lv-ink-mute:#9b8bc9; --lv-grad-hero:linear-gradient(160deg,#1a1436,#15102e 55%,#120e28); --lv-access-free-fg:#5fd39a; --lv-access-free-bg:rgba(34,197,94,.16); --lv-access-included-fg:#86b7ff; --lv-access-included-bg:rgba(59,130,246,.18); --lv-access-credits-fg:#f1cd6d; --lv-access-credits-bg:rgba(234,179,8,.15); --lv-access-premium-fg:#d8b4fe; --lv-access-premium-bg:rgba(168,85,247,.2); --lv-access-unknown-fg:#bcc1c9; --lv-access-unknown-bg:rgba(148,163,184,.18); } }