/* ============================================ Pinoy Medical Center - CSS Design System Serene Sage/Mint Green & Warm Wood Theme ============================================ */ /* Google Fonts - Plus Jakarta Sans & DM Sans */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600&display=swap'); :root { /* ── Core Brand Colours (Medical Sage Mint & Deep Forest) ─── */ --color-primary: #76BAA6; /* Serene Medical Sage Mint Green */ --color-primary-light: #98D1C0; /* Light Mint Green */ --color-primary-dark: #58A38F; /* Deep Sage */ --color-primary-darker: #3E8371; /* Rich Clinical Sage */ --color-secondary: #163A32; /* Deep Forest Teal / Dark Slate Green */ --color-secondary-light:#1F4A40; /* Forest Mint */ --color-secondary-lighter:#285C50; /* Mid Forest Teal */ --color-accent: #C28E53; /* Warm Honey Oak Timber Accent */ --color-accent-light: #DAA362; /* Honey Amber */ --color-accent-dark: #9E6F38; /* Rich Oak Wood */ /* ── Neutrals (Warm Alabaster Cream & Mint Tinted Whites) ── */ --color-white: #FFFFFF; --color-gray-50: #F7F8F4; /* Alabaster Cream (Ceiling Tone) */ --color-gray-100: #EEF0E7; /* Soft Mint Linen */ --color-gray-150: #E0E5DC; /* Light Sage Tint */ --color-gray-200: #D3D9CE; /* Soft Cream Border */ --color-gray-300: #B5BEAF; /* Muted Sage Gray */ --color-gray-400: #8E9889; /* Mid Sage Gray */ --color-gray-500: #657060; /* Slate Muted Sage */ --color-gray-600: #465243; /* Deep Slate Sage */ --color-gray-700: #2E3A2C; /* Dark Forest Charcoal */ --color-gray-800: #1B261A; /* Dark Forest Shadow */ --color-gray-900: #0E170F; /* Near Black Forest */ /* ── Semantic (Mint & Warm Oak Accents) ── */ --color-success: #58A38F; --color-success-light: #E6F7F2; --color-success-dark: #3E8371; --color-warning: #C28E53; --color-warning-light: #FDF6EE; --color-error: #C95252; --color-error-light: #FDF0F0; --color-info: #529986; --color-info-light: #EBF6F3; /* ── Gradients (Sage Mint, Deep Forest & Warm Timber) ── */ --gradient-primary: linear-gradient(135deg, #76BAA6 0%, #58A38F 100%); /* Soft Sage Mint gradient */ --gradient-teal: linear-gradient(135deg, #163A32 0%, #76BAA6 100%); /* Forest to Sage Mint gradient */ --gradient-hero: linear-gradient(135deg, rgba(118,186,166,0.92) 0%, rgba(22,58,50,0.88) 100%); --gradient-hero-dark: linear-gradient(180deg, rgba(14,23,15,0.96) 0%, rgba(22,58,50,0.98) 100%); --gradient-glass: linear-gradient(135deg, rgba(118,186,166,0.18) 0%, rgba(22,58,50,0.85) 100%); --gradient-card: linear-gradient(145deg, #FFFFFF 0%, #F4FAF7 100%); --gradient-section: linear-gradient(180deg, #EEF0E7 0%, #F7F8F4 100%); --gradient-cta: linear-gradient(135deg, #76BAA6 0%, #163A32 100%); /* Sage Mint to Forest */ /* ── Glassmorphism ── */ --bg-glass: rgba(255, 255, 255, 0.88); --bg-glass-dark: rgba(22, 58, 50, 0.90); --blur-glass: 14px; --blur-glass-lg: 24px; --border-glass: rgba(118,186,166,0.30); --border-glass-light: rgba(118,186,166,0.15); /* ── Typography ── */ --font-primary: 'Plus Jakarta Sans', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-heading: 'Plus Jakarta Sans', var(--font-primary); --font-mono: 'JetBrains Mono', 'Courier New', monospace; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; --font-size-5xl: 3rem; --font-size-6xl: 3.75rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold:800; --line-height-tight: 1.2; --line-height-normal: 1.55; --line-height-relaxed: 1.8; /* ── Spacing ── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10:2.5rem; --space-12:3rem; --space-16: 4rem; --space-20:5rem; --space-24:6rem; /* ── Border Radius ── */ --radius-sm: 0.375rem; --radius-md: 0.625rem; --radius-lg: 0.875rem; --radius-xl: 1.25rem; --radius-2xl: 1.75rem; --radius-3xl: 2.5rem; --radius-full: 9999px; /* ── Shadows ── */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.06); --shadow-sm: 0 1px 4px rgba(118,186,166,0.15), 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 12px rgba(118,186,166,0.20), 0 2px 4px rgba(0,0,0,0.06); --shadow-lg: 0 10px 24px rgba(118,186,166,0.25), 0 4px 8px rgba(0,0,0,0.08); --shadow-xl: 0 20px 40px rgba(118,186,166,0.30), 0 8px 16px rgba(0,0,0,0.10); --shadow-2xl: 0 32px 64px rgba(118,186,166,0.35); --shadow-blue: 0 8px 32px rgba(118,186,166,0.30); --shadow-teal: 0 8px 32px rgba(194,142,83,0.30); --shadow-glass: 0 8px 32px rgba(22,58,50,0.15); --shadow-inset: inset 0 1px 3px rgba(22,58,50,0.10); /* ── Transitions ── */ --transition-fast: 150ms cubic-bezier(0.4,0,0.2,1); --transition-normal: 300ms cubic-bezier(0.4,0,0.2,1); --transition-smooth: 400ms cubic-bezier(0.25,0.46,0.45,0.94); --transition-slow: 600ms cubic-bezier(0.4,0,0.2,1); /* ── Z-Index ── */ --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500; --z-tooltip: 700; /* ── Containers ── */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1440px; } /* ── Light / Default Theme ── */ :root { --color-bg-primary: #76BAA6; /* Sage Mint Green */ --color-bg-secondary: #163A32; /* Deep Forest Teal */ --color-bg-tertiary: #F7F8F4; /* Alabaster Cream */ --color-text-primary: #163A32; /* Deep Forest text */ --color-text-secondary: #2E3A2C; /* Dark Forest Slate text */ --color-text-muted: #657060; /* Muted Sage Slate */ --color-border: rgba(118,186,166,0.35); /* Sage Mint border */ --color-border-light: rgba(118,186,166,0.18); }