/* ========================================================================== Renew Wellness Place: design tokens Source of truth for the website rebuild, landing pages, email and social. Rebuilt 2026-08-11. Paired with tokens.json and the renew-visual-brand skill. ELEVEN colour tokens. Six come from the Canva Brand Kit. Five are real pixels sampled from the official gradient, with coordinates recorded so any of them can be re-verified against the source image. A colour may only enter this file if it traces to a source file. Nothing is added because it sits nicely next to the others, and nothing is sampled out of a photograph. Version 1.0 broke that rule and was withdrawn. ========================================================================== */ :root { /* --- TIER 1: OFFICIAL --------------------------------------------------- Canva Brand Kit, verbatim. Fixed. Do not adjust, rename or re-derive. Source: brand/Renew Current Brand/image (8).png ---------------------------------------------------------------------- */ --rw-navy: #113B6A; /* primary. Logo, headings, body text on light. 9.79 on cream, 11.31 on white. AAA both */ --rw-blue: #0850A3; /* links, buttons, secondary. Cold and water. 6.77 on cream, AA. Text-safe */ --rw-rust: #D74C1D; /* warm accent, heat. 3.68 on cream. LARGE TEXT ONLY, never body copy */ --rw-peach: #F07B4B; /* bright accent. 2.38 on cream. FILL ONLY, never text on a light surface */ --rw-cream: #F3EEE6; /* default page surface */ --rw-white: #FFFFFF; /* cards and raised surfaces */ /* --- TIER 2: SAMPLED FROM THE GRADIENT ---------------------------------- Real pixels from brand/Renew Current Brand/Renew gradient (1).png (900 x 1600). Coordinates are percentages of width and height. Legitimate because the gradient's darkest pixel measures #133D6B, which is --rw-navy within rounding. The gradient IS the brand navy extended into light, so tones drawn from it are shades of an official colour. This is also why the neon photography may NOT be sampled: that light comes from LED fixtures, not from the brand. ---------------------------------------------------------------------- */ --rw-slate-deep: #234A74; /* x75 y0. Dark surfaces, footers, reversed panels. 7.89 on cream, AAA */ --rw-slate: #456587; /* x99 y37. Muted text, captions, metadata. 5.25 on cream, AA. The only muted tone that passes */ --rw-steel: #8597AA; /* x35 y45. Icons, fills, chart tones. 2.60 on cream. FILL ONLY, see note below */ --rw-mist: #B3B7BD; /* x0 y75. Borders, dividers, rules. FILL ONLY */ --rw-blush: #BDAEAC; /* x10 y97. Warm neutral, borders and fills on dark. FILL ONLY on light, but 5.28 on navy, AA */ /* Steel measures 2.998 on white, missing AA-large by 0.002, and 2.60 on cream. It fails on both, so steel never carries text on a light surface. Worth knowing because 2dp rounds it to 3.00 and it looks like a pass. */ /* --- THE GRADIENT ------------------------------------------------------- One gradient. Prefer the supplied image file: it carries photographic noise that CSS cannot reproduce, and that noise is what stops it reading as a template. Use this CSS fallback only where an image cannot go, for example HTML email. Keep navy top-right and blush bottom-left. Never recolour it, never flip the warm and cool ends. ---------------------------------------------------------------------- */ --rw-gradient: linear-gradient(203deg, #113B6A 0%, #34577E 18%, #5A7592 34%, #8597AA 52%, #A1ADB9 66%, #B3B7BD 78%, #BDAEAC 100%); /* --- SEMANTIC ROLES ----------------------------------------------------- Prefer these in components. Swap the mapping, not every call site. ---------------------------------------------------------------------- */ --rw-bg: var(--rw-cream); --rw-bg-raised: var(--rw-white); --rw-bg-inverse: var(--rw-navy); --rw-text: var(--rw-navy); /* 9.79 on cream, AAA */ --rw-text-strong: var(--rw-navy); --rw-text-muted: var(--rw-slate); /* 5.25 on cream, AA */ --rw-text-accent: var(--rw-blue); /* 6.77 on cream, AA */ --rw-text-inverse: var(--rw-cream); /* 9.79 on navy, AAA */ --rw-border: var(--rw-mist); --rw-border-soft: rgba(17, 59, 106, 0.09); --rw-focus: var(--rw-blue); /* --- TYPOGRAPHY --------------------------------------------------------- Both open licence, both on Google Fonts, both in Canva. No font licence needed for web, print, social or video. The mono carries every number, time, price and label. That is the visual form of the brand voice: feeling first, science as proof. ---------------------------------------------------------------------- */ --rw-font-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif; --rw-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --rw-w-regular: 400; --rw-w-medium: 500; --rw-w-semi: 600; --rw-w-bold: 700; --rw-w-black: 800; /* Fluid scale. Minimum is mobile, maximum is desktop. */ --rw-fs-mono: 0.75rem; /* 12px labels */ --rw-fs-xs: 0.8125rem; /* 13px */ --rw-fs-sm: 0.9375rem; /* 15px */ --rw-fs-base: 1.0625rem; /* 17px body */ --rw-fs-lg: 1.1875rem; /* 19px lead */ --rw-fs-xl: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem); --rw-fs-2xl: clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem); --rw-fs-3xl: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem); --rw-fs-hero: clamp(2.75rem, 1.4rem + 5.6vw, 5.25rem); --rw-lh-tight: 0.98; /* uppercase hero stacks */ --rw-lh-snug: 1.18; /* headings */ --rw-lh-normal: 1.5; --rw-lh-relaxed: 1.65; /* body copy */ --rw-ls-hero: -0.025em; /* large type needs negative tracking */ --rw-ls-head: -0.01em; --rw-ls-normal: 0; --rw-ls-mono: 0.14em; /* the mono label look */ --rw-ls-button: 0.1em; /* --- SPACING ------------------------------------------------------------ 4px base. Keep to the scale so layouts stay on a rhythm. ---------------------------------------------------------------------- */ --rw-s-1: 0.25rem; /* 4px */ --rw-s-2: 0.5rem; /* 8px */ --rw-s-3: 0.75rem; /* 12px */ --rw-s-4: 1rem; /* 16px */ --rw-s-5: 1.5rem; /* 24px */ --rw-s-6: 2rem; /* 32px */ --rw-s-7: 3rem; /* 48px */ --rw-s-8: 4rem; /* 64px */ --rw-s-9: 6rem; /* 96px */ --rw-s-10: 8rem; /* 128px */ --rw-section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem); --rw-gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem); --rw-measure: 62ch; /* max body line length */ --rw-container: 1200px; /* --- SHAPE -------------------------------------------------------------- The arch is the brand's device, taken from the arched doorways, alcoves and barrel saunas in the building. The top radius must equal half the element width or it is not an arch. The vertical figure depends on the aspect ratio: 3:4 needs 37.5%, 1:1 needs 50%, 9:16 needs 28%. ---------------------------------------------------------------------- */ --rw-r-sm: 4px; --rw-r-md: 8px; /* buttons and inputs */ --rw-r-lg: 16px; --rw-r-pill: 999px; --rw-arch: 50% 50% var(--rw-r-md) var(--rw-r-md) / 37.5% 37.5% var(--rw-r-md) var(--rw-r-md); --rw-arch-1-1: 50% 50% var(--rw-r-md) var(--rw-r-md) / 50% 50% var(--rw-r-md) var(--rw-r-md); --rw-arch-9-16: 50% 50% var(--rw-r-md) var(--rw-r-md) / 28% 28% var(--rw-r-md) var(--rw-r-md); --rw-border-w: 1px; --rw-rule-w: 2px; /* --- ELEVATION ---------------------------------------------------------- Navy-tinted. Pure black shadows read cold against cream. (v1.0 tinted these with a charcoal that no longer exists in the palette.) ---------------------------------------------------------------------- */ --rw-shadow-sm: 0 1px 2px rgba(17, 59, 106, 0.07), 0 1px 3px rgba(17, 59, 106, 0.09); --rw-shadow-md: 0 4px 12px rgba(17, 59, 106, 0.10), 0 2px 4px rgba(17, 59, 106, 0.07); --rw-shadow-lg: 0 12px 32px rgba(17, 59, 106, 0.14), 0 4px 8px rgba(17, 59, 106, 0.07); /* --- MOTION ------------------------------------------------------------- Calm and considered. Nothing bounces. ---------------------------------------------------------------------- */ --rw-dur-fast: 150ms; --rw-dur-base: 250ms; --rw-dur-slow: 400ms; --rw-ease: cubic-bezier(0.4, 0.0, 0.2, 1); --rw-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1); } /* -------------------------------------------------------------------------- Dark / inverse sections. Apply [data-rw-theme="dark"] to a section to flip the semantic roles. Navy is the darkest colour in the system, so navy is the dark surface. -------------------------------------------------------------------------- */ [data-rw-theme="dark"] { --rw-bg: var(--rw-navy); --rw-bg-raised: var(--rw-slate-deep); --rw-bg-inverse: var(--rw-cream); --rw-text: var(--rw-cream); /* 9.79 on navy, AAA */ --rw-text-strong: var(--rw-white); /* 11.31 on navy, AAA */ --rw-text-muted: var(--rw-mist); /* 5.61 on navy, AA */ --rw-text-accent: var(--rw-blush); /* 5.28 on navy, AA */ --rw-text-inverse: var(--rw-navy); --rw-border: rgba(255, 255, 255, 0.20); --rw-border-soft: rgba(255, 255, 255, 0.10); /* Peach is 4.11 on navy: large text only, never a caption or a label. Blue is 1.45 on navy and rust is 2.66. Neither may carry text at all. */ } @media (prefers-reduced-motion: reduce) { :root { --rw-dur-fast: 1ms; --rw-dur-base: 1ms; --rw-dur-slow: 1ms; } }