/* Calm Intelligence design tokens (M3): the single source of raw values for the brand design system. Contract (test-enforced, tests/brand_site/test_brand_design_system.py): - Only this file may contain raw colours. Every other ci stylesheet uses var(--ci-*) and nothing else for colour, and may use only the breakpoints listed below. - Every var(--ci-*) used anywhere is defined here. - Colour pairs are contrast-checked: text >= 4.5:1, focus, control borders and marks >= 3:1. Light-first. Dark mode is not offered: it needs its own contrast verification (docs/brand/m3-design-system.md §2). Reference with purposes and examples: docs/brand/m3-design-system.md §2. */ :root { /* ---------------------------------------------------------------- colour: surfaces */ --ci-color-page: #f6f8fb; /* page background, cool off-white */ --ci-color-surface: #ffffff; /* cards, panels, header */ --ci-color-surface-sunken: #edf1f7; /* tinted sections, media wells */ --ci-color-surface-accent: #e9effb; /* active nav item, secondary hover, "direction" labels */ --ci-color-surface-technical: #e5f3f1; /* evidence and limits panels, outcome nodes */ --ci-color-surface-inverse: #0e1a2b; /* contact band */ --ci-color-surface-inverse-raised: #16263f; /* routes and hover on the band */ /* ---------------------------------------------------------------- colour: text */ --ci-color-text: #0e1a2b; /* 16.4:1 on page */ --ci-color-text-muted: #4a5568; /* 7.1:1 on page; never for essential labels below 14px */ --ci-color-text-on-action: #ffffff; /* on --ci-color-action: 6.7:1 */ --ci-color-text-inverse: #f2f6fb; /* on the band: 16.1:1 */ --ci-color-text-inverse-muted: #b5c2d6; /* on the band: 9.7:1 */ /* ---------------------------------------------------------------- colour: action and emphasis */ --ci-color-action: #1f55c4; /* primary fill, control accents; 6.3:1 on page */ --ci-color-action-strong: #1a46a3; /* hover, link text, secondary label; 8.1:1 on page */ --ci-color-action-inverse: #9dbfff; /* links and accents on the band */ --ci-color-technical: #0d6e6e; /* eyebrows, technical motif, "yes" marks; 5.7:1 on page */ /* ---------------------------------------------------------------- colour: lines and focus */ --ci-color-border-control: #7d8ba0; /* boundaries a user must perceive (inputs, menu button): 3.3:1 */ --ci-color-border: #cdd6e2; /* decorative separators only, never a control boundary */ --ci-color-border-subtle: #e1e7ef; /* card outlines and hairlines */ --ci-color-focus: #1f55c4; /* focus ring on light surfaces */ --ci-color-focus-inverse: #9dbfff; /* focus ring on the band */ /* ---------------------------------------------------------------- colour: status and honesty labels */ --ci-color-draft-bg: #fff4d9; --ci-color-draft-text: #694400; --ci-color-withheld-bg: #edf0f5; --ci-color-withheld-text: #39445a; --ci-color-direction-bg: #e9effb; --ci-color-direction-text: #1a46a3; --ci-color-mark-yes: #0d6e6e; --ci-color-mark-pending: #b0530a; --ci-color-mark-no: #7d8ba0; --ci-color-preview-bg: #0e1a2b; --ci-color-preview-text: #ffffff; --ci-color-shadow: #0e1a2b; /* only through color-mix() at low strength */ /* ---------------------------------------------------------------- typography */ --ci-font-sans: "Inter Variable", "Inter Fallback", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --ci-font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace; /* Scale: fluid clamps between 320px and about 1100px. Smallest text in use is --ci-text-label (12px). */ --ci-text-display: clamp(2.375rem, 1.6rem + 3.4vw, 4.25rem); /* hero headline, 38 to 68px (M7.4: was 60px max) */ --ci-text-h1: clamp(2rem, 1.5rem + 2.2vw, 3rem); /* page titles, 32 to 48px */ --ci-text-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); /* home sections, 28 to 40px */ --ci-text-h3: clamp(1.5rem, 1.25rem + 1vw, 2rem); /* inner sections, 24 to 32px */ --ci-text-title: 1.375rem; /* card and block titles, 22px */ --ci-text-title-sm: 1.125rem; /* tile titles, 18px */ --ci-text-lede: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); /* ledes, 17 to 20px */ --ci-text-body: 1.0625rem; /* running text, 17px */ --ci-text-body-sm: 0.9375rem; /* card text, 15px */ --ci-text-small: 0.875rem; /* meta text, 14px */ --ci-text-meta: 0.8125rem; /* eyebrows, captions, 13px */ --ci-text-label: 0.75rem; /* labels and drawing tags, 12px */ --ci-leading-display: 1.04; --ci-leading-tight: 1.15; --ci-leading-snug: 1.35; --ci-leading-body: 1.65; --ci-weight-medium: 500; --ci-weight-semibold: 600; --ci-weight-bold: 650; --ci-weight-heavy: 700; --ci-tracking-display: -0.04em; --ci-tracking-heading: -0.025em; --ci-tracking-title: -0.015em; --ci-tracking-eyebrow: 0.08em; /* ---------------------------------------------------------------- spacing (4px base) and rhythm */ --ci-space-1: 0.25rem; --ci-space-2: 0.5rem; --ci-space-3: 0.75rem; --ci-space-4: 1rem; --ci-space-5: 1.25rem; --ci-space-6: 1.5rem; --ci-space-7: 2rem; --ci-space-8: 2.5rem; --ci-space-9: 3rem; --ci-space-10: 4rem; --ci-space-section: clamp(3.5rem, 2.75rem + 3.5vw, 7rem); /* between page sections */ --ci-space-section-tight: clamp(2.5rem, 2rem + 2vw, 4rem); /* compact sections */ --ci-space-stack: clamp(1.5rem, 1.25rem + 1.25vw, 2.5rem); /* section heading to its content */ --ci-gutter: 1rem; /* page side padding: 16px, 24px from 40em */ /* ---------------------------------------------------------------- layout widths */ --ci-width-page: 74rem; /* content column */ --ci-width-reading: 42rem; /* running text, case-study body */ --ci-width-intro: 38rem; /* section introductions */ --ci-width-lede: 34rem; /* hero lede */ --ci-width-headline: 16ch; /* hero headline line length */ --ci-header-height: 4.25rem; --ci-scroll-offset: 6rem; /* scroll-padding-top: focus targets clear the sticky header */ /* ---------------------------------------------------------------- breakpoints (documentation only) Custom properties cannot be used in @media. ci stylesheets may use exactly these literal values (min-width, or max-width at value - 0.01em): 22em (352px) brand role line, 26em (416px) phone buttons, 40em (640px) two-column grids, 46em (736px) two-column hero, 52em (832px) full navigation, 64em (1024px) wide layouts. */ --ci-bp-xs: 26em; --ci-bp-sm: 40em; --ci-bp-md: 46em; --ci-bp-nav: 52em; --ci-bp-lg: 64em; /* ---------------------------------------------------------------- borders and radii */ --ci-border-width: 1px; --ci-border-width-control: 1.5px; --ci-radius-sm: 6px; /* focus outline corners, small chips */ --ci-radius-control: 12px; /* buttons, menu button, inputs */ --ci-radius-card: 14px; /* tiles, panels */ --ci-radius-panel: 24px; /* work cards, figures, portrait */ --ci-radius-band: 28px; /* contact band */ --ci-radius-pill: 999px; /* ---------------------------------------------------------------- focus and targets */ --ci-focus-width: 3px; --ci-focus-offset: 3px; --ci-target-min: 24px; /* WCAG 2.2 2.5.8 floor for any target */ --ci-target-touch: 44px; /* navigation, small buttons, tertiary links */ --ci-target-action: 48px; /* buttons, menu rows */ --ci-target-action-lg: 52px; /* hero and band buttons */ /* ---------------------------------------------------------------- elevation */ --ci-shadow-rest: 0 1px 2px color-mix(in srgb, var(--ci-color-shadow) 6%, transparent); --ci-shadow-raise: 0 22px 44px -22px color-mix(in srgb, var(--ci-color-shadow) 30%, transparent); --ci-shadow-float: 0 18px 40px -12px color-mix(in srgb, var(--ci-color-shadow) 28%, transparent); --ci-shadow-portrait: 0 1px 2px color-mix(in srgb, var(--ci-color-shadow) 10%, transparent), 0 30px 60px -28px color-mix(in srgb, var(--ci-color-shadow) 45%, transparent); --ci-shadow-action: 0 1px 2px color-mix(in srgb, var(--ci-color-shadow) 16%, transparent), 0 6px 16px -6px color-mix(in srgb, var(--ci-color-action) 55%, transparent); /* ---------------------------------------------------------------- motion */ --ci-duration-fast: 150ms; /* colour, border, arrow */ --ci-duration-base: 200ms; /* card lift, shadow */ --ci-duration-slow: 320ms; /* M5: menu panel, page cross-fade */ --ci-duration-reveal: 2200ms; /* M5 experiment only: neural identity reveal, runs once */ --ci-ease: ease; --ci-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); /* M5: entrances settle instead of stopping */ --ci-lift-card: -4px; /* M5: card hover elevation (hover-capable pointers only) */ --ci-lift-action: -1px; /* M5: primary button hover elevation */ --ci-rise: 1.25rem; /* M5: scroll-linked entrance offset (transform only, never opacity) */ /* ---------------------------------------------------------------- M5 signature texture A quiet lattice of data points behind headers and the hero portrait: radial dots, faded by a mask. Decorative only; never behind body text at a strength that changes its contrast. */ --ci-lattice-dot: color-mix(in srgb, var(--ci-color-action) 22%, transparent); --ci-lattice-size: 22px; --ci-blueprint-line: color-mix(in srgb, var(--ci-color-action) 9%, transparent); /* prototype grid, feature-space rings */ /* ---------------------------------------------------------------- media: aspect ratios and cropping */ --ci-ratio-portrait: 4 / 5; /* hero and About portrait */ --ci-ratio-avatar: 1 / 1; /* header, footer, contact avatar */ --ci-ratio-figure: 292 / 180; /* drawn project media (the shared drawing grid) */ --ci-ratio-screenshot: 16 / 10; /* approved screenshots, shown whole (contain), never cropped */ --ci-crop-portrait: 50% 22%; /* object-position that keeps the face in a cover crop */ } @media (min-width: 40em) { :root { --ci-gutter: 1.5rem; } } @media (prefers-reduced-motion: reduce) { :root { --ci-duration-fast: 0ms; --ci-duration-base: 0ms; --ci-duration-slow: 0ms; --ci-duration-reveal: 0ms; --ci-lift-card: 0px; --ci-lift-action: 0px; --ci-rise: 0px; } }