/* * Medicom — Design Tokens * This file defines all CSS custom properties used by pages.css. * Keep this file variables-only; all component styles live in pages.css. */ @import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;900&family=Roboto:wght@300;400;500;700;900&family=Jost:wght@300;400;500;600;700;800;900&display=swap"); :root { /* Brand palette — main-color-one..four are dynamic (set via the color-settings admin panel and declared on :root by tenant/frontend/partials/css-variable.blade.php, which loads earlier in ). Do NOT redeclare them here — that would silently clobber the admin's values (CSS custom properties are global + last-wins). --main-color-five has no admin field, so it's derived from main-color-one instead of being a separate hardcoded hex — keeps the derived hover/gradient shade tracking whatever primary color the admin picks. */ --main-color-five: color-mix(in srgb, var(--main-color-one, #1A85ED) 82%, black); /* Typography */ --jost-font: "Jost", sans-serif; --roboto-font: "Roboto", sans-serif; --rubik-font: "Rubik", sans-serif; --manrope-font: "Rubik", sans-serif; /* fallback — Manrope not loaded */ --roboto-slab-font: "Roboto", serif; /* fallback — Roboto Slab not loaded */ --opensans-font: "Roboto", sans-serif; --montserrat-font: "Rubik", sans-serif; --playfair-font: "Rubik", serif; /* Semantic */ --stock-color: #28a745; /* in-stock green */ --heading-color-home-19: var(--heading-color, #1B1C25); } .el-logo-img { max-height: 46px; object-fit: contain; display: block; }