/* ========================================================================== Scale Mediation Help Centre — design tokens -------------------------------------------------------------------------- One aesthetic position: a legal reference document, set properly. Hairline rules instead of cards. Green is identity, never decoration. Every colour is defined on bare :root first, then re-stated for dark. ========================================================================== */ :root { color-scheme: light; /* ---------------------------------------------------------------- colour Neutrals are generated in OKLCH at hue 190 with chroma 0.004–0.015 — the same hue family as the Scale mark, so greys sit under the green instead of fighting it. They read as grey; they are not grey. ------------------------------------------------------------------- */ --n-25: #f9fcfc; --n-50: #f3f8f8; --n-100: #eaf1f0; --n-150: #e0e7e7; --n-200: #d0dad9; --n-300: #b5c0bf; --n-400: #939f9e; --n-500: #737e7d; --n-600: #586463; --n-700: #3f4b4a; --n-800: #273231; --n-900: #151f1e; --n-950: #0c1413; /* Brand. --brand-700 is the mark itself, sampled from the product sidebar: #115e59 = oklch(0.437 0.0705 188.2). The ramp is built around it at that exact hue. */ --brand-50: #e8f9f7; --brand-100: #cff0ec; --brand-200: #addfda; --brand-300: #80c5be; --brand-400: #55a39d; --brand-500: #337e78; --brand-600: #1d635e; --brand-700: #115e59; --brand-800: #073835; --brand-900: #012522; /* Amber. The only second hue in the system. Reserved for "Careful" callouts — money, availability, anything irreversible. */ --amber-50: #fdf6ec; --amber-100: #f9e7cb; --amber-200: #f0cf9c; --amber-400: #d99a3f; --amber-600: #a56400; --amber-700: #8a5200; --amber-800: #5e3800; /* ------------------------------------------------------- semantic: light */ --bg: #ffffff; --bg-sunken: var(--n-50); --bg-raised: #ffffff; --bg-inset: var(--n-25); --bg-hover: var(--n-50); --bg-active: var(--n-100); --bg-overlay: rgba(12, 20, 19, 0.45); --text: var(--n-900); --text-secondary: var(--n-700); --text-muted: var(--n-600); --text-faint: var(--n-500); --text-on-brand: #ffffff; --border: var(--n-150); --border-strong: var(--n-200); --border-faint: var(--n-100); --accent: var(--brand-700); --accent-hover: var(--brand-600); --accent-quiet: var(--brand-50); --accent-line: var(--brand-200); --accent-text: var(--brand-700); --focus-ring: var(--brand-500); --callout-note-bg: var(--n-50); --callout-note-line: var(--brand-300); --callout-note-text: var(--n-800); --callout-care-bg: var(--amber-50); --callout-care-line: var(--amber-400); --callout-care-text: var(--amber-800); --callout-care-label: var(--amber-700); /* Screenshot plates sit on a faint tinted ground so a white product screenshot still reads as an object on the page. */ --plate-bg: var(--n-50); --plate-border: var(--n-200); --shadow-overlay: 0 1px 2px rgba(12,20,19,.04), 0 12px 32px -8px rgba(12,20,19,.16), 0 32px 64px -24px rgba(12,20,19,.18); --shadow-sticky: 0 1px 0 var(--border); /* ------------------------------------------------------------ typography Newsreader — a screen-drawn transitional serif. Legal work is document work; a serif title says "reference", not "marketing site", and no competitor on Zendesk or Intercom has one. Instrument Sans — neo-grotesque for everything else. Large x-height, honest at 15–17px, with enough character in the a/g/R that it is not Inter. Mono is the system stack; no third webfont. */ --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --fs-micro: 0.6875rem; /* 11 — eyebrows, tracked caps */ --fs-xs: 0.75rem; /* 12 — counts, pills */ --fs-sm: 0.8125rem; /* 13 — nav, meta, rail */ --fs-md: 0.875rem; /* 14 — captions, secondary UI */ --fs-base: 0.9375rem; /* 15 — dense prose, list descriptions */ --fs-body: 1.0625rem; /* 17 — article body */ --fs-lead: 1.1875rem; /* 19 — article intro */ --fs-h3: 1.0625rem; /* 17 */ --fs-h2: 1.375rem; /* 22 */ --fs-h1: 2.125rem; /* 34 */ --fs-display: 2.75rem; /* 44 — home, and nothing else */ --lh-display: 1.1; --lh-h1: 1.16; --lh-h2: 1.3; --lh-body: 1.65; --lh-ui: 1.45; --lh-tight: 1.25; --tr-display: -0.022em; --tr-h1: -0.018em; --tr-h2: -0.012em; --tr-ui: -0.004em; --tr-caps: 0.085em; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; /* --------------------------------------------------------------- spacing 4px base. Named by step so a writer never types a raw pixel. */ --s-1: 0.25rem; /* 4 */ --s-2: 0.5rem; /* 8 */ --s-3: 0.75rem; /* 12 */ --s-4: 1rem; /* 16 */ --s-5: 1.25rem; /* 20 */ --s-6: 1.5rem; /* 24 */ --s-7: 2rem; /* 32 */ --s-8: 2.5rem; /* 40 */ --s-9: 3rem; /* 48 */ --s-10: 4rem; /* 64 */ --s-11: 5rem; /* 80 */ --s-12: 7rem; /* 112 */ /* ---------------------------------------------------------------- layout */ --header-h: 61px; --nav-w: 248px; --rail-w: 208px; --measure: 41rem; /* 656px — ~68 characters at 17px. Fixed in rem, not ch, so every block that respects the measure lines up to the same pixel regardless of its own font size. */ --col-max: 1100px; /* figures break out to this */ --shell-max: 1480px; /* the body is left-anchored (see .hc-shell), so extra width on a wide monitor falls to the right and the nav keeps a normal left margin. */ --gutter: var(--s-8); /* ----------------------------------------------------------------- radii Small and consistent. Nothing here is a pill except the search field and the persona chips. */ --r-xs: 3px; --r-sm: 5px; --r-md: 8px; --r-lg: 12px; --r-full: 999px; /* --------------------------------------------------------------- motion */ --ease: cubic-bezier(0.32, 0.72, 0, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; } /* Dark scheme removed — this help centre is light theme only. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; } }