/* ============================================================ Design tokens — Philips Order & Quotation app Light/Dark themes switch on . All colors meet WCAG AA against their intended surfaces. ============================================================ */ :root { /* Brand */ --philips-blue: #0b5ed7; --philips-navy: #063a8c; /* Radii */ --r-sm: 10px; --r-md: 16px; --r-lg: 20px; --r-xl: 24px; --r-pill: 999px; /* Spacing scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; /* Type scale */ --fs-xs: 0.72rem; --fs-sm: 0.82rem; --fs-base: 0.95rem; --fs-md: 1.05rem; --fs-lg: 1.25rem; --fs-xl: 1.55rem; --fs-2xl: 1.9rem; /* Motion */ --ease: cubic-bezier(0.25, 0.1, 0.25, 1); --t-fast: 150ms; --t-med: 220ms; /* Layout */ --nav-h: 64px; --header-h: 58px; --touch: 44px; --content-max: 1080px; } /* ------------------------------ Light theme */ :root, [data-theme='light'] { color-scheme: light; --bg: #f5f8fe; --bg-grad: linear-gradient(180deg, #eef4ff 0%, #f5f8fe 240px); --card: #ffffff; --card-2: #fbfdff; --tint: #e8f0fe; --tint-strong: #d7e5fd; --border: #e3eaf6; --border-strong: #cdd9ec; --text: #0f1b2d; --text-2: #44546d; --text-3: #5d6d87; --primary: #0b5ed7; --primary-press: #094eb2; --on-primary: #ffffff; --accent: #063a8c; --link: #0b5ed7; --ok: #067647; --ok-bg: #e4f7ec; --warn: #93470c; --warn-bg: #fdf0dd; --bad: #b42318; --bad-bg: #fdeceb; --promo: #8a4b03; --promo-bg: #fff0d9; --shadow-1: 0 1px 2px rgba(9, 30, 66, 0.06), 0 4px 14px rgba(9, 30, 66, 0.06); --shadow-2: 0 4px 10px rgba(9, 30, 66, 0.08), 0 12px 32px rgba(9, 30, 66, 0.1); --shadow-sheet: 0 -8px 40px rgba(9, 30, 66, 0.18); --overlay: rgba(10, 18, 34, 0.45); --header-blur-bg: rgba(245, 248, 254, 0.82); /* product photo surface — must contrast white product bodies */ --img-bg: linear-gradient(180deg, #e9f0fb 0%, #d8e4f5 100%); } /* ------------------------------ Dark theme (deep navy, ref-2/ref-4) */ [data-theme='dark'] { color-scheme: dark; --bg: #0a1020; --bg-grad: radial-gradient(1200px 500px at 50% -200px, #10214a 0%, #0a1020 70%); --card: #121b31; --card-2: #16203a; --tint: #1a2848; --tint-strong: #223458; --border: #223051; --border-strong: #31456f; --text: #eef3fb; --text-2: #aebcd4; --text-3: #8b9ab5; --primary: #0b5ed7; --primary-press: #1f6fe8; --on-primary: #ffffff; --accent: #78a9ff; --link: #78a9ff; --ok: #4ade80; --ok-bg: #10331f; --warn: #fbbf24; --warn-bg: #3a2a0a; --bad: #f87171; --bad-bg: #3d1512; --promo: #fcd34d; --promo-bg: #3a2b06; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.35); --shadow-2: 0 4px 10px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.5); --shadow-sheet: 0 -8px 40px rgba(0, 0, 0, 0.6); --overlay: rgba(2, 6, 16, 0.62); --header-blur-bg: rgba(10, 16, 32, 0.82); --img-bg: linear-gradient(180deg, #1a2540 0%, #131c31 100%); }