/* NOTE — this is v2's assets/tokens.css, verbatim. src/build.mjs links tokens.css and styles.css separately, and styles.css already carries these same tokens as its section 1, so the two agree by construction. The file is kept (rather than deleted) so the existing keeps resolving and the tokens are in place before the 250KB stylesheet finishes parsing. v1's own tokens are gone with the rest of the old design. */ /* ========================================================================== PharmEasy — Design tokens Medicines by Class v2 Single source of truth for colour, type, spacing, radii, shadows, layout. Every other stylesheet must consume these variables, never raw values. ========================================================================== */ :root { /* --------------------------------------------------------------------- 1. BRAND --------------------------------------------------------------------- */ --pe-teal: #10847E; /* primary brand / CTA fill / active nav */ --pe-teal-dark: #0E746E; /* hover + pressed on teal fills */ --pe-teal-muted: #83C9C6; /* disabled teal, thin rules */ --pe-teal-100: #DEF7F8; /* tinted surface (info strips) */ --pe-teal-050: #DBFFF5; /* lightest teal wash */ /* --------------------------------------------------------------------- 2. TEXT --------------------------------------------------------------------- */ --pe-text: #30363C; /* headings + primary body */ --pe-text-secondary: #4F585E; /* body copy, footer links */ --pe-text-tertiary: #6E787E; /* meta, captions, breadcrumb trail */ --pe-text-muted: #8897A2; /* placeholder, disabled, current crumb */ --pe-text-inverse: #FFFFFF; /* --------------------------------------------------------------------- 3. LINES + SURFACES --------------------------------------------------------------------- */ --pe-border: #D7DFE5; /* default 1px control border */ --pe-border-light: #E6EBF4; /* dividers, card hairlines */ --pe-border-faint: #F1F1F2; /* lightest separator */ --pe-white: #FFFFFF; --pe-surface: #F5F8FC; /* page background */ --pe-surface-alt: #F4F7FB; /* alternating band */ --pe-surface-sunken: #EDF2F9; /* search input well, chips */ /* --------------------------------------------------------------------- 4. ACCENTS --------------------------------------------------------------------- */ /* PLUS / membership — purple */ --pe-purple: #8678DE; --pe-purple-dark: #6E53BA; --pe-purple-light: #CFC9F2; --pe-purple-bg: #F1EEFF; /* Lab Tests / links — blue */ --pe-blue: #3B7AEF; --pe-blue-dark: #3661B0; --pe-blue-light: #B5CDF7; --pe-blue-bg: #EBF2FF; /* Savings / in-stock — green */ --pe-green: #62BF9F; --pe-green-dark: #45A081; --pe-green-light: #BFEDDD; --pe-green-bg: #F2FFF8; /* Discount / error — red */ --pe-red: #F47779; --pe-red-dark: #CC4C4E; --pe-red-bg: #FFF5F5; /* Ratings / offers — amber */ --pe-amber: #F5B326; --pe-amber-bg: #FFF8E3; --pe-orange: #FF9341; --pe-orange-dark: #CF7530; /* --------------------------------------------------------------------- 5. TYPOGRAPHY --------------------------------------------------------------------- */ --pe-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* size scale */ --pe-fs-8: 8px; --pe-fs-10: 10px; --pe-fs-11: 11px; --pe-fs-12: 12px; --pe-fs-13: 13px; --pe-fs-14: 14px; /* base body */ --pe-fs-15: 15px; --pe-fs-16: 16px; --pe-fs-18: 18px; --pe-fs-20: 20px; --pe-fs-22: 22px; --pe-fs-24: 24px; --pe-fs-26: 26px; --pe-fs-30: 30px; --pe-fs-36: 36px; --pe-fs-40: 40px; --pe-fs-42: 42px; /* line-height scale (always px — the design uses fixed leading) */ --pe-lh-16: 16px; --pe-lh-18: 18px; --pe-lh-20: 20px; --pe-lh-22: 22px; --pe-lh-24: 24px; /* base body leading */ --pe-lh-28: 28px; --pe-lh-32: 32px; --pe-lh-40: 40px; /* weights */ --pe-fw-regular: 400; --pe-fw-medium: 500; --pe-fw-semibold: 600; --pe-fw-bold: 700; /* --------------------------------------------------------------------- 6. SPACING (4px base grid) --------------------------------------------------------------------- */ --pe-sp-2: 2px; --pe-sp-4: 4px; --pe-sp-6: 6px; --pe-sp-8: 8px; --pe-sp-10: 10px; --pe-sp-12: 12px; --pe-sp-16: 16px; --pe-sp-20: 20px; --pe-sp-24: 24px; --pe-sp-32: 32px; --pe-sp-40: 40px; --pe-sp-48: 48px; --pe-sp-56: 56px; --pe-sp-64: 64px; /* --------------------------------------------------------------------- 7. RADII --------------------------------------------------------------------- */ --pe-r-2: 2px; --pe-r-4: 4px; --pe-r-6: 6px; --pe-r-8: 8px; /* cards, inputs, buttons */ --pe-r-12: 12px; --pe-r-16: 16px; --pe-r-36: 36px; --pe-r-pill: 100px; /* --------------------------------------------------------------------- 8. ELEVATION --------------------------------------------------------------------- */ --pe-shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 2px 1px rgba(0,0,0,.04), 0 1px 5px rgba(0,0,0,.08); --pe-shadow-md: 0 3px 4px rgba(33,33,33,.06), 0 3px 3px rgba(33,33,33,.04), 0 1px 8px rgba(33,33,33,.08); --pe-shadow-lg: 0 6px 10px rgba(33,33,33,.06), 0 1px 18px rgba(33,33,33,.04), 0 3px 5px rgba(33,33,33,.08); --pe-shadow-xl: 0 8px 10px rgba(0,0,0,.06), 0 3px 14px rgba(0,0,0,.04), 0 5px 5px rgba(0,0,0,.08); --pe-shadow-card: 0 4px 8px rgba(0,0,0,.06); --pe-shadow-hairline: inset 0 -1px 0 rgba(0,0,0,.12); /* --------------------------------------------------------------------- 9. LAYOUT --------------------------------------------------------------------- */ --pe-container: 1280px; /* content column inside the 1440 artboard */ --pe-gutter: 80px; /* (1440 - 1280) / 2 */ --pe-gutter-mobile: 16px; --pe-header-top-h: 80px; /* utility row */ --pe-nav-h: 48px; /* category nav row */ --pe-control-h: 48px; /* search field + Search button */ --pe-breadcrumb-h: 40px; /* --------------------------------------------------------------------- 10. MOTION --------------------------------------------------------------------- */ --pe-ease: cubic-bezier(.4, 0, .2, 1); --pe-dur: 160ms; }