/* ========================================================================== Manvin Advanced Healthcare Solutions — Design Tokens Palette matches the official brand logo spec (manvin-logo-final.md). Rebranding = edit this file only. ========================================================================== */ :root { /* --- Brand blues (from the official logo spec) --- */ --color-primary: #0057A8; /* manvin-blue-600 — primary brand blue */ --color-primary-600: #003F80; /* pressed/hover state */ --color-primary-100: #E3EEFC; /* faint tint for chips/backgrounds */ --color-secondary: #0096D6; /* manvin-cyan-500 — accent, tip dot */ --color-secondary-600: #0080C8; /* manvin-blue-500 */ --color-secondary-tip: #29ABE2; /* manvin-cyan-400 — brightest highlight */ --color-tint-100: #EBF4FF; /* page-level pale wash (manvin-tint-100) */ --color-tint-200: #D8EAFB; /* halo rings, dividers on light bg (manvin-line-100) */ --color-ink: #003166; /* manvin-navy-900 — body/heading text */ --color-muted: #4A7299; /* body/secondary text — brand slate darkened to pass WCAG AA (5.05:1 on white) */ --color-muted-700: #3D6C99; /* subtitle / label text */ --color-link: #0071B0; /* accessible text-link/label blue (5.26:1 on white) */ --color-on-tint: #0057A8; /* text sitting on --color-primary-100 chips (6.11:1) */ --color-surface: #FFFFFF; --color-surface-alt: #F3F8FF; --color-surface-raised: #FFFFFF; --color-border: #D6E8F7; /* Action utility colors (not brand accents — tied to a specific channel) */ --color-whatsapp: #25D366; --color-whatsapp-600: #1DAE53; --color-danger: #C0392B; /* --- Gradients --- */ --gradient-mark: linear-gradient(180deg, var(--color-primary), var(--color-secondary-tip)); --gradient-hero: radial-gradient(120% 120% at 15% 0%, var(--color-tint-100) 0%, var(--color-surface) 55%); --gradient-ribbon: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 55%, var(--color-secondary-tip) 100%); /* --- Type --- */ --font-display: "Sora", "Segoe UI", Arial, sans-serif; --font-body: "Inter", "Segoe UI", Arial, sans-serif; --fs-xs: 0.8125rem; --fs-sm: 0.9375rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.375rem; --fs-xl: 1.75rem; --fs-2xl: 2.25rem; --fs-3xl: 3rem; --fs-4xl: 3.75rem; --lh-tight: 1.15; --lh-normal: 1.55; /* --- Spacing scale --- */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 8rem; --container-max: 1240px; --container-pad: clamp(1.25rem, 4vw, 3rem); /* --- Radii / shadow / motion --- */ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px; --shadow-sm: 0 2px 10px rgba(0, 49, 102, 0.06); --shadow-md: 0 12px 32px rgba(0, 87, 168, 0.12); --shadow-lg: 0 24px 64px rgba(0, 87, 168, 0.18); --shadow-glow: 0 0 0 1px rgba(0, 150, 214, 0.12), 0 20px 48px rgba(0, 150, 214, 0.18); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 160ms; --duration-base: 320ms; --duration-slow: 640ms; --header-height: 96px; --z-header: 100; --z-fab: 200; --z-modal: 300; } /* --- Dark theme overrides (toggle via [data-theme="dark"] on ) --- */ :root[data-theme="dark"] { --color-ink: #EAF4FF; --color-muted: #A9CDEA; --color-muted-700: #C7E0F5; --color-link: #5FD0FF; --color-on-tint: #8FD1F5; --color-surface: #071B33; --color-surface-alt: #0C2340; --color-surface-raised: #102B4C; --color-border: #1D3E5E; --color-tint-100: #0C2340; --color-tint-200: #1D3E5E; --color-primary-100: #123056; --gradient-hero: radial-gradient(120% 120% at 15% 0%, #0C2340 0%, #071B33 55%); --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35); --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45); --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-ink: #EAF4FF; --color-muted: #A9CDEA; --color-muted-700: #C7E0F5; --color-link: #5FD0FF; --color-on-tint: #8FD1F5; --color-surface: #071B33; --color-surface-alt: #0C2340; --color-surface-raised: #102B4C; --color-border: #1D3E5E; --color-tint-100: #0C2340; --color-tint-200: #1D3E5E; --color-primary-100: #123056; --gradient-hero: radial-gradient(120% 120% at 15% 0%, #0C2340 0%, #071B33 55%); --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35); --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45); --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55); } }