/* ========================================================================== Hospitality News — Design Tokens Palette extracted from the Hospitality News logo illustration. ========================================================================== */ :root { /* Brand palette */ --navy: #0B2347; --navy-deep: #081A36; --navy-soft: #16345F; --red: #B51F24; --red-warm: #C72A25; --gold: #E8B452; --gold-soft: #F3D9A4; --ivory: #FAF8F3; --white: #FFFFFF; /* Text */ --text: #15171A; --text-muted: #68707C; --text-invert: #F5F7FA; /* Surfaces */ --bg: #FFFFFF; --bg-alt: #FAF8F3; --bg-card: #FFFFFF; --bg-header: #FFFFFF; --bg-nav: #0B2347; --bg-footer: #081A36; /* Lines */ --border: #E7E9ED; --border-strong: #CBD2DB; --rule: #0B2347; /* States */ --link: #0B2347; --link-hover: #B51F24; --focus-ring: #C72A25; /* Elevation (restrained) */ --shadow-1: 0 1px 2px rgba(11, 35, 71, 0.06); --shadow-2: 0 4px 14px rgba(11, 35, 71, 0.10); --shadow-3: 0 12px 32px rgba(8, 26, 54, 0.16); /* Type */ --font-serif: "IBM Plex Serif", "Noto Serif", Georgia, "Times New Roman", serif; --font-sans: "IBM Plex Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-nepali: "Karma", "Noto Sans Devanagari", "Mangal", sans-serif; --fs-hero: clamp(1.9rem, 1.2rem + 2.4vw, 3.4rem); /* 44–56px on desktop */ --fs-section: clamp(1.45rem, 1.1rem + 1.2vw, 2.1rem); /* 28–36px */ --fs-card-lg: clamp(1.15rem, 1rem + .6vw, 1.5rem); --fs-card: clamp(1.05rem, .95rem + .35vw, 1.25rem); /* 18–24px */ --fs-body: clamp(1.0rem, .96rem + .2vw, 1.11rem); /* 17–19px */ --fs-meta: 0.845rem; /* 13–14px */ --fs-small: 0.8rem; --lh-tight: 1.22; --lh-body: 1.72; /* Layout */ --container: 1240px; --article-width: 760px; --gutter: clamp(1rem, 2.5vw, 1.5rem); --radius: 6px; --radius-lg: 10px; /* Motion */ --ease: cubic-bezier(.33, .8, .3, 1); --speed: 180ms; /* Z-index scale */ --z-sticky: 60; --z-dropdown: 70; --z-overlay: 90; --z-modal: 100; --z-toast: 110; } /* -------------------------------------------------------------------------- Dark mode — deep navy-charcoal, never pure black. Activated by [data-theme="dark"] on ; default follows system in JS. -------------------------------------------------------------------------- */ [data-theme="dark"] { --navy: #9FB4D6; --navy-deep: #0C1626; --navy-soft: #1B3053; --gold: #E0B465; --text: #E8EAF0; --text-muted: #9AA5B5; --bg: #0E1830; --bg-alt: #101C36; --bg-card: #14213D; --bg-header: #0E1830; --bg-nav: #0A1428; --bg-footer: #0A1222; --border: #22314F; --border-strong: #31435F; --rule: #3E547B; --link: #DCE4F2; --link-hover: #F0A8A4; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.45); --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.55); } [data-theme="dark"] img { filter: brightness(.92) contrast(.98); }