/* ═══════════════════════════════════════════════════════════════════════════ RMD — design tokens ClickUp 86bcmeyea · companion to design-tokens.md · 19 Oct 2026 Source: Rhillane - Master DS, file 8pvW1EVCFTwZ0Br72wp1S2 Read whole-file: 14 pages, 25 top-level frames. Node codes (ASM, BTN, S-HERO, …) are defined in design-tokens.md §1.2 and used in the comments below. ── READ THIS BEFORE USING ANY VALUE ────────────────────────────────────── 1. LIVE. inc/enqueue.php loads this file before main.css on every owned view, so it IS the theme's token layer. The Tailwind @theme block in src/tailwind.css is the older brand v2.0 layer (--color-ink, --purp…) that the blog (cpt/post.css) and the sitemap still read; it is not a second copy of these. 2. TWO COPIES, ONE SHIPS. assets/css/tokens.css deploys; the copy in RMD-design-system/tokens/ is the reference and does not (that folder is excluded in both deploy workflows). tests/audit.py fails if they drift, so edit one and copy it over the other. 3. FOUR TOKENS ARE AMBIGUOUS (design-tokens.md §4). The same Figma name resolves to two values depending on which node is read, and it is NOT a simple mode switch — all four (2xl, 3xl) pairings occur. This file ships the MAJORITY reading, the one the assembled page uses, and carries the alternate inline. Do not resolve them by picking; ask the designer. They are marked ⚠ CONFLICT below. 4. THE DS EXTENDS THE BRAND, it does not replace it. --ink, the card shadow, 1200px, 1.6 body leading and the Dawn gradient ramp all survive from brand/tokens.md v2.0 unchanged. What changed is the grey/UI layer, and Inter was added beside Poppins — that one needs board approval (brand/tokens.md §3). See design-tokens.md §6, decision D-01. Naming: Figma path IS the name. color/content/primary → --color-content-primary. No re-interpretation, so any value traces back to the variable it came from. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── TYPOGRAPHY ───────────────────────────────────────────────────────── Poppins = headlines, labels, titles. Inter = body and overline. ⚠ Inter is the one brand-contract breach. Board sign-off before prod. */ --font-family-primary: "Poppins", ui-sans-serif, system-ui, sans-serif; --font-family-secondary: "Inter", ui-sans-serif, system-ui, sans-serif; /* Five weights, not three. The ↪ Typography scale page (40055:29173) draws every ramp at Light → Bold; the first extraction read only the three the components happen to bind, so a block reaching for Bold had no token to reach for and silently took whatever the cascade gave it. Additive: no component binds 300 or 700 today, so nothing moves. */ --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Display — Poppins, above h1. Two steps the scale page carries and the first extraction stopped short of, since no UI Block binds them: the heading group tops out at h3. Here so a hero that wants one has it. */ --font-size-display-1: 76px; --font-size-display-2: 64px; /* Headline — Poppins. h1 56 is one step ABOVE brand v2.0's --fs-h1 (48); the DS h2 is the old h1. Re-map carefully when porting existing pages. */ --font-size-h1: 56px; --font-size-h2: 48px; --font-size-h3: 40px; --font-size-h4: 32px; --font-size-h5: 24px; --font-size-h6: 20px; /* Title — Poppins, line-height normal */ --font-size-title-xs: 12px; --font-size-title-sm: 16px; --font-size-title-md: 18px; --font-size-title-lg: 20px; /* Body — Inter, line-height 1.6 */ --font-size-body-xs: 12px; --font-size-body-sm: 14px; --font-size-body-md: 16px; --font-size-body-lg: 18px; /* Label — Poppins, line-height normal */ --font-size-label-xs: 10px; --font-size-label-sm: 11px; --font-size-label-md: 12px; --font-size-label-lg: 13px; --font-size-label-xl: 14px; --font-size-label-2xl: 16px; --font-size-label-3xl: 18px; /* Overline — Inter semibold, line-height normal, tracking 10 */ --font-size-overline-lg: 12px; --font-size-overline-sm: 10px; /* Line height. "100" in Figma is Auto → renders as `normal`, NOT 100. Confirmed against the connector's own CSS on CFORM (47511:27342). */ --line-height-headline-lg: 1.3; /* h1–h4 */ --line-height-headline-sm: 1.4; /* h5–h6 */ --line-height-body: 1.6; /* = brand v2.0 --lh-body, unchanged */ --line-height-label: normal; /* label, title, overline */ /* ⚠ UNIT UNCONFIRMED. The connector renders `none` as 0px, so px is the likely reading, but no node in the file paints a negative value in CSS. Confirm before shipping headline tracking. design-tokens.md §7 item 3. */ --font-letter-spacing-none: 0; --font-letter-spacing-negative-1: -1px; /* h3 */ --font-letter-spacing-negative-2: -2px; /* h1, h2 */ --font-letter-spacing-overline: 10px; /* Overline LG only */ /* ── COLOUR · content ───────────────────────────────── TF / TFD / ASM ── */ --color-content-primary: #0f172b; --color-content-secondary: #1d293d; --color-content-tertiary: #3b4b62; --color-content-quaternary: #adbbce; --color-content-disabled: #cad5e2; --color-content-inverse-b: #000000; --color-content-static-white: #ffffff; --color-content-static-black: #000000; /* ── COLOUR · surface ────────────────────────── ASM / S-CARD / FORM ── */ --color-surface-canvas: #ffffff; --color-surface-canvas-alt: #f5f8fb; --color-surface-container: #f8fafc; --color-surface-region: #fcfcfd; --color-surface-modal: #f4f7fa; --color-surface-floating: #f5f8fb; --color-surface-accent-indigo: #eef2ff; --color-surface-accent-rose: #fff1f2; --color-surface-accent-orange: #fff7ed; /* ── COLOUR · border ──────────────────────── ASM / S-HERO / TF / BTN ── */ --color-border-surface-container: #f4f7fa; --color-border-surface-divider: #cad5e2; --color-border-surface-modals: #e2e8f0; --color-border-surface-floating: #f1f5f9; --color-border-surface-region: #f6f9fb; --color-border-control-default: #cad5e2; --color-border-control-hover: #e9eef5; --color-border-control-pressed: #cad5e2; --color-border-control-focus: #2b7fff; --color-border-control-disabled: #f6f9fb; /* These two are named `var(--color-border-muted)` / `-soft` IN FIGMA — the designer typed the CSS call into the variable name. Not a reference. */ --color-border-muted: #f1f5f9; --color-border-soft: #f4f7fa; /* ── COLOUR · button ────────────────────────────────────────── BTN ── */ --color-button-primary-default: #1e1a4d; --color-button-primary-hover: #312c85; --color-button-primary-pressed: #372aac; --color-button-primary-focused: #1e1a4d; /* ⚠ CONFLICT: ASM reads #ec003f. A rose focus ring on a navy button reads as a stray override, so BTN wins here — but this one is a coin-flip. design-tokens §4. */ --color-button-secondary-default: #432dd7; --color-button-secondary-hover: #372aac; --color-button-secondary-pressed: #312c85; --color-button-secondary-focused: #432dd7; --color-button-tertiary-default: #ffffff; --color-button-tertiary-hover: #e9eef5; --color-button-tertiary-pressed: #e2e8f0; --color-button-tertiary-focused: #f1f5f9; --color-button-quaternary-default: #4f39f6; --color-button-quaternary-hover: #432dd7; --color-button-quaternary-pressed: #372aac; --color-button-quaternary-focused: #4f39f6; /* ── COLOUR · state / field / intent / accent ─────── BTN / TF / CHT ── */ --color-state-default: #f1f5f9; --color-state-hover: #e9eef5; --color-state-disabled: #f5f8fb; --color-field-hover: #f6f9fb; --color-intent-idle: #4f39f6; --color-intent-success: #00bba7; --color-intent-warning: #ff6900; --color-intent-danger: #ff2056; --color-accent-indigo: #eef2ff; --color-accent-on-indigo: #4f39f6; --color-accent-rose: #fff1f2; --color-accent-on-rose: #ffccd3; /* ── COLOUR · chart ─────────────────────────────── CHT / S-CONT ── */ --color-chart-active-intense: #4f39f6; --color-chart-active-calm: #c6d2ff; --color-chart-idle-intense: #a3b3ff; --color-chart-idle-calm: #eef2ff; --color-chart-alive-intense: #009689; --color-chart-alive-calm: #96f7e4; --color-chart-rose-intense: #e60076; --color-chart-rose-calm: #fccee8; --color-chart-hot-intense: #f54900; --color-chart-hot-calm: #ffd6a7; /* ── COLOUR · primitives ─────────────────────────────────────────────── Tailwind v4's palette, unchanged. Only the steps the file actually uses. Semantic tokens above should be preferred everywhere; these exist because the gradients and charts bind to them directly. */ --color-indigo-50: #eef2ff; --color-indigo-300: #a3b3ff; --color-indigo-400: #7c86ff; --color-indigo-500: #615fff; --color-indigo-600: #4f39f6; --color-indigo-700: #432dd7; --color-rose-50: #fff1f2; --color-rose-300: #ffa1ad; --color-rose-600: #ec003f; --color-pink-50: #fdf2f8; --color-pink-200: #fccee8; --color-pink-500: #f6339a; --color-pink-600: #e60076; --color-orange-50: #fff7ed; --color-orange-200: #ffd6a7; --color-orange-300: #ffb86a; --color-orange-400: #ff8904; --color-orange-500: #ff6900; --color-orange-600: #f54900; --color-teal-50: #f0fdfa; --color-teal-200: #96f7e4; --color-teal-500: #00bba7; --color-teal-600: #009689; --color-red-500: #fb2c36; /* ── COLOUR · brand ────────────────────────────────────── ASM / NAV ── The one brand primitive the DS kept as a named colour. = --ink. */ --color-rhillane-dark: #041135; /* ── GRADIENTS ────────────────────────────────────────────────────────── Gradient variables read as "" through the connector; these stops come from the painted CSS of the nodes named beside each one. */ /* 46815:4101 — binds rose/600 → red/500 → orange/400 */ --gradient-promotional-sunrise: linear-gradient(142.72deg, #ec003f 0%, #fb2c36 50%, #ff8904 100%); /* 46824:3480 — binds indigo/700 → pink/600 */ --gradient-promotional-rhillane: linear-gradient(142.72deg, #432dd7 40%, #e60076 85%); /* 47511:27178 — RAW HEX, bound to nothing. And it is the brand: #3943FF/#E4004D/#FA9329 are --purp/--redder/--orng, i.e. brand v2.0's --grad-projets at 149.70° instead of 144°. */ --gradient-text-dawn: linear-gradient(149.70deg, #3943FF 40%, #E4004D 70%, #FA9329 100%); /* 47287:31156 — the 0.5px stroke on the S-HERO decorative shapes, read from the exported SVG. NOT the Text/Dawn ramp: vertical, and it fades to white at the bottom. */ --gradient-border-dawn: linear-gradient(180deg, #3943FF 20%, #E4004D 30%, #FA9329 80%, #FFFFFF 100%); /* ── ELEVATION ────────────────────────────────────────────────────────── Four effects. No XS, no XL — they do not exist in the file. */ /* = brand v2.0 --shadow-card, offset for offset. Unchanged. */ --shadow-ambient: 0 4px 10px rgba(0, 0, 0, .02), 4px 0 10px rgba(0, 0, 0, .02), -4px 0 10px rgba(0, 0, 0, .02); --shadow-sm: 0 2px 6px rgba(0, 0, 0, .03); /* Elevation/SM */ --shadow-md: 0 3px 12px rgba(0, 0, 0, .04); /* Elevation/MD — 47287:31198 */ --shadow-lg: 0 4px 20px rgba(0, 0, 0, .05); /* Elevation/LG — 47511:27342 */ /* ── RADIUS ───────────────────────────────────────────────────────────── ⚠ `Border Radius/None` is a DUPLICATE of radius/none, both 0. Collapsed. ⚠ radius/full is 999999 in Figma, not 9999. Normalised to 9999px here. */ --radius-none: 0; --radius-2: 2px; --radius-4: 4px; /* = brand --radius-xs */ --radius-6: 6px; --radius-8: 8px; --radius-10: 10px; /* = brand --radius-sm */ --radius-12: 12px; --radius-14: 14px; /* = brand --radius-card */ --radius-16: 16px; --radius-full: 9999px; /* No 24 step — brand --radius-lg (24px) has no DS equivalent. */ /* ── BORDER WIDTH ─────────────────────────────────────────────────────── Figma names them geometry-border-width-*. `lg` is the 1px default, there is no `md`, and `2-5xl` means 2.5xl. Values ported, names kept so they trace back. */ --border-width-none: 0; --border-width-sm: 0.5px; --border-width-lg: 1px; --border-width-xl: 1.25px; --border-width-2xl: 1.5px; /* ⚠ CONFLICT: 2px on ASM, CHT, ELE, S-CONT, S-FEAT, S-HERO, S-STAT (7 nodes) vs 1.5px on BTN, TF, TFD, FORM, S-BENT, MM (6 nodes). Nearly even, and it splits component-vs- section. 1.5px shipped because every CONTROL reads it. design-tokens.md §4. */ --border-width-2-5xl: 1.75px; /* ── SPACING ──────────────────────────────────────────────────────────── THREE parallel scales, not interchangeable. Keep them apart. a. --space-* component spacing — gaps/padding INSIDE a component b. --spacing-N layout spacing — section and card rhythm c. --scale-N control sizing — heights and square sizes, not gaps Evidence for (b): the feature card 46902:4812 pads and gaps with var(--spacing/spacing-24), content gap -16, title gap -8. Evidence for (c): the button instance 47528:41732 is h-[var(--scale/28)]. ──────────────────────────────────────────────────────────────────── */ /* a. component */ --space-none: 0; --space-3xs: 2px; --space-2xs: 4px; --space-xs: 6px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 20px; --space-2xl: 24px; /* ⚠ CONFLICT: 28px on BTN, BTNP, S-TEST (3 nodes). 24px shipped — 14 nodes, incl. the assembled page. */ --space-3xl: 32px; /* ⚠ CONFLICT: 36px on BTN, BTNP, S-FEAT (3 nodes). 32px shipped — 13 nodes, incl. the assembled page. */ --space-4xl: 40px; --space-5xl: 48px; --space-6xl: 64px; /* numeric escapes from the same scale */ --space-10: 10px; --space-14: 14px; --space-100: 100px; /* b. layout */ --spacing-8: 8px; --spacing-16: 16px; --spacing-24: 24px; --spacing-32: 32px; --spacing-48: 48px; --spacing-56: 56px; --spacing-64: 64px; --spacing-80: 80px; --spacing-96: 96px; /* c. control sizing */ --scale-12: 12px; --scale-16: 16px; --scale-20: 20px; --scale-24: 24px; --scale-28: 28px; --scale-36: 36px; --scale-40: 40px; --scale-48: 48px; /* ── SCREEN ───────────────────────────────────────────────────────────── ⚠ CORRECTED 22/10. This block used to say the DS tells one desktop tier and nothing below it, and that breakpoints were ours to invent. BOTH halves of that were wrong, and 15 ad-hoc breakpoints in sections.css were built on them. What was true: there is no `screen/tablet/*` or `screen/mobile/*` VARIABLE, and Figma layout grids really are not exposed by the MCP. What was false: the conclusion drawn from it. The DS declares its responsive grid on a page of its own — ↪ Layout Grid, 46791:49869 — drawn as FRAMES with the spec written out in words beside them, which is why no variable and no layout-grid API ever showed it. One of twelve pages the first extraction never opened; design-tokens.md §2 maps all 26 now. Three tiers, read off that page: Desktop 12 columns × 78, gutter 24 → 1200 Tablet 8 columns × 72, gutter 20 → 716 Mobile 6 columns × 40, gutter 16 → 320 The page names the tiers but not the viewport widths they switch at, so THOSE are still ours. The column arithmetic is not. design-tokens.md §3.8. */ --screen-desktop-width: 1440px; /* design canvas */ --screen-desktop-max-content: 1200px;/* = brand --max-content, unchanged */ --screen-desktop-max-width: 1920px; /* outer bound (footer, assembly) */ --screen-tablet-max-content: 716px; --screen-mobile-max-content: 320px; /* The grid itself, so a new band can be laid out ON it rather than eyeballed against a 1440 render — which is how the per-section gutters below came to be 16, 24 and 48 with no single grid explaining them. Additive: nothing reads these yet, so nothing moves. */ --grid-desktop-columns: 12; --grid-desktop-column: 78px; --grid-desktop-gutter: 24px; --grid-tablet-columns: 8; --grid-tablet-column: 72px; --grid-tablet-gutter: 20px; --grid-mobile-columns: 6; --grid-mobile-column: 40px; --grid-mobile-gutter: 16px; /* Measured, not declared: every section frame puts its 1200px content box at x=120 on the 1440 canvas → 120px page margin each side. Gutters WITHIN a band are still per-section (16 / 24 / 48 all measured): the grid above explains the 24 and nothing else, so the other two stay the designer's own choices rather than an arithmetic anybody can rederive. */ --layout-page-margin: 120px; } /* ═══════════════════════════════════════════════════════════════════════════ DARK MODE — recorded, not shipped (decision D-02, design-tokens.md §6) The DS carries a full dark palette and the FOOTER IS AUTHORED DARK (FOOT 46957:13919 resolves every semantic name to the values below). A dark site theme is out of scope; a dark footer is not — it is one section's surfaces and it is what the design shows. Kept commented so the decision is reversible without a second extraction. To ship the dark footer, promote these onto a .rmd-dark scope rather than a media query — it is a surface choice, not a user preference. ═══════════════════════════════════════════════════════════════════════════ */ /* .rmd-dark { --color-content-primary: #f1f5f9; --color-content-secondary: #e2e8f0; --color-content-tertiary: #adbbce; --color-content-quaternary: #90a1b9; --color-content-disabled: #314158; --color-content-inverse-b: #ffffff; --color-surface-canvas: #040a1c; --color-surface-canvas-alt: #081024; --color-surface-region: #0f172b; --color-border-surface-divider: #314158; --color-border-control-default: #314158; --color-border-control-hover: #314158; --color-field-hover: #060e21; --color-accent-rose: #4d0218; } */