/* ============================================================ DESIGN SYSTEM — Jiva Pulse Tokens only: colors, typography, spacing, shadows, radii. Lotus-spectrum glassmorphism theme. ============================================================ */ :root { /* ── Lotus Spectrum (7 petal hues) ── */ --jiva-gold: #F5E090; --jiva-lime: #B8D98A; --jiva-teal: #7ECFB3; --jiva-sky: #A0C8E8; --jiva-lavender: #A89CD4; --jiva-violet: #9B8FCC; --jiva-mist: #B8C8EE; /* ── Brand Core (derived from deepest lotus petal) ── */ --clr-primary: #9B8FCC; --clr-primary-dark: #7B6FB5; --clr-primary-light: #B8AEDD; --clr-primary-subtle: rgba(155, 143, 204, 0.12); /* ── Accent (Teal-spectrum CTA) ── */ --clr-accent: #7ECFB3; --clr-accent-dark: #5CB899; --clr-accent-light: #A8E0CC; /* ── Lotus Brand Highlight ── */ --clr-lotus-pink: #D6548A; --clr-lotus-gold: #C8972A; --clr-lotus-light: #F7D6E8; /* ── Semantic ── */ --clr-danger: #F05252; --clr-danger-subtle: rgba(240, 82, 82, 0.10); --clr-success: #31C48D; --clr-success-subtle: rgba(49, 196, 141, 0.10); --clr-warning: #FBBF24; --clr-warning-subtle: rgba(251, 191, 36, 0.10); --clr-info: #60A5FA; --clr-info-subtle: rgba(96, 165, 250, 0.10); /* ── Neutral Scale ── */ --clr-white: #FFFFFF; --clr-surface: #F8F9FC; --clr-surface-alt: rgba(168, 156, 212, 0.06); --clr-surface-card: rgba(255, 255, 255, 0.45); --clr-border: rgba(168, 156, 212, 0.20); --clr-border-light: rgba(255, 255, 255, 0.6); --clr-muted: #A8A5C0; --clr-text-secondary: #6B6890; --clr-text: #2D2A4A; --clr-heading: #1E1B4B; --clr-dark: #13104A; /* ── Typefaces ── To change fonts site-wide, update these two lines and the Google Fonts in each HTML . */ --font-display: 'Inter', 'system-ui', sans-serif; --font-body: 'Roboto', 'system-ui', sans-serif; /* ── Type Scale ── */ --text-xs: 0.6875rem; --text-sm: 0.8125rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 2.5rem; --text-4xl: 3.25rem; --text-5xl: 4rem; /* ── Font Weights ── */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; --weight-extrabold: 800; /* ── Line Height ── */ --leading-none: 1; --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.55; --leading-loose: 1.75; /* ── Letter Spacing ── */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-widest: 0.1em; /* ── Spacing (4px base grid) ── */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; /* ── Border Radius ── */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 40px; --radius-full: 9999px; /* ── Glassmorphism Levels ── */ /* Level 1 — Cards */ --glass-bg-1: rgba(255, 255, 255, 0.45); --glass-blur-1: blur(12px) saturate(1.4); --glass-border-1: 1px solid rgba(255, 255, 255, 0.6); --glass-shadow-1: 0 4px 24px rgba(160, 140, 212, 0.08); --glass-radius-1: 20px; /* Level 2 — Elevated / Modals */ --glass-bg-2: rgba(255, 255, 255, 0.60); --glass-blur-2: blur(20px) saturate(1.6); --glass-border-2: 1px solid rgba(255, 255, 255, 0.75); --glass-shadow-2a: 0 8px 40px rgba(126, 207, 179, 0.12); --glass-shadow-2b: 0 2px 8px rgba(155, 143, 204, 0.10); --glass-radius-2: 24px; /* Level 3 — Nav / Floating UI */ --glass-bg-3: rgba(255, 255, 255, 0.72); --glass-blur-3: blur(28px) saturate(1.8); --glass-border-3: 1px solid rgba(255, 255, 255, 0.5); --glass-shadow-3: 0 1px 20px rgba(160, 200, 232, 0.15); /* ── Tinted Glass Variants ── */ --glass-teal-bg: rgba(126, 207, 179, 0.15); --glass-teal-border: rgba(126, 207, 179, 0.35); --glass-lav-bg: rgba(168, 156, 212, 0.15); --glass-lav-border: rgba(168, 156, 212, 0.35); --glass-gold-bg: rgba(245, 224, 144, 0.20); --glass-gold-border: rgba(245, 224, 144, 0.40); --glass-sky-bg: rgba(160, 200, 232, 0.15); --glass-sky-border: rgba(160, 200, 232, 0.35); --glass-lime-bg: rgba(184, 217, 138, 0.15); --glass-lime-border: rgba(184, 217, 138, 0.35); /* ── Shadows (spectrum-tinted) ── */ --shadow-xs: 0 1px 3px rgba(155, 143, 204, 0.06); --shadow-sm: 0 2px 10px rgba(155, 143, 204, 0.10); --shadow-md: 0 4px 24px rgba(155, 143, 204, 0.14); --shadow-lg: 0 8px 40px rgba(155, 143, 204, 0.18); --shadow-xl: 0 20px 60px rgba(155, 143, 204, 0.22); --shadow-card-hover: 0 12px 36px rgba(126, 207, 179, 0.18), 0 4px 12px rgba(155, 143, 204, 0.12); /* ── Gradients ── */ /* Hero/background — full spectrum, very low opacity */ --gradient-hero: linear-gradient(135deg, rgba(245, 224, 144, 0.20) 0%, rgba(184, 217, 138, 0.20) 20%, rgba(126, 207, 179, 0.20) 40%, rgba(160, 200, 232, 0.20) 60%, rgba(168, 156, 212, 0.20) 80%, rgba(155, 143, 204, 0.20) 100% ); /* Brand accent gradient (buttons, highlights, CTAs) */ --gradient-primary: linear-gradient(135deg, #6C63FF 0%, #8B85FF 100%); /* Warm accent gradient (secondary) */ --gradient-accent: linear-gradient(120deg, #F5E090 0%, #B8D98A 50%, #7ECFB3 100%); /* Text gradient (logo-matched headings) */ --gradient-text: linear-gradient(90deg, #7ECFB3, #A89CD4); /* Surface gradient */ --gradient-surface: linear-gradient(180deg, #F8F9FC 0%, rgba(168, 156, 212, 0.06) 100%); /* Card hover glow */ --gradient-card-glow: linear-gradient(135deg, rgba(126, 207, 179, 0.08) 0%, rgba(155, 143, 204, 0.06) 100%); /* ── Page Petal Gradients (one per page, matched to lotus logo petals) ── */ /* Dashboard — Gold petal */ --gradient-petal-gold: linear-gradient(135deg, rgba(245, 224, 144, 0.25) 0%, rgba(232, 208, 108, 0.18) 50%, rgba(245, 224, 144, 0.10) 100% ); /* Medication — Lime petal */ --gradient-petal-lime: linear-gradient(135deg, rgba(184, 217, 138, 0.25) 0%, rgba(156, 199, 110, 0.18) 50%, rgba(184, 217, 138, 0.10) 100% ); /* Vitals — Teal petal */ --gradient-petal-teal: linear-gradient(135deg, rgba(126, 207, 179, 0.25) 0%, rgba(91, 184, 154, 0.18) 50%, rgba(126, 207, 179, 0.10) 100% ); /* Nutrition — Sky petal */ --gradient-petal-sky: linear-gradient(135deg, rgba(160, 200, 232, 0.25) 0%, rgba(123, 181, 222, 0.18) 50%, rgba(160, 200, 232, 0.10) 100% ); /* Reports — Indigo petal */ --gradient-petal-indigo: linear-gradient(135deg, rgba(107, 130, 196, 0.25) 0%, rgba(139, 159, 212, 0.18) 50%, rgba(107, 130, 196, 0.10) 100% ); /* Other — Lavender petal */ --gradient-petal-lavender: linear-gradient(135deg, rgba(168, 156, 212, 0.25) 0%, rgba(155, 143, 204, 0.18) 50%, rgba(168, 156, 212, 0.10) 100% ); /* ── Page Background ── */ --bg-page: radial-gradient(ellipse at top left, rgba(245, 224, 144, 0.25) 0%, transparent 50%), radial-gradient(ellipse at top right, rgba(155, 143, 204, 0.20) 0%, transparent 50%), radial-gradient(ellipse at bottom center, rgba(126, 207, 179, 0.18) 0%, transparent 60%), #F8F9FC; /* ── Transitions ── */ --ease-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --ease-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --ease-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1); /* ── Z-Index Scale ── */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; /* ── Layout ── */ --max-width: 1200px; --nav-height: 72px; --sidebar-width: 264px; }