/* ============================================================ The Digital Compass — design tokens Single source of truth for the marketing site and the TDC Platform. Nothing in either codebase declares a colour, a radius, a type size or a motion duration outside this file. Usage the TDC Platform (light) thedigitalcompass.com.au (dark) The brand block never changes between the two. Only the surface block does. That is the whole mechanism. A section of a page may take the other surface by carrying the attribute itself (the TDC Platform's welcome experience is dark:
). Custom properties inherit, so everything inside it resolves to that surface's values. Changes agreed with Adrian on 24 September 2026, before the platform reskin (docs/DECISIONS.md): --tdc-bronze-fill for fills behind white text; the site's --tdc-ink-3 lifted to 60%; the TDC Platform's focus ring in --tdc-bronze; --tdc-accent-ink for bronze text (links) that meets the --tdc-ink-3 contrast floor on the light surface; --tdc-text-2xs for the small uppercase labels the reskin reference uses; --tdc-t-ambient for the welcome's breathing compass; and the nested surface selectors below. Agreed 25 September 2026: --tdc-ink-3 a touch darker on the TDC Platform and the button hover darker rather than lighter, so both pass 4.5:1 everywhere; and the site's own editorial type sizes (--tdc-site-*) in the site block, so the marketing site keeps its exact typography with every size declared here. ============================================================ */ :root { /* ---------- brand: identical everywhere ---------- */ --tdc-navy: #0B1F33; --tdc-navy-deep: #06121E; --tdc-navy-slate: #13293F; --tdc-bronze: #A87A46; --tdc-bronze-hover: #BC8A50; --tdc-bronze-lit: #D9AE71; /* bronze on a dark ground */ --tdc-bronze-fill: #8C6437; /* a fill with white text on it: 5.26:1 (--tdc-bronze is 3.79:1) */ --tdc-bronze-fill-hover: #875F33; /* a shade darker than the fill: 5.23:1 with cream (was #936A3B, lighter, 4.45:1) */ --tdc-cream: #F7F6F2; /* ---------- semantic state: never the same as the accent ---------- Bronze means brand, and it means "this is the action". These four mean state. They must never be used for emphasis. */ --tdc-good: #4E9B7A; --tdc-warn: #D97E4A; --tdc-bad: #C4574C; --tdc-info: #5B8CB8; /* ---------- type ---------- */ --tdc-font-display: Jost, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --tdc-font-body: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; /* display weights: 200 is reserved for the site's largest headings only */ --tdc-w-hairline: 200; --tdc-w-light: 300; --tdc-w-regular: 400; --tdc-w-medium: 500; --tdc-tracking-caps: 0.18em; /* uppercase eyebrows and table headers */ --tdc-tracking-tight:-0.018em; /* display headings */ /* ---------- spacing: 4px base ---------- */ --tdc-1: 4px; --tdc-2: 8px; --tdc-3: 12px; --tdc-4: 16px; --tdc-5: 20px; --tdc-6: 24px; --tdc-8: 32px; --tdc-10:40px; --tdc-12:48px; --tdc-16:64px; --tdc-20:80px; /* ---------- radii ---------- */ --tdc-r-sm: 6px; --tdc-r: 8px; --tdc-r-lg: 10px; --tdc-r-xl: 14px; --tdc-r-pill: 999px; /* ---------- motion ---------- */ --tdc-t-fast: 160ms; --tdc-t: 240ms; --tdc-t-slow: 420ms; --tdc-t-ambient: 5s; /* slow ambient loops: the site, and the welcome experience only */ --tdc-t-spin: 800ms; /* one turn of the "working on it" ring on a clicked button or link (Adrian, 28 September 2026) */ --tdc-t-shoot: 900ms; /* the welcome's shooting star, from one star to the next (Adrian, 29 September 2026) */ --tdc-ease: cubic-bezier(.22, .61, .36, 1); /* ---------- elevation: used sparingly, never on every card ---------- */ --tdc-shadow-sm: 0 1px 2px rgba(11, 31, 51, .06); --tdc-shadow: 0 10px 26px -18px rgba(11, 31, 51, .45); --tdc-shadow-lg: 0 26px 60px -30px rgba(11, 31, 51, .55); /* ---------- focus: the same ring in both surfaces ---------- */ --tdc-focus: var(--tdc-bronze-lit); --tdc-focus-width: 2px; --tdc-focus-offset:2px; } /* ============================================================ THE PLATFORM. Light. Dense. Operated every day. ============================================================ */ :root[data-surface="app"], [data-surface="app"] { color-scheme: light; --tdc-bg: #F5F3EE; --tdc-surface: #FFFFFF; --tdc-surface-2: #FBFAF7; --tdc-rail: #FFFFFF; --tdc-field: #FFFFFF; --tdc-hover: #F6F2EA; --tdc-line: #E2DED5; --tdc-line-2: #EEEAE2; --tdc-ink: #16202E; /* body and headings 15.1:1 on surface */ --tdc-ink-2: #4A5866; /* secondary body 7.2:1 on surface */ --tdc-ink-3: #616C79; /* captions, table heads 5.3:1 on surface, 4.8:1 on bg and hover (was #66727F, 4.4:1 on bg) */ /* the header is navy in both surfaces: it is the fixed anchor */ --tdc-header: var(--tdc-navy); --tdc-header-ink: var(--tdc-cream); --tdc-header-ink-2:rgba(247, 246, 242, .5); /* the accent reads as the darker bronze on a light ground */ --tdc-accent: var(--tdc-bronze); --tdc-accent-soft: rgba(168, 122, 70, .12); --tdc-accent-line: rgba(168, 122, 70, .45); /* the accent as text (links): the full bronze is 3.79:1 on white, under the --tdc-ink-3 floor, so text takes the darker fill (5.26:1) */ --tdc-accent-ink: var(--tdc-bronze-fill); /* the focus ring: light bronze is about 1.9:1 on white, under the 3:1 a focus indicator needs, so the TDC Platform rings in the full bronze */ --tdc-focus: var(--tdc-bronze); /* working density */ --tdc-text-2xs: 10.5px; /* uppercase labels, table heads, eyebrows */ --tdc-text-xs: 12.5px; --tdc-text-sm: 13.5px; --tdc-text: 15px; --tdc-text-lg: 16px; --tdc-leading: 1.5; --tdc-h1: 27px; --tdc-h2: 16px; --tdc-row-h: 46px; /* table and list rows */ --tdc-control-h: 38px; /* inputs, selects, buttons */ } /* ============================================================ THE SITE. Dark. Airy. Read once, has to persuade. ============================================================ */ :root[data-surface="site"], [data-surface="site"] { color-scheme: dark; --tdc-bg: #06121E; --tdc-surface: #0B1F33; --tdc-surface-2: #13293F; --tdc-rail: #0B1F33; --tdc-field: rgba(11, 31, 51, .6); --tdc-hover: rgba(19, 41, 63, .6); --tdc-line: rgba(247, 246, 242, .12); --tdc-line-2: rgba(247, 246, 242, .07); --tdc-ink: #F7F6F2; --tdc-ink-2: rgba(247, 246, 242, .76); --tdc-ink-3: rgba(247, 246, 242, .60); /* 6.7:1 on --tdc-bg; 50% was 4.16:1 on the tooltip */ --tdc-header: var(--tdc-navy-deep); --tdc-header-ink: var(--tdc-cream); --tdc-header-ink-2:rgba(247, 246, 242, .5); /* on a dark ground the accent lifts to the lighter bronze */ --tdc-accent: var(--tdc-bronze-lit); --tdc-accent-soft: rgba(217, 174, 113, .13); --tdc-accent-line: rgba(217, 174, 113, .45); --tdc-accent-ink: var(--tdc-bronze-lit); --tdc-focus: var(--tdc-bronze-lit); /* editorial scale */ --tdc-text-2xs: 11px; --tdc-text-xs: 13px; --tdc-text-sm: 14.5px; --tdc-text: 16px; --tdc-text-lg: 18px; --tdc-leading: 1.62; --tdc-h1: clamp(32px, 5.2vw, 58px); --tdc-h2: clamp(24px, 3.1vw, 34px); --tdc-row-h: 70px; --tdc-control-h: 44px; /* the marketing site's own editorial sizes (agreed 25 September 2026): headings that grow with the screen, largest first, then fixed sizes. Only the site uses these; the TDC Platform keeps the scale above. */ --tdc-site-display-1: clamp(28px,4.2vw,46px); --tdc-site-display-2: clamp(25px,3vw,36px); --tdc-site-orbit-hub: clamp(22px,3.4vh,34px); /* "Our services" in the orbit's hub: sized to the hub, which is sized to the screen's height (29 September 2026) */ --tdc-site-display-3: clamp(24px,3.2vw,36px); --tdc-site-display-4: clamp(23px,2.8vw,32px); --tdc-site-display-5: clamp(20px,2.4vw,26px); --tdc-site-display-6: clamp(19px,2.3vw,25px); --tdc-site-display-7: clamp(17px,1.7vw,20px); --tdc-site-display-8: clamp(16px,1.6vw,18.5px); --tdc-site-size-36: 36px; --tdc-site-size-32: 32px; --tdc-site-size-26: 26px; --tdc-site-size-22: 22px; --tdc-site-size-21: 21px; --tdc-site-size-20: 20px; --tdc-site-size-19-5: 19.5px; --tdc-site-size-19: 19px; --tdc-site-size-17: 17px; --tdc-site-size-15-5: 15.5px; --tdc-site-size-15: 15px; --tdc-site-size-14: 14px; --tdc-site-size-13-5: 13.5px; --tdc-site-size-12-5: 12.5px; --tdc-site-size-12: 12px; --tdc-site-size-11-5: 11.5px; --tdc-site-size-10-5: 10.5px; } /* ============================================================ Two rules that apply to both surfaces and are not negotiable. ============================================================ */ /* every focusable thing shows the same ring */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--tdc-focus-width) solid var(--tdc-focus); outline-offset: var(--tdc-focus-offset); } /* nothing moves for anyone who has asked for less motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }