/* ============================================================================ DR SOPHIA AI · DESIGN TOKENS (tokens.css) Enterprise clinical-intelligence / CDSS · "Calm Authority" THE single source of truth for colour, type, space, radius, shadow, motion. Loads FIRST on every page. No other stylesheet may re-declare a --ds-* token (the 2026-07 reconstruction removed every late re-pin; keep it that way). ---------------------------------------------------------------------------- Naming: role-named semantic tokens reference appearance-named primitives. Convention: --ds--. No slashes. Consume var(--ds-*) only; never hardcode a value a token already expresses. ============================================================================ ---------------------------------------------------------------------------- COLOUR CONTRACT (verified WCAG · these rules are LOCKED, do not relax) ---------------------------------------------------------------------------- 1. PRIMARY CTA = GREEN fill (#00633C) + BONE text (#FFF5E9) = 6.84:1. Passes AA for body-size text. This is the one true primary button. NEVER use a copper fill with light text for body-size labels. 2. COPPER (#D5691B) FAILS body-text AA on every surface (3.32:1 on bone). Copper is permitted ONLY for: - large display text (>= 24px, or >= 18.66px / ~14pt when bold) - focus rings - borders (>= 1px) - underlines - icon strokes - the dot-constellation signature graphic NEVER copper for body text. NEVER copper on green / olive / sage surfaces (fails entirely). 3. Body text on LIGHT = ink (#1E2C24). Secondary text = olive (#505631). Text on DARK/INVERSE = bone (#FFF5E9). ---------------------------------------------------------------------------- SIGNATURE DEVICE Radial dot-constellation: green nodes orbiting a copper nucleus. Documented motif for hero / section accents. Copper here is graphic, never text, so the contrast contract is respected. ============================================================================ */ :root { /* ========================================================================== 1 · PRIMITIVES · appearance-named raw values. Do not consume directly in component CSS; consume the semantic layer below. LOCKED hex values. ========================================================================== */ /* --- Core brand palette ------------------------------------------------- */ --ds-color-bone: #FFF5E9; /* warm paper base */ --ds-color-tint: #FDFBF7; /* near-white, faint warm tint */ --ds-color-green: #00633C; /* primary brand green */ --ds-color-green-deep: #03452C; /* deepest green, inverse surface */ --ds-color-green-bright: #0B7A4B; /* brighter green, hover / active */ --ds-color-copper: #D5691B; --ds-color-copper-ink: #A54E0D; /* deepened copper; passes AA for small text on bone (5.27:1). Use for eyebrows/labels. */ /* accent · NON-TEXT at body size */ --ds-color-copper-light: #E9A66B; /* lightened copper · inverted-constellation accent on dark grounds (nucleus/halo/edges on green-deep) · NON-TEXT */ --ds-color-sage: #ECECDB; /* muted desaturated surface */ --ds-color-olive: #505631; /* secondary text, muted ink */ --ds-color-ink: #1E2C24; /* primary body ink */ --ds-color-ink-soft: #46554B; /* softened ink, low-emphasis on light */ --ds-color-white: #FFFFFF; /* pure white, raised surfaces */ /* --- Green ramp (tints up / shades down via color-mix) ------------------ Derived, not locked. Use for hovers, subtle fills, dividers on green. The three locked greens above remain the canonical brand stops. */ --ds-color-green-50: color-mix(in srgb, var(--ds-color-green) 8%, var(--ds-color-bone)); --ds-color-green-100: color-mix(in srgb, var(--ds-color-green) 16%, var(--ds-color-bone)); --ds-color-green-200: color-mix(in srgb, var(--ds-color-green) 32%, var(--ds-color-bone)); --ds-color-green-300: color-mix(in srgb, var(--ds-color-green) 52%, var(--ds-color-bone)); --ds-color-green-400: color-mix(in srgb, var(--ds-color-green) 76%, var(--ds-color-bone)); --ds-color-green-500: var(--ds-color-green); /* base */ --ds-color-green-600: var(--ds-color-green-deep); /* = deep stop */ --ds-color-green-700: color-mix(in srgb, var(--ds-color-green-deep) 80%, #000000); --ds-color-green-800: color-mix(in srgb, var(--ds-color-green-deep) 60%, #000000); /* --- Copper ramp (NON-TEXT at body size · same contract applies) -------- */ --ds-color-copper-50: color-mix(in srgb, var(--ds-color-copper) 8%, var(--ds-color-bone)); --ds-color-copper-100: color-mix(in srgb, var(--ds-color-copper) 16%, var(--ds-color-bone)); --ds-color-copper-200: color-mix(in srgb, var(--ds-color-copper) 32%, var(--ds-color-bone)); --ds-color-copper-300: color-mix(in srgb, var(--ds-color-copper) 52%, var(--ds-color-bone)); --ds-color-copper-400: color-mix(in srgb, var(--ds-color-copper) 76%, var(--ds-color-bone)); --ds-color-copper-500: var(--ds-color-copper); /* base */ --ds-color-copper-600: color-mix(in srgb, var(--ds-color-copper) 82%, #000000); --ds-color-copper-700: color-mix(in srgb, var(--ds-color-copper) 64%, #000000); /* --- Alpha helpers (for borders / shadows / overlays) ------------------- */ --ds-color-ink-a04: rgba(30, 44, 36, .04); --ds-color-ink-a06: rgba(30, 44, 36, .06); --ds-color-ink-a10: rgba(30, 44, 36, .10); --ds-color-ink-a12: rgba(30, 44, 36, .12); --ds-color-ink-a20: rgba(30, 44, 36, .20); /* ========================================================================== 2 · SEMANTIC · role-named. THIS is the layer components consume. Each references a primitive. Contract is encoded here in alias choice. ========================================================================== */ /* --- Text -------------------------------------------------------------- */ --ds-text-primary: var(--ds-color-ink); /* body on light · 1E2C24 */ --ds-text-secondary: var(--ds-color-olive); /* secondary on light · 505631 */ --ds-text-muted: var(--ds-color-ink-soft);/* low-emphasis on light */ --ds-text-on-dark: var(--ds-color-bone); /* body on dark/inverse · FFF5E9 */ /* text-accent: COPPER, LARGE DISPLAY ONLY (>=24px / >=18.66px bold). Never bind this to body, caption, or label text. See COLOUR CONTRACT #2. */ --ds-text-accent: var(--ds-color-copper); /* --- Surfaces ---------------------------------------------------------- */ --ds-surface-page: var(--ds-color-bone); /* default page · bone */ --ds-surface-raised: var(--ds-color-white); /* cards / raised · #FFFFFF */ --ds-surface-muted: var(--ds-color-sage); /* muted blocks · sage */ --ds-surface-inverse: var(--ds-color-green-deep); /* inverse · green-deep */ --ds-surface-tint: var(--ds-color-tint); /* faint warm near-white */ /* --- Borders & focus --------------------------------------------------- */ --ds-border-subtle: var(--ds-color-ink-a12); /* hairline dividers on light */ --ds-border-strong: var(--ds-color-ink-a20); /* emphasised borders on light */ /* focus-ring: COPPER is contract-allowed for rings (non-text). */ --ds-focus-ring: var(--ds-color-copper); /* --- Actions · PRIMARY CTA (green fill + bone text · 6.84:1 AA) --------- */ --ds-action-primary-bg: var(--ds-color-green); /* fill */ --ds-action-primary-text: var(--ds-color-bone); /* label */ --ds-action-primary-hover-bg: var(--ds-color-green-bright); /* hover fill */ --ds-action-primary-active-bg: var(--ds-color-green-deep); /* pressed fill */ /* --- Accent (NON-TEXT) · graphic / decorative copper -------------------- */ --ds-accent: var(--ds-color-copper); /* constellation nucleus, marks */ --ds-accent-soft: var(--ds-color-copper-100); --ds-accent-strong: var(--ds-color-copper-600); /* ========================================================================== 3 · TYPOGRAPHY Titles = Gantari (weight 500). Body = Rethink Sans. UI · labels · nav · numerals = Onest. Weights 400/500/600/700 (+800 for dense governance UI). The old generations (Livvic, Mulish, Nunito) are DEAD — never reintroduce. ========================================================================== */ /* --- Families ---------------------------------------------------------- */ --ds-font-display: "Gantari", "Helvetica Neue", Arial, sans-serif; --ds-font-body: "Rethink Sans", "Segoe UI", system-ui, sans-serif; --ds-font-ui: "Onest", "Segoe UI", system-ui, sans-serif; /* --- Weights ----------------------------------------------------------- */ --ds-font-weight-regular: 400; --ds-font-weight-medium: 500; --ds-font-weight-semibold: 600; --ds-font-weight-bold: 700; /* --- Fluid type scale (clamp) ------------------------------------------ CANONICAL SCALE = the approved HOME rendering (2026-07-03 decision: Home is the site-wide type-scale reference, especially on mobile). Display carries the client's "~15% cut" (fix #1) baked in — the old .home-v2 re-pin and every late :root override are gone; these values are final and live ONLY here. */ --ds-text-display: clamp(1.683rem, 0.68rem + 2.465vw + 1.7vh, 3.519rem); --ds-text-h1: clamp(1.683rem, 0.68rem + 2.465vw + 1.7vh, 3.519rem); /* page titles ride the display size (approved Home hero) */ --ds-text-h2: clamp(1.75rem, 1.25rem + 2.1vw, 2.55rem); --ds-text-h3: clamp(1.4rem, 1.1rem + 1.3vw, 1.9rem); --ds-text-h4: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem); --ds-text-body-lg: clamp(1.0125rem, 0.945rem + 0.27vw, 1.125rem); --ds-text-hero-lead: calc(var(--ds-text-body-lg) * 0.85); /* hero / cover subhead (the approved Home hero description size) */ --ds-text-section-desc: calc(var(--ds-text-hero-lead) * 0.85); /* every non-hero section description: 15% smaller than the hero lead (the biggest description on the page). Derives from the same fluid clamp, so it scales down the same way on tablet/mobile automatically. */ --ds-text-body: clamp(0.9rem, 0.855rem + 0.18vw, 1.0125rem); --ds-text-body-sm: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem); --ds-text-label: clamp(0.75rem, 0.73rem + 0.08vw, 0.8125rem); /* Onest, uppercase */ --ds-text-eyebrow: clamp(0.55rem, 0.42rem + 0.42vw, 0.6765rem); /* section eyebrows: quieter than labels, progressive on mobile */ /* --- Dense / micro tiers (below label) ----------------------------------- For pills, folios, dense card copy and micro kickers. Fixed (non-fluid): dense UI should not scale with the viewport. Values pinned to render at the documented px on the 125% root the system runs at. Bind, never hardcode. */ --ds-text-card-title: 1.12rem; /* card / module / segment title (Gantari) · ~22.4px */ --ds-text-card: 0.675rem; /* dense card body copy (Rethink Sans) · ~13.5px */ --ds-text-feature-title: 1.3rem; /* feature / credential card title (matches .cred__nm) · ~26px */ --ds-text-feature-body: 0.85rem; /* feature / credential card body (matches .cred__desc) · ~17px */ --ds-text-meta: 0.6rem; /* small meta / caption / vocab (Rethink Sans) · ~12px */ --ds-text-micro: 0.525rem; /* micro uppercase label / pill / folio · ~10.5px */ /* --- Line height ------------------------------------------------------- */ --ds-leading-tight: 1.12; /* display */ --ds-leading-snug: 1.3; /* headings */ --ds-leading-body: 1.6; /* prose */ /* --- Letter spacing ---------------------------------------------------- */ --ds-tracking-display: -0.03em; --ds-tracking-label: 0.14em; /* uppercase labels (Onest) */ --ds-tracking-normal: 0; /* ========================================================================== 4 · SPACE · rem ramp (non-linear at the top). Use for padding/gap/margin. ========================================================================== */ --ds-space-1: 0.25rem; /* 4px */ --ds-space-2: 0.5rem; /* 8px */ --ds-space-3: 0.75rem; /* 12px */ --ds-space-4: 1rem; /* 16px */ --ds-space-5: 1.5rem; /* 24px */ --ds-space-6: 2rem; /* 32px */ --ds-space-7: 3rem; /* 48px */ --ds-space-8: 4rem; /* 64px */ --ds-space-9: 6rem; /* 96px */ --ds-space-10: 8rem; /* 128px */ /* Fluid vertical section rhythm */ --ds-space-section: clamp(3rem, 1.5rem + 6vw, 8rem); /* ========================================================================== 5 · LAYOUT · container max-widths. ========================================================================== */ --ds-container-small: 720px; --ds-container-medium: 940px; --ds-container-large: 1140px; /* ========================================================================== 6 · RADIUS ========================================================================== */ --ds-radius-sm: 9px; --ds-radius-base: 14px; --ds-radius-lg: 20px; --ds-radius-pill: 100px; /* ========================================================================== 7 · SHADOW · soft, ink-tinted. Calm, never harsh. ========================================================================== */ --ds-shadow: 0 1px 2px var(--ds-color-ink-a04), 0 8px 30px var(--ds-color-ink-a06); --ds-shadow-lift: 0 2px 6px var(--ds-color-ink-a06), 0 18px 50px var(--ds-color-ink-a10); /* ========================================================================== 8 · MOTION · "authority" easing settles, never bounces. ========================================================================== */ --ds-ease-authority: cubic-bezier(0.16, 1, 0.3, 1); --ds-dur-fast: 220ms; --ds-dur: 320ms; --ds-dur-slow: 480ms; --ds-dur-narrative: 1200ms; /* constellation / hero reveal */ } /* ============================================================================ REDUCED MOTION Honour the user preference. Collapse narrative durations and pause the constellation drift. Components should gate any transform/opacity animation behind this query; tokens here provide the safe fallbacks. ============================================================================ */ @media (prefers-reduced-motion: reduce) { :root { --ds-dur-fast: 0ms; --ds-dur: 0ms; --ds-dur-slow: 0ms; --ds-dur-narrative: 0ms; } /* Author-side reminder: also set animation: none on the dot-constellation and any infinite loops; do not rely on duration:0 alone for loops. */ }