/* ========================================================================== Mada — Design Tokens Single source of truth. Values are EXACT from the Figma DS export (Mada DS Exports / "Mada BNPL" library). Do not hardcode any value that exists here — reference var(--…). See CLAUDE.md §3. Naming: --color-* · --space-* · --fs-* · --lh-* · --ls-* · --radius-* --border-* · --font-* · --fw-* · --container-* · --grid-* ========================================================================== */ :root { /* ---------------------------------------------------------------------- COLOURS — Core / Neutral ---------------------------------------------------------------------- */ --color-white: #F8FAFC; /* Core/White · "Statement White" */ --color-black: #071124; /* Core/Black · "Vault Black" */ --color-neutral-50: #F9FAFB; --color-neutral-100: #F3F4F6; --color-neutral-150: #EAECEF; --color-neutral-200: #E0E2E8; --color-neutral-300: #C4C8D2; --color-neutral-400: #9BA0AB; --color-neutral-500: #888F93; --color-neutral-600: #6B7280; --color-neutral-700: #4B5563; --color-neutral-800: #2D3440; --color-neutral-900: #111827; --color-neutral-950: #071124; /* ---------------------------------------------------------------------- COLOURS — Brand: MintPay (PRIMARY = 50) ---------------------------------------------------------------------- */ --color-mint-5: #EEFCFB; --color-mint-10: #DBFFFE; --color-mint-15: #C5F7F6; --color-mint-20: #AFF0EE; --color-mint-25: #83E0DE; --color-mint-30: #58D1CF; --color-mint-40: #2CC1BF; --color-mint-50: #00B2AF; /* PRIMARY */ --color-mint-60: #008E8C; --color-mint-70: #006B69; --color-mint-80: #004746; --color-mint-90: #002423; --color-mint-100: #001212; /* ---------------------------------------------------------------------- COLOURS — Brand: TrustBlue (SECONDARY = 50) ---------------------------------------------------------------------- */ --color-trust-5: #EDF9FF; --color-trust-10: #D6F0FF; --color-trust-15: #C1E3F7; --color-trust-20: #ABD6EF; --color-trust-25: #96C9E6; --color-trust-30: #56A2CE; --color-trust-40: #2B88BD; --color-trust-50: #006EAD; /* SECONDARY */ --color-trust-60: #00588A; --color-trust-70: #004268; --color-trust-80: #002C45; --color-trust-90: #001623; --color-trust-100: #000B11; /* ---------------------------------------------------------------------- COLOURS — Brand accents ---------------------------------------------------------------------- */ --color-ice-credit: #D3EFFF; --color-ice-credit-dark: #A8D9FF; --color-vault-navy: #002D4E; --color-vault-navy-light: #006EAD; /* alias → TrustBlue/50 */ --color-liquid-mint: #56E3D6; --color-liquid-mint-dark: #2ECFC0; /* ---------------------------------------------------------------------- COLOURS — Feedback / status (named "50" steps; full ramps in the export) ---------------------------------------------------------------------- */ --color-error: #F30032; /* OverdueRed/50 */ --color-success: #00D878; /* ClearedGreen/50 */ --color-warning: #FF8726; /* PendingOrange/50 */ /* ---------------------------------------------------------------------- COLOURS — Semantic roles (the vocabulary used across the site) ---------------------------------------------------------------------- */ --color-primary: var(--color-mint-50); --color-primary-hover: var(--color-mint-60); --color-secondary: var(--color-trust-50); --color-cta: var(--color-vault-navy); /* "CTA buttons and dark sections" */ --color-bg: var(--color-white); --color-bg-muted: var(--color-neutral-100); --color-surface-dark: var(--color-black); --color-text: var(--color-black); --color-text-muted: var(--color-neutral-600); --color-text-on-dark: var(--color-white); --color-link: var(--color-mint-50); /* ---------------------------------------------------------------------- BORDER COLOURS (Grid/global.tokens.json) ---------------------------------------------------------------------- */ --border-color-default: #889193; --border-color-primary: #00B2AF; --border-color-secondary: #006EAD; --border-color-error: #F30032; --border-color-success: #00D878; --border-color-pending: #FF8726; /* ---------------------------------------------------------------------- OVERLAYS / SCRIMS (alpha on the noted base colour) ---------------------------------------------------------------------- */ --overlay-light: rgba(245, 245, 246, 0.72); /* #F5F5F6 @72% */ --overlay-medium: rgba(7, 17, 36, 0.48); /* #071124 @48% */ --overlay-heavy: rgba(7, 17, 36, 0.72); /* #071124 @72% */ --scrim: rgba(7, 17, 36, 0.88); /* #071124 @88% */ /* ---------------------------------------------------------------------- GLASS EFFECTS (Effects.glass) — surfaces / borders / highlights ---------------------------------------------------------------------- */ --glass-surface-light: rgba(245, 245, 246, 0.72); --glass-surface-medium: rgba(245, 245, 246, 0.48); --glass-surface-dark: rgba(0, 15, 50, 0.72); /* #000F32 @72% */ --glass-surface-brand: rgba(0, 62, 173, 0.48); /* #003EAD @48% */ --glass-surface-mint: rgba(0, 178, 175, 0.12); /* #00B2AF @12% */ --glass-border-light: rgba(255, 255, 255, 0.50); --glass-border-medium: rgba(255, 255, 255, 0.24); --glass-border-dark: rgba(255, 255, 255, 0.10); --glass-border-brand: rgba(0, 178, 175, 0.30); --glass-highlight-light: rgba(255, 255, 255, 0.80); --glass-highlight-medium: rgba(255, 255, 255, 0.50); --glass-highlight-dark: rgba(255, 255, 255, 0.15); --glass-blur: 24px; /* default backdrop blur; see Effects → Backdrop Blur ramp */ /* ---------------------------------------------------------------------- SHADOWS / ELEVATION (DS Effects → Box Shadow / Elevation Light) ---------------------------------------------------------------------- */ --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08); --shadow-md: 0 1px 3px 0 rgba(0, 14, 11, 0.06), 0 1px 4px 0 rgba(0, 14, 11, 0.10); --shadow-lg: 0 10px 24px -6px rgba(7, 17, 36, 0.18); /* ---------------------------------------------------------------------- TYPOGRAPHY — families & weights ---------------------------------------------------------------------- */ --font-en: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-ar: "Noto Kufi Arabic", "Poppins", system-ui, sans-serif; --font-base: var(--font-en); --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Letter-spacing tokens (px) */ --ls-tight: -2.5px; --ls-none: 0; --ls-wide: 0.5px; --ls-wider: 0.2px; /* ---------------------------------------------------------------------- TYPOGRAPHY — font sizes (MOBILE values are the mobile-first base; the desktop set is applied at the breakpoint below). px. ---------------------------------------------------------------------- */ --fs-xxs: 8px; --fs-xs: 10px; --fs-sm: 12px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 20px; --fs-3xl: 24px; --fs-4xl: 30px; --fs-5xl: 36px; --fs-6xl: 48px; --fs-7xl: 60px; --fs-8xl: 72px; /* Line heights — mobile base (px) */ --lh-2xs: 14px; --lh-xs: 16px; --lh-sm: 20px; --lh-md: 24px; --lh-lg: 28px; --lh-xl: 32px; --lh-2xl: 36px; --lh-3xl: 40px; --lh-4xl: 48px; --lh-5xl: 60px; --lh-6xl: 72px; --lh-7xl: 114px; /* ---------------------------------------------------------------------- SPACING SCALE (px) — index → value ---------------------------------------------------------------------- */ --space-0: 0; --space-1: 2px; --space-2: 4px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 20px; --space-7: 24px; --space-8: 28px; --space-9: 32px; --space-10: 36px; --space-11: 40px; --space-12: 44px; --space-13: 48px; --space-14: 56px; --space-15: 64px; --space-16: 72px; --space-17: 80px; --space-18: 96px; --space-19: 112px; --space-20: 128px; --space-21: 144px; --space-22: 160px; --space-23: 176px; --space-24: 192px; --space-25: 208px; --space-26: 224px; --space-27: 240px; --space-28: 256px; --space-29: 288px; --space-30: 320px; --space-31: 384px; /* ---------------------------------------------------------------------- BORDER RADIUS (px) ---------------------------------------------------------------------- */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-base: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-3xl: 24px; --radius-4xl: 32px; --radius-5xl: 40px; --radius-full: 1000px; /* ---------------------------------------------------------------------- BORDER WIDTH (px) ---------------------------------------------------------------------- */ --border-width-thin: 1px; /* default UI borders */ --border-width-focus: 2px; /* focus / active ring */ --border-width-thick: 3px; /* emphasis / dividers */ /* ---------------------------------------------------------------------- SECTION TYPE & PADDING — client feedback Round 2, slides S7–S13. ---------------------------------------------------------------------- The client specified three explicit bands, which is NOT the two-mode scale the DS ships (mobile <640 / desktop >=640). Under the old two-mode setup the whole 640–1024 tablet band inherited DESKTOP sizes, which is what "all sizes appear larger than expected" (S6) was describing. mobile 320–639 · tablet 640–1024 · desktop 1025+ These are deliberately SEPARATE from the --fs- and --lh- ramps, which stay the DS two-mode scale used by body copy, labels and cards. Only banner titles, main-section titles and Shopper sub-section titles read the tokens below, so the client's numbers can be exact without disturbing the DS. (Do not write a star-slash sequence in these comments — it closes the comment early and eats the next declaration.) S8 excludes the FOOTER and FAQ sections from the section scale; the support modal (a , not a page section) and legal document body headings are likewise excluded — none of them consume these tokens. ---------------------------------------------------------------------- */ /* S7 — page banner (first section) title. Home overrides to 96/112 at desktop only; every other page uses this ramp. */ --fs-banner: 48px; --lh-banner: 58px; /* S8/S9 — main section titles. */ --fs-section: 36px; --lh-section: 40px; /* S10 — sub-section titles (Shopper page only). */ --fs-subsection: 30px; --lh-subsection: 36px; /* S11 — banner block padding (Business page is the reference). */ --pad-banner-block: 40px; /* S12/S13 — main section padding. The last section on a page gets a deeper bottom (see .mada-section--last). */ --pad-section-top: 32px; --pad-section-bottom: 40px; --pad-section-last-top: 32px; --pad-section-last-bottom: 64px; --pad-section-inline: 16px; /* ---------------------------------------------------------------------- GRID & CONTAINER (Grid/global.tokens.json) ---------------------------------------------------------------------- */ /* S12: content must measure 1536 at 1920 with 192px margins. The old pairing (max 1536 THEN 64px padding inside) yielded 1408 of content and 256px margins — the double-inset the client flagged. Folding the inline padding into the cap keeps the existing max-inline-size: var(--container-max); padding-inline: var(--grid-margin); pattern in all 38 component files correct with no edits there: content = min(1536 + 2p, vw) - 2p = min(1536, vw - 2p) ✔ The 1536 is divided by --ui-scale so the cap is stated in SCREEN px, not layout px: `zoom` on multiplies it straight back out, so the column measures 1536 ON SCREEN rather than 1536 x 0.8 = 1228.8. Without this the optical scale shrank the page width too and the surplus became dead gutter (see the --ui-scale block below). Below 1025 --ui-scale is 1 and this reduces to the original expression. --pad-section-inline is already in layout px, so it is added as-is. */ --container-max: calc((1536px / var(--ui-scale)) + (var(--pad-section-inline) * 2)); /* Mobile-first grid defaults (4-col). Overridden per breakpoint below. --grid-margin now tracks the S12/S13 section padding so the container and the sections share one inline rhythm. */ --grid-cols: 4; --grid-gutter: 12px; --grid-margin: var(--pad-section-inline); /* ---------------------------------------------------------------------- BREAKPOINTS — confirmed from Figma frame widths (CLAUDE.md §3.6). For reference/JS; CSS media queries use the literal px values. ---------------------------------------------------------------------- */ --bp-mobile-m: 394px; --bp-mobile-l: 500px; --bp-phablet: 640px; --bp-tablet: 1024px; --bp-desktop-s: 1200px; --bp-desktop-m: 1440px; --bp-desktop-l: 1720px; --bp-desktop-xl: 1920px; /* ---------------------------------------------------------------------- UI SCALE — desktop band only (client feedback Round 2, S6) ---------------------------------------------------------------------- The S7-S13 px are the CSS values the client read off Figma. This is the optical scale that sits ON TOP of them, so a 96px Home banner renders at the 96 PHYSICAL px the designer drew, once the Windows 125% display scaling most laptops ship with is accounted for. WHY DESKTOP ONLY. The distortion this corrects is OS display scaling, which exists on laptops and monitors. A phone or tablet CSS pixel is already calibrated to the hand by the viewport meta tag, so scaling those bands would just render text smaller than S7 specifies (48px mobile would land at 38.4px). Below 1025 the S7-S13 values stand alone. This is gated at 1025 — the client's own desktop boundary — so the whole desktop band scales uniformly. The earlier 1440 gate split that band in half, which is what "the bigger sizes looks smaller than the other screens" was describing. THE SCALE IS OPTICAL ONLY — IT MUST NOT SHRINK THE PAGE WIDTH. (Fix, 10 Aug 2026: "huge white space at the edges on every page".) `zoom` grows the layout viewport, exactly like a browser zoom to 75% does — so the content SHOULD still fill the window. It did not, because --container-max and --pad-section-inline were expressed in LAYOUT px: `zoom` then shrank the cap along with everything else and froze the content column at 1536 x 0.8 = 1228.8 SCREEN px from ~1420 up, turning every further pixel into dead gutter. Measured before the fix: vw 1440 -> content 1228.8, gutters 106 (15% empty) vw 1920 -> content 1228.8, gutters 346 (36% empty) vw 2560 -> content 1228.8, gutters 666 (52% empty) The cure is NOT to weaken this factor — the 0.8 is the size the client signed off and the reason "75%" felt right. It is to author the two page-width tokens in SCREEN px, i.e. divide them by --ui-scale so `zoom` multiplies them straight back out (see --container-max below and the desktop --pad-section-inline). The identity that now holds at every width and every scale is content_on_screen = min(1536, 100vw - 2 * pad) which is the S12 geometry as drawn — 1536 inside 192 margins at 1920 — while type, icons, gaps and padding stay at the approved 0.8. Set to 1 to disable. If the factor changes, recompute every breakpoint above 1025 (they are pre-multiplied — see the note below). ---------------------------------------------------------------------- */ --ui-scale: 1; } @media (min-width: 1025px) { :root { --ui-scale: 0.8; } } /* ========================================================================== Tablet grid (8-col) — ≥640px ========================================================================== */ @media (min-width: 640px) { :root { --grid-cols: 8; --grid-gutter: 16px; /* --- Tablet band 640–1024 (S7–S13) --- */ --fs-banner: 60px; --lh-banner: 72px; --fs-section: 48px; --lh-section: 58px; --fs-subsection: 36px; --lh-subsection: 40px; --pad-banner-block: 64px; --pad-section-top: 40px; --pad-section-bottom: 48px; --pad-section-last-top: 48px; --pad-section-last-bottom: 64px; --pad-section-inline: 32px; /* DESKTOP typography scale (Typography/Desktop.tokens.json) */ --fs-xxs: 10px; --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px; --fs-4xl: 36px; --fs-5xl: 48px; --fs-6xl: 60px; --fs-7xl: 72px; --fs-8xl: 96px; /* Line heights — desktop (px) */ --lh-2xs: 16px; --lh-xs: 20px; --lh-sm: 24px; --lh-md: 28px; --lh-lg: 32px; --lh-xl: 36px; --lh-2xl: 40px; --lh-3xl: 58px; --lh-4xl: 72px; --lh-5xl: 86px; --lh-6xl: 114px; --lh-7xl: 128px; } } /* ========================================================================== Desktop band — ≥1025px (S7–S13) -------------------------------------------------------------------------- The client's desktop band starts at 1025, not the 1200 the 12-col grid uses, so type/padding step here and the grid keeps its own 1200 stop below. ========================================================================== */ @media (min-width: 1025px) { :root { --fs-banner: 72px; /* Home overrides to 96/112 — see hero.css */ --lh-banner: 86px; --fs-section: 60px; --lh-section: 72px; --fs-subsection: 48px; --lh-subsection: 58px; --pad-banner-block: 96px; --pad-section-top: 80px; --pad-section-bottom: 96px; --pad-section-last-top: 80px; /* Stays 112. a681c37 briefly cut this to 96 from the Home annotation "Padding for all the last section — Desktop: 80px upper / 96px bottom". That was wrong: Home's last section is .mada-faq-section, which uses the REGULAR --pad-section-* pair (80/96) and so already met the annotation. This token serves the other pages' last sections, and the catalog frame (4437:88527) measures 718.2 − 80 − 526.2 = 112 exactly — as do the "80 / 112" notes in blog.css, legal.css and shopper.css. */ --pad-section-last-bottom: 112px; /* S12: "left and right padding should scale responsively, starting at 64px and increasing proportionally up to 192px on larger screens." Linear 1025→1920: slope = 128 / (1920 - 1025) = 0.143017. clamp() holds 64 at exactly 1025 and caps at 192 from 1920 up. The clamp is a SCREEN-px ramp — 100vw is the real viewport, which `zoom` does not scale — so it is divided by --ui-scale to convert it into the layout px this property is consumed in. It then renders as the 64…192 the client asked for instead of 0.8 x that. Same reasoning as --container-max above; the two must be converted together or the `content = min(1536, 100vw - 2*pad)` identity breaks. */ --pad-section-inline: calc( clamp( 64px, calc(64px + ((100vw - 1025px) * 0.143017)), 192px ) / var(--ui-scale) ); } } /* ========================================================================== Desktop grid (12-col) — ≥1200px (12-col layout begins per §3.6) ========================================================================== */ @media (min-width: 1025px) { :root { --grid-cols: 12; --grid-gutter: 24px; } } /* ========================================================================== BREAKPOINTS INSIDE THE SCALED BAND — authoring rule -------------------------------------------------------------------------- `zoom` does not re-evaluate media queries: the layout gains room (100vw / --ui-scale) while @media still sees the raw viewport. So any breakpoint above 1025 is authored PRE-MULTIPLIED — `design-width × --ui-scale` — to fire at the viewport that actually produces that much container. Three rules depend on it: about.css team grid 4-across 1440 × 0.8 = 1152 catalog.css category tiles 5/row 1500 × 0.8 = 1200 catalog.css store grid 3/row 1920 × 0.8 = 1536 Breakpoints BELOW 1025 are outside the scale gate and stay literal. ⚠ categories.css is a DELIBERATE EXCEPTION (MADA-2859, client-confirmed 17 Sept 2026). Its 12-pill ladder is keyed to the RAW Figma frame widths (500 / 1024 / 1200 / 1439 / 1920 → 2/3/4/5/6 columns) rather than to design × 0.8, because that is the mapping QA checks — open a 1440 window, expect the 1440 frame. It still lands within a few px of the design's on-screen cell size, for the reason set out in that file's own note. Do not "correct" it back to the pre-multiplied form without asking Mada. These are unaffected by the width fix above: below the 1536 cap the container is identical before and after it (the cap is the only thing that changed), so every column count still flips at the viewport it always did — verified at 1440/1600/1893/1920/2560. If --ui-scale moves, recompute all four. ========================================================================== */ /* * VERIFIED against Figma (get_variable_defs): the DS ships two typography * modes, "Mobile" and "Desktop". The 320px frame resolves the Mobile scale * (md=14, 4xl=30, lh-6xl=72); the 1024px tablet frame resolves the Desktop * scale (md=16, 4xl=36, lh-6xl=114). Mobile frames are ≤639 ("M" prefix), * tablet/desktop are ≥640 ("T"/"D"). Hence the flip at 640px above is correct. */