/* * CommitControl design tokens, single source of truth. * ---------------------------------------------------------------------------- * Phase 0 of the brand-system rebuild. This file DEFINES the vocabulary; it * does not restyle anything on its own. index.html and the shared sheet begin * consuming these tokens in Phase 1 onward, so a late colour, type or motion * change is a one-line edit here rather than a hunt across every page. * * Brand direction (approved): * - Dual theme. Dark is the premium first impression; light exists for * compliance and print. Backgrounds are CHARCOAL (dark) or WHITE (light). * Green is an ACCENT only, never a large fill or a section background. * - The green is sampled from the live product UI (#407860, the "Improved" * and won-value accent) so the marketing site matches the app rather than * the retired navy/blue site brand. * - Type: IBM Plex Sans (body and headings) + IBM Plex Mono (labels, * figures). Replaces Inter + JetBrains Mono. * * STRUCTURE * 1. Theme-invariant tokens (type, spacing, radii, motion, z-index) live in * :root and never change between themes. * 2. Theme-dependent COLOUR tokens are semantic names (--cc-bg, --cc-ink, * --cc-accent, ...). The dark palette is the default in :root; the light * palette overrides the SAME names under [data-theme="light"] and under * prefers-color-scheme: light when no explicit choice is set. * Components reference only the semantic names, so neither theme needs a * second rule per component. * * ACCESSIBILITY: every colour pairing is annotated with its measured WCAG * ratio against the surface it is meant for. AA is the floor (4.5:1 body text, * 3:1 large text and UI). Do not put a raw hex in a component; add or reuse a * token here so the ratio stays auditable. */ :root { /* ══ 1. THEME-INVARIANT ══════════════════════════════════════════════ */ /* ─── Typography ────────────────────────────────────────────────────── */ --cc-font-sans: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --cc-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, "Liberation Mono", monospace; /* Back-compat aliases so existing selectors resolve during migration; they now point at the new families and are removed once every page is moved. */ --font-display: var(--cc-font-sans); --font-body: var(--cc-font-sans); --font-serif: var(--cc-font-sans); --font-mono: var(--cc-font-mono); --cc-w-regular: 400; --cc-w-medium: 500; --cc-w-semibold: 600; --cc-w-bold: 700; /* Fluid scale (clamp: min / preferred / max). Base 16px, body line 1.6. */ --cc-fs-display: clamp(2.6rem, 1.6rem + 4.2vw, 4.75rem); --cc-fs-h1: clamp(2.1rem, 1.5rem + 2.6vw, 3.25rem); --cc-fs-h2: clamp(1.6rem, 1.25rem + 1.6vw, 2.35rem); --cc-fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem); --cc-fs-lead: clamp(1.05rem, 1rem + 0.35vw, 1.2rem); --cc-fs-body: 1rem; --cc-fs-sm: 0.875rem; --cc-fs-xs: 0.75rem; --cc-fs-eyebrow: 0.6875rem; --cc-track-display: -0.028em; --cc-track-head: -0.022em; --cc-track-eyebrow: 0.14em; --cc-lh-tight: 1.08; --cc-lh-head: 1.18; --cc-lh-body: 1.6; --cc-measure: 65ch; /* Named type roles (reconciled from the product DESIGN spec). The hero and headings use the fluid scale above; these fixed roles are for the product surfaces and data moments so the site reads like the app. Monetary figures and score params (alpha/beta/gamma) must use --cc-font-mono with tabular lining numbers, which is what --cc-num enforces. */ --cc-num: var(--cc-font-mono); /* all money / metrics / timestamps */ --cc-numeric: tabular-nums lining-nums; /* font-variant-numeric value */ --cc-fs-metric: clamp(1.75rem, 1.3rem + 1.6vw, 2rem); /* big KPI figure */ --cc-fs-metric-sm: 1.375rem; /* inline KPI */ --cc-fs-label-code: 0.6875rem; /* mono eyebrow / code label, +0.08em */ --cc-track-label-code: 0.08em; /* ─── Radii (kept from current system) ──────────────────────────────── */ --cc-r-sm: 8px; --cc-r-md: 12px; --cc-r-lg: 16px; --cc-r-xl: 24px; --cc-r-pill: 999px; --r-sm: var(--cc-r-sm); --r-md: var(--cc-r-md); --r-lg: var(--cc-r-lg); /* ─── Spacing (1240 container, 4px rhythm) ──────────────────────────── */ --cc-container: 1240px; --cc-gutter: 32px; --cc-space-1: 4px; --cc-space-2: 8px; --cc-space-3: 12px; --cc-space-4: 16px; --cc-space-6: 24px; --cc-space-8: 32px; --cc-space-12: 48px; --cc-space-16: 64px; --cc-space-20: 80px; --cc-space-24: 96px; --cc-section-y: clamp(64px, 5vw + 40px, 120px); /* ─── Z-index (named, not arbitrary) ────────────────────────────────── */ --cc-z-base: 1; --cc-z-raised: 10; --cc-z-nav: 50; --cc-z-overlay: 100; --cc-z-toast: 200; /* ─── Motion ────────────────────────────────────────────────────────── */ --cc-dur-fast: 150ms; --cc-dur-base: 220ms; --cc-dur-slow: 320ms; --cc-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --cc-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --cc-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --cc-hover-lift: 3px; /* Tilt-and-settle for the product region. The product rotates from a slight tilt to flat and scales down as it enters; reserved for wide screens. Angle kept modest so the frame never reads as empty while tilted. */ --cc-tilt-start: 12deg; --cc-tilt-end: 0deg; --cc-tilt-scale-start: 1.03; --cc-tilt-scale-end: 1; --cc-tilt-rise: 56px; --cc-perspective: 1600px; /* ══ 2. COLOUR, DARK THEME (default) ═════════════════════════════════ Ratios below are measured against the surface each token sits on. */ /* Surfaces: charcoal, near-neutral, slightly cool. */ --cc-bg: #14181C; /* page background */ --cc-bg-deep: #0E1113; /* deepest wells, footer */ --cc-surface: #1B2024; /* raised surface, nav blur base */ --cc-surface-2: #222A2F; /* second elevation */ --cc-surface-3: #2B343A; /* hover / pressed on surfaces */ /* Ink on --cc-bg. */ --cc-ink: #EDF1F0; /* primary text 15.67:1 AAA */ --cc-ink-soft: #C3CCCB; /* secondary text ~10.8:1 AAA */ --cc-ink-mute: #AEB8B6; /* muted / meta 8.78:1 AAA */ --cc-ink-faint: #7F8B8A; /* faint labels ~4.6:1 AA */ --cc-ink-disabled: #5C6563; /* Accent (green). An accent, never a page/section background or wash. Scale reconciled with the product DESIGN spec; every value re-measured. */ --cc-accent: #6cd3a2; /* bright text accent, positive deltas, links 9.75:1 AAA */ --cc-accent-text: #6cd3a2; /* green text and links on --cc-bg 9.75:1 AAA */ --cc-accent-mid: #539f7a; /* mid: badges, icons, secondary metrics 5.61:1 AA */ --cc-accent-fill: #2a5c43; /* solid button fill; white text 7.75:1 AAA */ --cc-accent-fill-hover: #387858; --cc-accent-on-fill: #FFFFFF; /* text on the green fill */ --cc-accent-tint: #162620; /* subtle green-tinted selected row / delta chip */ --cc-accent-rgb: 108, 211, 162; /* Status: red for risk/exposed/lost; amber for caution. From the spec. */ --cc-danger: #e05d5d; /* risk/lost text on dark 5.01:1 AA */ --cc-danger-fill: #B23B3B; --cc-danger-on-fill: #FFFFFF; --cc-danger-tint: #2a1719; --cc-amber: #e5a84b; /* caution / quota target 8.52:1 AAA */ --cc-amber-tint: #292115; /* Borders and hairlines, low contrast on purpose. */ --cc-border: #2B343A; --cc-border-soft: #232A2F; --cc-border-strong: #39444B; /* Focus ring: a bright accent ring plus a bg-coloured offset so it reads on any surface. Visible keyboard focus is required, not optional. */ --cc-focus: #6cd3a2; --cc-focus-ring: 0 0 0 2px var(--cc-bg), 0 0 0 4px var(--cc-focus); /* Elevation, tinted rather than pure black. */ --cc-shadow-sm: 0 1px 2px rgba(5, 8, 7, 0.4); --cc-shadow-md: 0 12px 32px -12px rgba(5, 8, 7, 0.6); --cc-shadow-lg: 0 32px 70px -28px rgba(5, 8, 7, 0.72); --cc-glow-accent: 0 10px 30px -8px rgba(var(--cc-accent-rgb), 0.45); /* Back-compat colour aliases (old --ink-*/--primary names). Point at the nearest semantic token so legacy selectors keep resolving mid-migration. */ --ink-900: var(--cc-ink); --ink-700: var(--cc-ink-soft); --ink-500: var(--cc-ink-mute); --ink-400: var(--cc-ink-faint); --ink-200: var(--cc-border); --ink-100: var(--cc-surface); --bg: var(--cc-bg); --surface: var(--cc-surface); --primary: var(--cc-accent); --danger: var(--cc-danger); --border: var(--cc-border); } /* ══ 2b. COLOUR, LIGHT THEME ═════════════════════════════════════════════ Overrides the same semantic names. Applied when the user explicitly picks light (data-theme="light") OR when the OS prefers light and no explicit choice is stored (:root:not([data-theme]) under the media query, below). Ratios measured against white. */ :root[data-theme="light"] { --cc-bg: #FFFFFF; --cc-bg-deep: #0E1113; /* footer stays dark charcoal in both themes */ --cc-surface: #F6F8F7; --cc-surface-2: #EEF2F0; --cc-surface-3: #E3E9E6; --cc-ink: #14181C; /* primary text on white 17.84:1 AAA */ --cc-ink-soft: #1B2430; /* secondary 15.65:1 AAA */ --cc-ink-mute: #3A454C; /* muted 9.83:1 AAA */ --cc-ink-faint: #5A6670; /* faint 5.88:1 AA */ --cc-ink-disabled: #9AA4AC; --cc-accent: #2F5E4A; /* green on white, large and UI 7.44:1 AAA */ --cc-accent-text: #2A5544; /* green text and links 8.46:1 AAA */ --cc-accent-mid: #2F5E4A; --cc-accent-fill: #2F5E4A; /* fill; white text 7.44:1 AAA */ --cc-accent-fill-hover: #27503E; --cc-accent-on-fill: #FFFFFF; --cc-accent-tint: #EAF2EE; /* subtle green-tinted surface on white */ --cc-danger: #C0392B; /* risk text on white 5.44:1 AA */ --cc-danger-fill: #B23B3B; --cc-danger-tint: #FBEAE8; --cc-amber: #B7791F; /* caution text on white 3.64:1 (large/UI) */ --cc-amber-tint: #FBF1DE; --cc-border: #E3E9E6; --cc-border-soft: #EEF2F0; --cc-border-strong: #CBD4CF; --cc-focus: #2F5E4A; --cc-focus-ring: 0 0 0 2px var(--cc-bg), 0 0 0 4px var(--cc-focus); --cc-shadow-sm: 0 1px 2px rgba(20, 24, 28, 0.06); --cc-shadow-md: 0 12px 32px -14px rgba(20, 24, 28, 0.16); --cc-shadow-lg: 0 32px 70px -30px rgba(20, 24, 28, 0.22); --cc-glow-accent: 0 10px 30px -10px rgba(var(--cc-accent-rgb), 0.28); } /* OS preference drives the theme only when the visitor has not chosen one. An explicit [data-theme] wins because it is a more specific selector. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-theme="light"]) { --cc-bg: #FFFFFF; --cc-bg-deep: #0E1113; --cc-surface: #F6F8F7; --cc-surface-2: #EEF2F0; --cc-surface-3: #E3E9E6; --cc-ink: #14181C; --cc-ink-soft: #1B2430; --cc-ink-mute: #3A454C; --cc-ink-faint: #5A6670; --cc-ink-disabled: #9AA4AC; --cc-accent: #2F5E4A; --cc-accent-text: #2A5544; --cc-accent-mid: #2F5E4A; --cc-accent-fill: #2F5E4A; --cc-accent-fill-hover: #27503E; --cc-accent-tint: #EAF2EE; --cc-danger: #C0392B; --cc-danger-tint: #FBEAE8; --cc-amber: #B7791F; --cc-amber-tint: #FBF1DE; --cc-border: #E3E9E6; --cc-border-soft: #EEF2F0; --cc-border-strong: #CBD4CF; --cc-focus: #2F5E4A; --cc-shadow-sm: 0 1px 2px rgba(20, 24, 28, 0.06); --cc-shadow-md: 0 12px 32px -14px rgba(20, 24, 28, 0.16); --cc-shadow-lg: 0 32px 70px -30px rgba(20, 24, 28, 0.22); --cc-glow-accent: 0 10px 30px -10px rgba(var(--cc-accent-rgb), 0.28); } } /* ══ 3. REDUCED MOTION ═══════════════════════════════════════════════════ Collapse the tilt to its final resting state and neutralise durations, so the product shows flat and legible and every section renders in its final position. */ @media (prefers-reduced-motion: reduce) { :root { --cc-tilt-start: 0deg; --cc-tilt-scale-start: 1; --cc-tilt-rise: 0px; --cc-dur-fast: 0.01ms; --cc-dur-base: 0.01ms; --cc-dur-slow: 0.01ms; } }