/* ============================================= MODUS DIGITAL — DESIGN TOKENS (3-layer colour architecture) ============================================= Single source of truth for all design values. COLOUR is organised in three layers, mirroring the Figma "Modus Website" variable collections (Primitives → Semantic), plus a component layer: LAYER 1 PRIMITIVES --md-- pure values, no meaning. Figma "Primitives" collection. Families: shark-grey, dusty-blue, hot-pink, yellow, accent-blue, gray, base. NEVER consumed by components directly. LAYER 2 SEMANTIC --md-color- role-based, point at primitives. Figma "Semantic" collection (bg / text / border). Components consume THESE (+ the component layer). The theme-able roles are re-bound per section by the .md-section--* / [data-theme] blocks at the end of this file. LAYER 3 COMPONENT --md-- per-use, point at semantic. Figma cards/* + icons/*, plus buttons/faq. Section themes can re-bind these to invert a whole section in one place. VALUE POLICY (this pass is a VISUAL NO-OP): - Primitive ramps carry Figma's exact hexes. - Existing components still read the LEGACY --md-color-* names; those are kept at their CURRENT values (via primitive aliases where the value matches Figma, or literal hex where it is code-only) so nothing on the live site shifts yet. - The drifted values (body text, muted, pink, dusty-blue surface, gray-200) reconcile to Figma only when each component migrates onto the semantic / component tokens — reviewed per change, not here. NAMING NOTE: Figma's dark neutral family is "shark"; we use "shark-grey" in code for clarity (replaces the old ad-hoc --md-color-gray-* ramp). The old gray-150 dusty-blue surface now maps to dusty-blue-50. ============================================= */ :root { /* ============================================================ LAYER 1 — PRIMITIVES (Figma "Primitives" collection) Pure values. No meaning. Do not consume from components. ============================================================ */ /* base */ --md-base-white: #FFFFFF; --md-base-black: #000000; /* shark-grey — neutral + dark ramp (Figma "shark") */ --md-shark-grey-50: #F4F6F7; --md-shark-grey-100: #E2E8EB; --md-shark-grey-200: #C8D4D9; --md-shark-grey-300: #A1B3BF; --md-shark-grey-400: #738C9D; --md-shark-grey-500: #587282; --md-shark-grey-600: #4C606E; --md-shark-grey-700: #42515C; --md-shark-grey-800: #3B454F; --md-shark-grey-900: #353C44; --md-shark-grey-950: #272E36; --md-shark-grey-950-rgb: 39, 46, 54; /* dusty-blue — cool surface + accent ramp (Figma "dusty-blue"). */ --md-dusty-blue-50: #EDF3F7; --md-dusty-blue-100: #DBE6EF; --md-dusty-blue-200: #B6CEDF; --md-dusty-blue-300: #92B5CE; --md-dusty-blue-400: #6D9DBE; --md-dusty-blue-500: #4984AE; --md-dusty-blue-600: #376B8E; --md-dusty-blue-700: #2C4F68; --md-dusty-blue-800: #1D3546; --md-dusty-blue-900: #0F1A23; --md-dusty-blue-950: #070D11; /* hot-pink (Figma "hot-pink") */ --md-hot-pink-50: #FFEAF1; --md-hot-pink-100: #FFD4E2; --md-hot-pink-200: #FFAAC5; --md-hot-pink-300: #FF7FA9; --md-hot-pink-400: #FF558C; --md-hot-pink-500: #FF2A6F; --md-hot-pink-600: #CC2259; --md-hot-pink-700: #991943; --md-hot-pink-800: #67112C; --md-hot-pink-900: #340816; --md-hot-pink-950: #1A040B; /* yellow — accent (Figma "yellow" has 50/100/200/300/500; code adds 400/600 for the soft + hover button shades, see figma-divergences) */ --md-yellow-50: #FFFFE5; --md-yellow-100: #FFFFCC; --md-yellow-200: #FFFF99; --md-yellow-300: #FFFF66; --md-yellow-400: #FFFE55; --md-yellow-500: #FFFF00; --md-yellow-600: #E6E600; /* accent-blue — brand teal (Figma single step) */ --md-accent-blue-500: #218AAB; --md-accent-blue-500-rgb: 33, 138, 171; /* gray — Figma's sparse light neutral (distinct from shark-grey) */ --md-gray-50: #F6F6F6; /* code-only primitives — no Figma equivalent. Values that components / validation need but that aren't in any Figma ramp; kept in layer 1 so NO literal lives above it. Promote to a real ramp (or reconcile away) if design adopts them. */ --md-green-50: #EFFEF4; /* success surface */ --md-green-500: #5FA955; /* success */ --md-red-50: #FCECF3; /* error surface */ --md-red-500: #CC3158; /* error */ --md-red-500-rgb: 204, 49, 88; --md-red-bootstrap: #DC3545; /* bootstrap .is-invalid red */ --md-grey-faint: #E3E3E3; /* primary-btn focus text */ --md-grey-mid: #AAAAAA; /* primary-btn disabled text */ --md-pink-pressed: #B90A4A; /* pink-btn focus/active (shade of brand pink) */ --md-pink-brand: #ED1163; /* brand pink — off the Figma hot-pink ramp; canonical per decision */ /* teal / blue cluster — no clean Figma ramp; consolidate into a proper accent-blue / teal ramp later (see figma-divergences). */ --md-cyan-bright: #07B3E9; /* primary-hover */ --md-cyan-pale: #DFF9FF; /* feature bg */ --md-blue-deep: #1E6091; /* deep brand blue (12 uses) */ --md-blue-medium: #2870C3; --md-teal-mid: #439AAA; /* muted teal */ --md-teal-bright: #25ACD1; /* outline-primary hover fill */ /* Primitive gradients (literal composites; no Figma equivalent) */ --md-gradient-overlay-dark: linear-gradient(188deg, rgba(39, 46, 54, 0) 0%, rgba(39, 46, 54, 0.996) 100%, #272E36 100%); --md-gradient-overlay-hover: linear-gradient(188deg, rgba(39, 46, 54, 0) 0%, #1E6091 100%, #0077ff 100%); --md-gradient-card-hover: linear-gradient(180deg, rgba(55, 107, 142, 0) 0%, rgba(55, 107, 142, 0.6) 100%); --md-gradient-carousel-bg: linear-gradient(to right, #253848 0, #253848 33%, #244057 33%, #244057 66%, #234663 66%, #234663 100%); --md-gradient-video-overlay: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 0) 100%); --md-gradient-theme-light: linear-gradient(210.81deg, #60C1DF 0%, #228AAB 100%); --md-gradient-theme-medium: linear-gradient(210.81deg, #4195F8 0%, #276EC2 100%); --md-gradient-theme-dark: linear-gradient(210.81deg, #439AAA 0%, #206171 100%); /* ============================================================ LAYER 2 — SEMANTIC (Figma "Semantic" collection) Roles → primitives. This is what components consume. Roles marked (THEME) are re-bound per section at the end of file. ============================================================ */ /* --- Backgrounds (THEME) --- */ --md-color-bg: var(--md-base-white); /* default surface (Figma bg-primary) */ --md-color-bg-secondary: var(--md-gray-50); /* light gray */ --md-color-bg-tertiary: var(--md-dusty-blue-50); /* dusty blue */ --md-color-bg-moment: var(--md-hot-pink-50); /* Modus Moment */ --md-color-bg-dark: var(--md-shark-grey-950); /* dark theme */ --md-color-bg-dark-alt: var(--md-dusty-blue-800); /* dark alt */ --md-color-bg-accent: var(--md-yellow-500); /* accent (card hover) */ /* --- Text / foreground (THEME) --- */ --md-color-text-body: var(--md-shark-grey-950); /* #272E36 — drift resolved to CODE value (was Figma shark-grey-800 #3B454F) */ --md-color-text-heading: var(--md-shark-grey-950); /* #272E36 (Figma text/heading) */ --md-color-text-subtle: var(--md-shark-grey-700); /* #42515C — muted, drift resolved (was Figma shark-grey-600 / code shark-grey-800) */ --md-color-text-fade: var(--md-shark-grey-500); /* #587282 (body-fade) */ --md-color-text-eyebrow: var(--md-shark-grey-900); /* #353C44 */ --md-color-text-accent: var(--md-yellow-500); /* yellow text */ --md-color-text-accent-alt: var(--md-accent-blue-500); /* teal text */ --md-color-text-white: var(--md-base-white); --md-color-text-black: var(--md-base-black); /* on-dark foreground values — used as the dark-theme re-bindings below */ --md-color-text-heading-on-dark: var(--md-base-white); --md-color-text-on-dark: var(--md-shark-grey-50); /* #F4F6F7 */ --md-color-text-on-dark-subtle: var(--md-shark-grey-100); /* #E2E8EB */ --md-color-text-on-dark-fade: var(--md-shark-grey-300); /* #A1B3BF */ --md-color-text-eyebrow-on-dark: var(--md-yellow-500); /* --- Borders (THEME) --- */ --md-color-border: var(--md-shark-grey-200); /* #C8D4D9 default divider */ --md-color-border-light: var(--md-shark-grey-100); /* #E2E8EB */ --md-color-border-strong: var(--md-shark-grey-500); /* #587282 emphasised — cards / FAQ accordion */ --md-color-border-dark: var(--md-shark-grey-950); /* #272E36 */ --md-color-border-dark-subtle: var(--md-shark-grey-800); /* #3B454F */ --md-color-border-accent: var(--md-yellow-500); /* ============================================================ LAYER 3 — COMPONENT Mirrors Figma's component layer EXACTLY: cards/* and icons/*. Figma defines NO button/faq/etc. variables, so those are not invented here — each component is tokenised faithfully from its OWN css during that component's migration PR (read the real rules, don't guess). Buttons, FAQ, forms, etc. come later that way. ============================================================ */ /* Cards — recreated 1:1 from md-cards.css. (Figma cards/* matches the blog card exactly: white / heading / body-subtle.) */ /* generic / vacancy card (.md-card) */ --md-card-text: var(--md-color-black); --md-card-eyebrow: var(--md-color-dark); --md-card-title: var(--md-color-dark); --md-card-title-border: var(--md-color-dark); --md-card-cta-hover-bg: var(--md-color-accent); --md-card-cta-hover-border: var(--md-color-accent); --md-card-cta-hover-text: var(--md-color-dark); /* blog card (.md-blog-card) — = Figma cards/* */ --md-blog-card-bg: var(--md-color-white); --md-blog-card-title: var(--md-color-text-heading); /* #272E36 */ --md-blog-card-meta: var(--md-color-gray-700); /* date + desc, #4C606E */ --md-blog-card-placeholder: var(--md-color-dark); /* blog panel (.md-blog-panel) — text over a dark image overlay */ --md-blog-panel-eyebrow: var(--md-dusty-blue-100); /* #DBE6EF */ --md-blog-panel-title: var(--md-color-text-heading-inverse); --md-blog-panel-date: rgba(255, 255, 255, 0.8); --md-blog-panel-intro: rgba(255, 255, 255, 0.85); /* case panel (.md-case-panel) */ --md-case-panel-text: var(--md-color-white); /* badges (card context) */ --md-badge-bg: var(--md-color-gray-150); --md-badge-text: var(--md-color-dark); --md-badge-border: var(--md-color-gray-150); --md-badge-yellow-bg: var(--md-color-accent); --md-badge-yellow-text: var(--md-color-black); --md-badge-yellow-border: var(--md-color-accent); --md-badge-blue-bg: transparent; --md-badge-blue-text: var(--md-color-blue-deep); --md-badge-blue-border: var(--md-color-blue-deep); /* Icons (Figma icons/*) */ --md-icon: var(--md-base-white); /* Figma icon → text-white */ --md-icon-bg: var(--md-color-bg-dark); /* Figma icon-bg → bg-dark */ /* --- Buttons ------------------------------------------------------------- Recreated 1:1 from md-buttons.css (Figma has no button variables). Each variant lists bg / border / text per state; values point at the token that resolves to the exact CURRENT colour, so migrating the button CSS onto these is a no-op. Four button-only literals had no token and get one here. Shadows keep their existing --md-shadow-focus-* tokens. */ /* primary (solid teal) */ --md-btn-primary-bg: var(--md-color-primary); --md-btn-primary-border: var(--md-color-primary); --md-btn-primary-text: var(--md-color-white); --md-btn-primary-bg-hover: var(--md-color-white); --md-btn-primary-border-hover: var(--md-color-white); --md-btn-primary-text-hover: var(--md-color-primary); --md-btn-primary-bg-focus: var(--md-color-primary-focus); /* focus + active */ --md-btn-primary-border-focus: var(--md-color-primary-focus); --md-btn-primary-text-focus: var(--md-grey-faint); /* #E3E3E3 */ --md-btn-primary-text-disabled: var(--md-grey-mid); /* #AAAAAA */ /* black (solid) */ --md-btn-black-bg: var(--md-color-black); --md-btn-black-border: var(--md-color-black); --md-btn-black-text: var(--md-color-white); --md-btn-black-bg-hover: var(--md-color-white); --md-btn-black-border-hover: var(--md-color-white); --md-btn-black-text-hover: var(--md-color-black); /* primary-black (teal → black on hover) */ --md-btn-primary-black-bg: var(--md-color-primary); --md-btn-primary-black-border: var(--md-color-primary); --md-btn-primary-black-text: var(--md-color-white); --md-btn-primary-black-bg-hover: var(--md-color-black); --md-btn-primary-black-border-hover: var(--md-color-black); --md-btn-primary-black-text-hover: var(--md-color-white); /* light (solid yellow accent) */ --md-btn-light-bg: var(--md-color-accent); --md-btn-light-border: var(--md-color-accent); --md-btn-light-text: var(--md-color-black); --md-btn-light-bg-hover: var(--md-color-black); --md-btn-light-border-hover: var(--md-color-black); --md-btn-light-text-hover: var(--md-color-white); --md-btn-light-bg-focus: var(--md-color-white); /* focus + active + disabled */ --md-btn-light-border-focus: var(--md-color-white); --md-btn-light-text-focus: var(--md-color-primary); /* light-contact (white → black on hover) */ --md-btn-light-contact-bg: var(--md-color-white); --md-btn-light-contact-border: var(--md-color-white); --md-btn-light-contact-text: var(--md-color-primary); --md-btn-light-contact-bg-hover: var(--md-color-black); --md-btn-light-contact-border-hover: var(--md-color-black); --md-btn-light-contact-text-hover: var(--md-color-white); /* warning (solid soft-yellow) */ --md-btn-warning-bg: var(--md-color-accent-soft); --md-btn-warning-border: var(--md-color-accent-soft); --md-btn-warning-text: var(--md-color-black); --md-btn-warning-bg-hover: var(--md-color-black); --md-btn-warning-border-hover: var(--md-color-black); --md-btn-warning-text-hover: var(--md-color-white); /* accent-pink / danger (solid pink) */ --md-btn-pink-bg: var(--md-color-pink); --md-btn-pink-border: var(--md-color-pink); --md-btn-pink-text: var(--md-color-white); --md-btn-pink-bg-hover: var(--md-color-black); --md-btn-pink-border-hover: var(--md-color-black); --md-btn-pink-text-hover: var(--md-color-white); --md-btn-pink-bg-focus: var(--md-pink-pressed); /* #B90A4A */ --md-btn-pink-border-focus: var(--md-pink-pressed); /* outline-primary (teal outline) */ --md-btn-outline-primary-border: var(--md-color-primary); --md-btn-outline-primary-text: var(--md-color-primary); --md-btn-outline-primary-bg-hover: var(--md-teal-bright); /* #25ACD1 */ --md-btn-outline-primary-border-hover: var(--md-teal-bright); --md-btn-outline-primary-text-hover: var(--md-color-white); --md-btn-outline-primary-border-focus: var(--md-color-primary-focus); /* outline-dark */ --md-btn-outline-dark-border: var(--md-color-dark); --md-btn-outline-dark-text: var(--md-color-dark); --md-btn-outline-dark-bg-hover: var(--md-color-accent); --md-btn-outline-dark-border-hover: var(--md-color-accent); --md-btn-outline-dark-text-hover: var(--md-color-dark); --md-btn-outline-dark-border-focus: var(--md-color-accent); --md-btn-outline-dark-text-focus: var(--md-color-accent); /* outline-light */ --md-btn-outline-light-border: var(--md-color-accent); --md-btn-outline-light-text: var(--md-color-white); --md-btn-outline-light-bg-hover: var(--md-color-accent); --md-btn-outline-light-border-hover: var(--md-color-accent); --md-btn-outline-light-text-hover: var(--md-color-dark); --md-btn-outline-light-border-focus: var(--md-color-accent); /* outline-danger (pink outline) */ --md-btn-outline-danger-border: var(--md-color-pink); --md-btn-outline-danger-text: var(--md-color-pink); --md-btn-outline-danger-bg-hover: var(--md-color-pink); --md-btn-outline-danger-border-hover: var(--md-color-pink); --md-btn-outline-danger-text-hover: var(--md-color-white); /* ============================================================ VALIDATION (semantic roles → code-only green / red primitives) ============================================================ */ --md-color-success: var(--md-green-500); --md-color-success-bg: var(--md-green-50); --md-color-error: var(--md-red-500); --md-color-error-bg: var(--md-red-50); --md-color-error-ring: rgba(var(--md-red-500-rgb), 0.25); --md-color-error-bootstrap: var(--md-red-bootstrap); /* ============================================================ SELECTION ============================================================ */ --md-color-selection-bg: var(--md-color-accent); --md-color-selection-text: var(--md-shark-grey-950); /* ============================================================ LEGACY ALIASES — DEPRECATED Existing components still consume these. Kept at CURRENT values so this restructure is a visual no-op. Where the value exists in Figma it points at the matching primitive; code-only values keep their literal hex and are flagged for design reconciliation. Migrate consumers to the semantic / component layers above, then delete these. ============================================================ */ /* — match Figma primitives (no value change) — */ --md-color-primary: var(--md-accent-blue-500); /* #218AAB */ --md-color-primary-rgb: var(--md-accent-blue-500-rgb); --md-color-dark: var(--md-shark-grey-950); /* #272E36 */ --md-color-dark-rgb: var(--md-shark-grey-950-rgb); --md-color-accent: var(--md-yellow-500); /* #FFFF00 */ --md-color-white: var(--md-base-white); --md-color-black: var(--md-base-black); --md-color-gray-50: var(--md-gray-50); /* #F6F6F6 */ --md-color-gray-150: var(--md-dusty-blue-50); /* #EDF3F7 — dusty-blue surface now uses -50 (dusty-blue-150 removed) */ --md-color-gray-700: var(--md-shark-grey-600); /* #4C606E */ --md-color-gray-800: var(--md-shark-grey-800); /* #3B454F */ --md-color-gray-900: var(--md-shark-grey-900); /* #353C44 (unused) */ --md-color-pink-hover: var(--md-hot-pink-500); /* #FF2A6F */ --md-color-pink-light: var(--md-hot-pink-50); /* #FFEAF1 */ --md-color-blue-overlay: var(--md-dusty-blue-600); /* #376B8E */ /* — legacy text roles (kept at current values) — */ --md-color-text: var(--md-shark-grey-950); /* #272E36 — body; canonical alias --md-color-text-body now matches */ --md-color-text-muted: var(--md-shark-grey-700); /* #42515C — aligned to --md-color-text-subtle (drift resolved) */ --md-color-text-inverse: var(--md-base-white); /* superseded by dark-theme rebind */ --md-color-text-heading-inverse: var(--md-base-white); /* superseded by dark-theme rebind */ /* — legacy aliases now resolve to primitives (no literals above layer 1). "reconciled" = value shifted onto the nearest Figma primitive. — */ --md-color-primary-hover: var(--md-cyan-bright); /* #07B3E9 */ --md-color-primary-focus: var(--md-accent-blue-500); /* reconciled #2498BC -> #218AAB */ --md-color-modal: var(--md-shark-grey-950); /* reconciled #242A34 -> #272E36 */ --md-color-accent-soft: var(--md-yellow-400); /* #FFFE55 */ --md-color-accent-hover: var(--md-yellow-600); /* #E6E600 */ --md-color-blue-deep: var(--md-blue-deep); /* #1E6091 */ --md-color-blue-medium: var(--md-blue-medium); /* #2870C3 */ --md-color-blue-teal: var(--md-teal-mid); /* #439AAA */ --md-color-blue-feature-bg: var(--md-cyan-pale); /* #DFF9FF */ --md-color-pink: var(--md-pink-brand); /* #ED1163 */ --md-color-pink-gradient: linear-gradient(163.12deg, var(--md-hot-pink-50) 11.19%, var(--md-hot-pink-100) 101.03%); --md-color-gray-100: var(--md-gray-50); /* reconciled #F1F1F1 -> #F6F6F6 */ --md-color-gray-200: var(--md-shark-grey-200); /* #C8D4D9 */ --md-color-gray-300: var(--md-shark-grey-200); /* reconciled #DBDBDB -> #C8D4D9 (only use is a border; aligns to the border primitive) */ --md-color-gray-400: var(--md-shark-grey-300); /* reconciled #9CA3AF -> #A1B3BF */ --md-color-gray-500: var(--md-shark-grey-400); /* reconciled #7A828E -> #738C9D */ /* ----------------------------------------- TYPOGRAPHY: Font families ----------------------------------------- */ --md-font-body: 'Roboto', sans-serif; --md-font-display: ClashDisplay-Bold, sans-serif; --md-font-accent: 'Bebas Neue', sans-serif; /* ----------------------------------------- TYPOGRAPHY: Font sizes ----------------------------------------- */ --md-font-size-xs: 12px; --md-font-size-sm: 14px; --md-font-size-meta: 1rem; /* 16px — secondary/meta text: optional badges, consent notes, form helpers, captions */ --md-font-size-base: 1.125rem; /* 18px — body */ --md-font-size-md: 20px; /* was 18 (dup of base); now a real step — nav / link text */ --md-font-size-lg: 22px; --md-font-size-xl: 28px; --md-font-size-2xl: 32px; --md-font-size-3xl: 41px; /* ----------------------------------------- TYPOGRAPHY: Line heights ----------------------------------------- */ --md-line-height-display: 1.05; /* hero / large display headings */ --md-line-height-heading: 1.15; /* h1–h6 default */ --md-line-height-snug: 1.25; /* h4 */ --md-line-height-normal: 1.4; /* h5 / h6, general headings */ --md-line-height-body: 1.5; /* body / paragraphs */ --md-line-height-relaxed: 1.65; /* long-form prose, FAQ answers */ /* ----------------------------------------- TYPOGRAPHY: Font weights ----------------------------------------- */ --md-font-weight-light: 300; --md-font-weight-regular: 400; --md-font-weight-semibold: 600; --md-font-weight-bold: 700; --md-font-weight-black: 900; /* ----------------------------------------- TYPOGRAPHY: Fluid scales (clamp) ----------------------------------------- */ --md-font-size-display-s: clamp(2.25rem, 0.643rem + 4.286vw, 4.5rem); /* 36→72 — hero / large display; replaces the old fluid-hero token */ --md-font-size-display: clamp(2rem, 0.571rem + 3.81vw, 4rem); /* 32→64 — blog hero title (was fluid-h1) */ --md-font-fluid-eyebrow: clamp(1.5rem, 1.107rem + 0.714vw, 1.875rem); /* 24→30 */ --md-font-fluid-subtitle: clamp(1.5rem, 1.143rem + 0.952vw, 2rem); --md-font-caption: clamp(1.25rem, 1.071rem + 0.476vw, 1.5rem); /* 20→24px; hero lead, case-panel, blog intro + CTA bodies (fluid-intro merged in) */ /* ----------------------------------------- LAYOUT: Section vertical rhythm ----------------------------------------- */ --md-section-pad-y: clamp(3.5rem, 7vw, 7.5rem); /* 56→120px */ /* Section content-row gaps — vertical spacing between the rows inside a section (heading block, content/grid, buttons). Pick a size per context. */ --md-section-gap-sm: var(--md-space-12); /* 48px / 3rem */ --md-section-gap-md: var(--md-space-16); /* 64px / 4rem */ --md-section-gap-lg: var(--md-space-20); /* 80px / 5rem */ --md-section-gap-xl: var(--md-space-24); /* 96px / 6rem */ /* ----------------------------------------- SPACING (4px base grid) ----------------------------------------- */ --md-space-1: 4px; --md-space-2: 8px; --md-space-3: 12px; --md-space-4: 16px; --md-space-5: 20px; --md-space-6: 24px; --md-space-7: 28px; --md-space-8: 32px; --md-space-10: 40px; --md-space-12: 48px; --md-space-14: 56px; --md-space-16: 64px; --md-space-20: 80px; --md-space-24: 96px; --md-space-32: 128px; /* ----------------------------------------- SEMANTIC SPACING LAYERS Built on top of the --md-space-N primitives. Consumers should reach for these named tokens (inline / stack / grid / rhythm) rather than raw --md-space-N values — they describe the role, not the pixel size, so future scale adjustments stay semantically coherent. ----------------------------------------- */ /* Inline — horizontal space between things in a row */ --md-space-inline-xs: var(--md-space-2); /* 8px — chips, form help */ --md-space-inline-sm: var(--md-space-3); /* 12px — meta rows, card footers */ --md-space-inline-md: var(--md-space-4); /* 16px — DEFAULT. button-row, icon↔text */ --md-space-inline-lg: var(--md-space-6); /* 24px — wider separators, feature rows */ /* Stack — vertical space between things in a column */ --md-space-stack-xs: var(--md-space-2); /* 8px — label↔input, nav-item rhythm */ --md-space-stack-sm: var(--md-space-4); /* 16px — heading↔body, paragraph spacing */ --md-space-stack-md: var(--md-space-6); /* 24px — content blocks within a section */ --md-space-stack-lg: var(--md-space-8); /* 32px — subsections within a section */ --md-space-stack-xl: var(--md-space-12); /* 48px — major vertical separators */ /* Grid — gap on card / feature / tile grids */ --md-space-grid-card: var(--md-space-8); /* 32px — cards desktop */ --md-space-grid-card-mobile: var(--md-space-4); /* 16px — cards mobile (apply via @media) */ --md-space-grid-feature: var(--md-space-6); /* 24px — feature items */ --md-space-grid-tight: var(--md-space-3); /* 12px — tightly-packed tiles (meta, related) */ /* Text rhythm — standard vertical spacing between content elements. Semantic bridge between stack primitives and real-world typography patterns (eyebrow→title, title→body, body→CTA, etc.). Consumers apply as `margin-bottom` on the upper element. */ --md-space-rhythm-eyebrow: var(--md-space-2); /* 8px — eyebrow → title */ --md-space-rhythm-title: var(--md-space-4); /* 16px — title → lead/body. Default; may need per-heading-level overrides later. */ --md-space-rhythm-paragraph: var(--md-space-4); /* 16px — between

tags */ --md-space-rhythm-body-to-cta: var(--md-space-8); /* 32px — body → first button */ --md-space-rhythm-section-header: var(--md-space-12); /* 48px — heading-block → body block inside a section */ --md-space-rhythm-block: var(--md-space-16); /* 64px — between rows in a section-stack (heading row → content row) */ --md-space-rhythm-body-to-cta-lg: var(--md-space-12); /* 48px (3rem) — larger grid/body → CTA gap (feature grids) */ /* Per-heading default margin-bottom. Applied on the heading elements in md-reset so every heading carries sensible spacing without an mb-* in markup. Bootstrap mb-* utilities are !important, so they still override per-instance where an author sets one. */ --md-heading-space-eyebrow: var(--md-space-2); /* 8px */ --md-heading-space-h1: var(--md-space-6); /* 24px */ --md-heading-space-h2: var(--md-space-5); /* 20px */ --md-heading-space-h3: var(--md-space-4); /* 16px */ --md-heading-space-h4: var(--md-space-3); /* 12px */ --md-heading-space-h5: var(--md-space-2); /* 8px */ --md-heading-space-h6: var(--md-space-2); /* 8px */ /* ----------------------------------------- BORDER WIDTH (mirrors Figma border/border-width) ----------------------------------------- */ --md-border-width-0: 0; --md-border-width-1: 1px; /* Figma "border" — default hairline / divider */ --md-border-width-2: 2px; /* Figma "border-2" — cards, outline buttons, FAQ */ --md-border-width-4: 4px; /* Figma "border-4" — accent left-rails */ --md-border-width-8: 8px; /* Figma "border-8" — heavy feature frames */ /* code-only widths (no Figma step; kept faithful to current CSS) */ --md-border-width-hairline: 1.5px; /* subtle form / blog dividers */ --md-border-width-3: 3px; /* a few heavy card borders */ /* ----------------------------------------- BORDER RADIUS ----------------------------------------- */ --md-radius-xs: 5px; --md-radius-sm: 8px; --md-radius-md: 12px; --md-radius-lg: 16px; --md-radius-xl: 17px; --md-radius-2xl: 20px; --md-radius-3xl: 24px; --md-radius-4xl: 36px; --md-radius-pill: 9999px; /* ----------------------------------------- SHADOWS ----------------------------------------- */ --md-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --md-shadow-md: 0 2px 16px rgba(0, 0, 0, 0.07); --md-shadow-lg: 0 6px 28px rgba(0, 0, 0, 0.13); --md-shadow-navbar: 0 8px 12px 0 rgba(0, 0, 0, 0.13); --md-shadow-card: 0px 3px 6px rgba(0, 0, 0, 0.12); --md-shadow-card-hover: 0 0 20px #ededed; --md-shadow-dropdown: 0px 4px 16px rgba(0, 0, 0, 0.15); --md-shadow-image: 0 0 33px #cfcfcf; --md-shadow-cookie: 0 2px 20px 0 rgba(25, 25, 25, 0.24); --md-shadow-carousel: 0 2px 30px 0 #DBDBDB; --md-shadow-focus-primary: 0 0 0 0.25rem rgba(96, 197, 255, 0.5); --md-shadow-focus-accent: 0 0 0 0.25rem rgba(255, 255, 0, 0.5); --md-shadow-focus-pink: 0 0 0 0.25rem rgba(237, 17, 99, 0.5); --md-shadow-focus-warning: 0 0 0 0.25rem rgba(255, 254, 85, 0.5); /* ----------------------------------------- TRANSITIONS ----------------------------------------- */ --md-transition-fast: 0.15s ease; --md-transition-base: 0.2s ease; --md-transition-medium: 0.3s ease; --md-transition-slow: 0.5s ease; --md-transition-overlay: 0.55s ease-in-out; /* ----------------------------------------- LAYOUT ----------------------------------------- */ --md-container-max: 1440px; --md-content-max-width: 56rem; --md-navbar-padding: 1.125rem; --md-navbar-padding-scroll: 1.125rem; /* ----------------------------------------- Z-INDEX ----------------------------------------- */ --md-z-base: 1; --md-z-overlay: 2; --md-z-caption: 3; --md-z-sticky: 10; --md-z-cookie: 999; --md-z-modal: 1050; /* ----------------------------------------- BREAKPOINTS (reference only - cannot be used in media queries, but documented here as the canonical breakpoint system) ----------------------------------------- */ /* sm: 576px - Small devices */ /* md: 768px - Tablets */ /* lg: 992px - Desktops */ /* xl: 1200px - Large desktops */ /* xxl: 1440px - Extra large */ } /* ============================================================= SECTION THEMING — the re-bind engine ============================================================= A wrapper class (or [data-theme]) re-binds the THEME-able semantic + component tokens. Because custom properties inherit through the DOM, every descendant that reads a semantic/component token re-resolves automatically — no per-component overrides. Components must read semantic tokens (never primitives) for this to work; that migration happens in later passes. Light variants only swap the background. The dark theme also flips text, borders, and selected component tokens (the "inverse" treatment). NOTE: these classes are defined here but are not yet applied to live section markup — wiring .md-section { background: var(--md-color-bg); ... } and the EE dropdown field is a later step. Defined now so the engine is reviewable. ============================================================= */ .md-section--gray { --md-color-bg: var(--md-color-bg-secondary); } /* light gray */ .md-section--blue { --md-color-bg: var(--md-color-bg-tertiary); } /* dusty blue */ .md-section--moment { --md-color-bg: var(--md-color-bg-moment); } /* Modus Moment */ .md-section--dark, [data-theme="dark"] { /* surface + foreground flip — values are Figma's own *-on-dark tokens */ --md-color-bg: var(--md-color-bg-dark); /* Figma bg-dark */ --md-color-text-body: var(--md-color-text-on-dark); /* body-on-dark */ --md-color-text-heading: var(--md-color-text-heading-on-dark); /* heading-on-dark */ --md-color-text-subtle: var(--md-color-text-on-dark-subtle); /* body-ondark-subtle */ --md-color-text-fade: var(--md-color-text-on-dark-fade); /* body-ondark-fade */ --md-color-text-eyebrow: var(--md-color-text-eyebrow-on-dark); /* eyebrow-on-dark */ /* NOTE: border-on-dark and per-component dark treatments (cards, buttons, faq, …) are NOT defined in Figma. They are decided with design / during each component's migration — deliberately NOT invented here. */ }