/* ========================================================================= SMART NUTRITION EXPERIENCE — DESIGN TOKENS Hospital Brand + Official Dietary Color Codes (source: Dietary Color Codes Guide — reference/Dietary_Color_Codes_Guide.pdf, original 18-diet set). These values are the single source of truth for every diet color used across all surfaces (brand book, UI kit, portals, dashboards, brochure). v2.0 UPDATE: the hospital issued an updated bilingual guide (reference/Dietary_Color_Codes_Guide_SGH.pdf) which retains the original 18 diets above and introduces 11 new, commonly requested diets (Toddler, School-Age, Adolescent, Vegan, Cardiac/Heart-Healthy, High Fiber, Low Potassium, Neutropenic, Bariatric, Ketogenic, Infant). The guide's printed color swatches were reviewed, but pixel-level swatch color could not be extracted with certified hex precision from the compressed PDF preview — so each of these 11 NEW diets currently carries a good, harmonious, clearly-distinguishable placeholder hex chosen to fit the existing system and stay visually distinct from all other diets. Swap in the hospital's exact Pantone/hex values as soon as they are confirmed — ids stay stable, so only the hex values need updating, here and in js/diet-colors.js. See the "NEW (v2.0)" block below — every such diet also carries isNew:true in js/diet-colors.js so the UI can flag it. ========================================================================= */ :root{ /* ---------- Hospital Brand Core ---------- */ --brand-navy: #0B2A3F; /* heart mark deep navy / primary text */ --brand-blue: #1E7FB8; /* heart mark blue half */ --brand-blue-dark: #145E8A; --brand-green: #4CAE50; /* heart mark green half */ --brand-green-dark: #2F8C3C; --brand-teal: #159AA6; /* "Caring like family" tagline blue-teal */ --brand-ink: #14212B; --brand-paper: #F7F9FA; --brand-paper-2: #EFF3F5; --brand-line: #E1E8EC; --brand-muted: #5D7280; /* ---------- Elevation / surface ---------- */ --surface-0: #FFFFFF; --surface-1: #F7F9FA; --surface-2: #EFF3F5; --surface-3: #E4EAED; /* ---------- Semantic (system) colors — NOT diet colors ---------- */ --sem-success: #2F9E58; --sem-warning: #E2A310; --sem-error: #D64545; --sem-info: #1E7FB8; /* ---------- Radii / shadow / spacing scale ---------- */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-round: 999px; --shadow-sm: 0 1px 2px rgba(11,42,63,.06), 0 1px 1px rgba(11,42,63,.04); --shadow-md: 0 6px 20px rgba(11,42,63,.08); --shadow-lg: 0 18px 40px rgba(11,42,63,.14); --shadow-glow: 0 0 0 4px rgba(30,127,184,.14); --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --font-ar: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif; --font-en: 'Inter', -apple-system, sans-serif; /* ======================================================================= OFFICIAL DIETARY COLOR CODES — 18 diets Locked reference. Do not alter, remix, or reinterpret elsewhere. ======================================================================= */ --diet-regular: #1D7293; /* Regular Diet / الحمية العادية */ --diet-highcal: #F6B27E; /* High Calorie Diet / حمية عالية السعرات */ --diet-lowfat: #6DCBA3; /* Low Fat Diet / حمية قليلة الدهون */ --diet-lowsodium: #9DA0A2; /* Low Sodium Diet / حمية قليلة الصوديوم */ --diet-vegetarian: #376A30; /* Vegetarian Diet / الحمية النباتية */ --diet-glutenfree: #CF9F2A; /* Gluten-Free Diet / حمية خالية من الجلوتين */ --diet-diabetes: #DF7428; /* Diabetes Diet / حمية مرضى السكري */ --diet-pedidiabetes: #E6918D; /* Pediatric Diabetes Diet / حمية سكري الأطفال */ --diet-renal: #0B8478; /* Renal Diet / حمية مرضى الكلى */ --diet-g6pd: #6A572A; /* G6PD Deficiency Diet / حمية نقص أنزيم G6PD */ --diet-fodmap: #979D50; /* FODMAP Diet / حمية الفودماب */ --diet-behavioral: #17B7DF; /* Behavioral Health Diet / حمية الصحة السلوكية */ --diet-fullliquid: #F19293; /* Full Liquid Diet / الحمية السائلة الكاملة */ --diet-clearliquid: #C01D32; /* Clear Liquid Diet / الحمية السائلة الصافية */ --diet-surgicalsoft: #B11370; /* Surgical Soft Diet / الحمية اللينة بعد العمليات */ --diet-pureed: #8C2A95; /* Puréed Diet / الحمية المهروسة */ --diet-postpartum: #C18B5B; /* Postpartum Diet / حمية ما بعد الولادة */ --diet-kids: #6CD547; /* Kids' Diet / حمية الأطفال */ /* ---------- NEW (v2.0) — 11 additional diets, provisional palette ---------- */ --diet-toddler: #8FA6E3; /* Toddler Diet (1-3y) / حمية الأطفال الصغار */ --diet-schoolage: #6FCF97; /* School-Age Diet (4-9y) / حمية أطفال المدرسة */ --diet-adolescent: #56B4D3; /* Adolescent Diet (10-18y) / حمية المراهقين */ --diet-vegan: #1B5E20; /* Vegan Diet / الحمية النباتية الصرفة (فيغن) */ --diet-cardiac: #A93226; /* Cardiac / Heart-Healthy Diet / حمية القلب */ --diet-highfiber: #B8860B; /* High Fiber Diet / حمية عالية الألياف */ --diet-lowpotassium: #A3B18A; /* Low Potassium Diet / حمية قليلة البوتاسيوم */ --diet-neutropenic: #024959; /* Neutropenic Diet / حمية نقص المناعة */ --diet-bariatric: #5B4B8A; /* Bariatric Diet / حمية السمنة (جراحات إنقاص الوزن) */ --diet-keto: #2C2C34; /* Ketogenic (Low-Carb) Diet / حمية الكيتو */ --diet-infant: #FFD966; /* Infant Diet (0-12m) / حمية الرضّع */ } /* Utility: tinted background for each diet (for chips/cards) generated via color-mix */ .diet-tint-regular { background: color-mix(in srgb, var(--diet-regular) 14%, white); } .diet-tint-highcal { background: color-mix(in srgb, var(--diet-highcal) 18%, white); } .diet-tint-lowfat { background: color-mix(in srgb, var(--diet-lowfat) 16%, white); } .diet-tint-lowsodium { background: color-mix(in srgb, var(--diet-lowsodium) 16%, white); } .diet-tint-vegetarian { background: color-mix(in srgb, var(--diet-vegetarian) 12%, white); } .diet-tint-glutenfree { background: color-mix(in srgb, var(--diet-glutenfree) 16%, white); } .diet-tint-diabetes { background: color-mix(in srgb, var(--diet-diabetes) 16%, white); } .diet-tint-pedidiabetes { background: color-mix(in srgb, var(--diet-pedidiabetes) 18%, white); } .diet-tint-renal { background: color-mix(in srgb, var(--diet-renal) 14%, white); } .diet-tint-g6pd { background: color-mix(in srgb, var(--diet-g6pd) 14%, white); } .diet-tint-fodmap { background: color-mix(in srgb, var(--diet-fodmap) 16%, white); } .diet-tint-behavioral { background: color-mix(in srgb, var(--diet-behavioral) 16%, white); } .diet-tint-fullliquid { background: color-mix(in srgb, var(--diet-fullliquid) 18%, white); } .diet-tint-clearliquid { background: color-mix(in srgb, var(--diet-clearliquid) 12%, white); } .diet-tint-surgicalsoft { background: color-mix(in srgb, var(--diet-surgicalsoft) 14%, white); } .diet-tint-pureed { background: color-mix(in srgb, var(--diet-pureed) 14%, white); } .diet-tint-postpartum { background: color-mix(in srgb, var(--diet-postpartum) 16%, white); } .diet-tint-kids { background: color-mix(in srgb, var(--diet-kids) 18%, white); } .diet-tint-toddler { background: color-mix(in srgb, var(--diet-toddler) 18%, white); } .diet-tint-schoolage { background: color-mix(in srgb, var(--diet-schoolage) 18%, white); } .diet-tint-adolescent { background: color-mix(in srgb, var(--diet-adolescent) 18%, white); } .diet-tint-vegan { background: color-mix(in srgb, var(--diet-vegan) 12%, white); } .diet-tint-cardiac { background: color-mix(in srgb, var(--diet-cardiac) 14%, white); } .diet-tint-highfiber { background: color-mix(in srgb, var(--diet-highfiber) 16%, white); } .diet-tint-lowpotassium { background: color-mix(in srgb, var(--diet-lowpotassium) 20%, white); } .diet-tint-neutropenic { background: color-mix(in srgb, var(--diet-neutropenic) 14%, white); } .diet-tint-bariatric { background: color-mix(in srgb, var(--diet-bariatric) 14%, white); } .diet-tint-keto { background: color-mix(in srgb, var(--diet-keto) 12%, white); } .diet-tint-infant { background: color-mix(in srgb, var(--diet-infant) 22%, white); }