/* ========================================================================== DR. KAVISH SHARMA — GLOBAL DESIGN SYSTEM TOKENS v3.5 World-Class Premium Healthcare Design System ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap'); :root { /* ------------------------------------------------------------------------- 1. COLOR SYSTEM — Approved Blue & Green Palettes (Single Source of Truth) ------------------------------------------------------------------------ */ /* Approved Blue Palette */ --blue-100: #B3E5FC; /* Lightest background / subtle tint */ --blue-200: #81D4FA; /* Soft surface / subtle border / hover bg */ --blue-300: #4FC3F7; /* Medium blue accent / highlight / focus ring */ --blue-400: #29B6F6; /* Primary action / interactive / link */ --blue-500: #0288D1; /* Deep primary text / header / border / CTA */ /* Approved Green Palette */ --green-100: #A8D5BA; /* Lightest sage tint / subtle success bg */ --green-200: #6BBF8A; /* Soft green border / positive accent */ --green-300: #4B9B6E; /* Medium green / healthcare accent */ --green-400: #2E7D5C; /* Success / verified state / secondary CTA */ --green-500: #1B5E3A; /* Deep green text / emphasis / dark badge */ /* ------------------------------------------------------------------------- SEMANTIC DESIGN SYSTEM TOKENS ------------------------------------------------------------------------ */ /* Deep Medical Navy Surface (Derived from Deep Blue #0288D1 Tone) */ --color-navy: #042638; --color-navy-dark: #021B29; --color-navy-mid: #06334B; /* Healthcare Palette Accents */ --color-healthcare-blue: var(--blue-500); /* #0288D1 */ --color-healthcare-green: var(--green-400); /* #2E7D5C */ --color-healthcare-mint-bg: rgba(168, 213, 186, 0.2); /* Soft Mint Light Surface */ --color-healthcare-blue-bg: rgba(179, 229, 252, 0.2); /* Soft Blue Light Surface */ /* Primary Action — Blue Palette (Primary actions, links, nav, info, focus) */ --color-primary: var(--blue-500); /* #0288D1 */ --color-primary-dark: #016399; --color-primary-hover: var(--blue-400); /* #29B6F6 */ --color-primary-light: rgba(179, 229, 252, 0.35); /* #B3E5FC tint */ --color-primary-soft: rgba(179, 229, 252, 0.18); --color-primary-glow: rgba(41, 182, 246, 0.28); --color-primary-surface: rgba(179, 229, 252, 0.12); /* Medical Blue Accents */ --color-medical-blue: var(--blue-500); --color-medical-dark: #015583; --color-medical-light: rgba(179, 229, 252, 0.25); /* Secondary Brand — Green Palette (Healthcare, verified, positive accents) */ --color-secondary: var(--green-400); /* #2E7D5C */ --color-secondary-dark: var(--green-500); /* #1B5E3A */ --color-secondary-hover: var(--green-300); /* #4B9B6E */ --color-secondary-light: rgba(168, 213, 186, 0.35); /* #A8D5BA tint */ --color-secondary-soft: rgba(168, 213, 186, 0.18); /* Semantic Colors */ --color-success: var(--green-400); /* #2E7D5C */ --color-success-dark: var(--green-500); /* #1B5E3A */ --color-success-bg: rgba(168, 213, 186, 0.22); /* #A8D5BA tint */ --color-success-border: var(--green-200); /* #6BBF8A */ --color-warning: var(--green-400); --color-warning-dark: var(--green-500); --color-warning-bg: rgba(168, 213, 186, 0.2); --color-warning-border: var(--green-200); --color-error: var(--blue-500); --color-error-dark: #014B73; --color-error-bg: rgba(179, 229, 252, 0.25); --color-error-border: var(--blue-300); --color-info: var(--blue-500); /* #0288D1 */ --color-info-bg: rgba(179, 229, 252, 0.25); /* #B3E5FC tint */ --color-info-border: var(--blue-200); /* #81D4FA */ /* Neutral Scale & Unified Light-Blue Application Canvas */ --color-app-background: #EAF4F9; /* Single Source of Truth Unified Soft Light-Blue Tint */ --color-background: var(--color-app-background); /* Unified application canvas */ --color-surface: #FFFFFF; /* Clean white surface for cards & content */ --color-surface-soft: #FFFFFF; /* Clean white container */ --color-surface-tint: rgba(179, 229, 252, 0.12); /* Text System */ --color-text: #062333; /* Deep navy text */ --color-text-secondary: #174054; /* Muted deep blue text */ --color-text-muted: #3D6478; /* Soft blue-gray text */ --color-text-light: #6A8FA3; /* Light metadata text */ --color-text-inverse: #FFFFFF; /* Borders */ --color-border: rgba(129, 212, 250, 0.35); /* #81D4FA tint */ --color-border-hover: var(--blue-300); /* #4FC3F7 */ --color-border-focus: var(--blue-400); /* #29B6F6 */ --color-border-strong: var(--blue-500); /* #0288D1 */ /* Legacy Aliases for Backward Compatibility */ --primary: var(--color-primary); --primary-dark: var(--color-primary-dark); --primary-light: var(--color-primary-light); --primary-glow: var(--color-primary-glow); --secondary: var(--color-secondary); --secondary-dark: var(--color-secondary-dark); --secondary-light: var(--color-secondary-light); --text: var(--color-text); --text-muted: var(--color-text-muted); --background: var(--color-background); --surface: var(--color-surface); --border: var(--color-border); --border-focus: var(--color-border-focus); --success: var(--color-success); --success-bg: var(--color-success-bg); --warning: var(--color-warning); --warning-bg: var(--color-warning-bg); --danger: var(--color-error); --danger-bg: var(--color-error-bg); --color-white: #FFFFFF; --color-black: #000000; /* Verify Badge */ --verify-badge: var(--green-500); /* #1B5E3A */ --verify-badge-bg: rgba(168, 213, 186, 0.3); /* #A8D5BA tint */ /* ------------------------------------------------------------------------- 2. TYPOGRAPHY SYSTEM — Refined Ratios ------------------------------------------------------------------------ */ --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-heading: 'Plus Jakarta Sans', 'Inter', sans-serif; /* Font Sizes — Proportional 20% Refined Compact Scale */ --font-size-display: clamp(2.2rem, 3.6vw, 2.9rem); /* ~35–46px */ --font-size-h1: clamp(1.75rem, 2.8vw, 2.45rem); /* ~28–39px */ --font-size-h2: clamp(1.45rem, 2.0vw, 2.0rem); /* ~23–32px */ --font-size-h3: clamp(1.15rem, 1.4vw, 1.35rem); /* ~18–21px */ --font-size-h4: clamp(0.98rem, 1.1vw, 1.15rem); /* ~15–18px */ --font-size-body-lg: 0.98rem; /* ~15.6px */ --font-size-body: 0.925rem; /* ~14.8px */ --font-size-sm: 0.85rem; /* ~13.6px */ --font-size-xs: 0.78rem; /* ~12.5px */ --font-size-meta: 0.725rem; /* ~11.6px */ /* Backward Compatible Aliases */ --h1-size: var(--font-size-h1); --h2-size: var(--font-size-h2); --h3-size: var(--font-size-h3); --body-size: var(--font-size-body); --meta-size: var(--font-size-meta); /* Font Weights */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* Line Heights */ --line-height-tight: 1.12; --line-height-heading: 1.22; --line-height-snug: 1.45; --line-height-body: 1.62; --line-height-relaxed: 1.75; /* ------------------------------------------------------------------------- 3. SPACING SYSTEM — Refined Compact 20% Reduction Scale ------------------------------------------------------------------------ */ --space-1: 3px; --space-2: 7px; --space-3: 10px; --space-4: 14px; --space-5: 20px; --space-6: 28px; --space-7: 35px; --space-8: 42px; --space-9: 56px; --space-10: 70px; --space-11: 84px; --space-12: 112px; /* ------------------------------------------------------------------------- 4. CONTAINER & LAYOUT — Modern Expansive Enterprise Proportions ------------------------------------------------------------------------ */ --container-width: 1540px; --container-padding: clamp(20px, 2vw, 32px); --header-height: 68px; --topbar-height: 34px; /* ------------------------------------------------------------------------- 5. BORDER RADIUS SYSTEM ------------------------------------------------------------------------ */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-pill: 9999px; --radius: var(--radius-lg); /* ------------------------------------------------------------------------- 6. SHADOW SYSTEM — Refined Multi-Layered Elevation ------------------------------------------------------------------------ */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.03); --shadow-md: 0 4px 16px -2px rgba(15, 23, 42, 0.06), 0 1px 4px rgba(15, 23, 42, 0.03); --shadow-lg: 0 12px 32px -4px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.03); --shadow-xl: 0 20px 48px -8px rgba(15, 23, 42, 0.10), 0 8px 20px rgba(15, 23, 42, 0.04); --shadow-hover: 0 8px 24px -4px rgba(2, 132, 199, 0.14), 0 2px 8px rgba(15, 23, 42, 0.04); --shadow-focus: 0 0 0 3.5px rgba(2, 132, 199, 0.18); --shadow-glow: 0 0 24px rgba(2, 132, 199, 0.16); /* ------------------------------------------------------------------------- 7. TRANSITIONS ------------------------------------------------------------------------ */ --transition-fast: 180ms cubic-bezier(0.16, 1, 0.3, 1); --transition-normal: 250ms cubic-bezier(0.16, 1, 0.3, 1); --transition-slow: 350ms cubic-bezier(0.16, 1, 0.3, 1); }