@charset "UTF-8"; /* ===================================================================== COLOUR TOKENS: davidflitcroft.com Mirrors the Figma file "01.01.00-system_library-davidflitcroft.com" (page "system_tokens-library"): same names, same values. Two layers: 1. Primitives (--color-): the raw palette. Don't use these directly in components; they never change between themes. 2. Theme tokens (--color-background-*, --color-text-*, ...): what the CSS uses. Each points at a primitive, and the dark theme points it at the direct inverse step of the scale. Exception: the primary-elements tokens (illustration) go to the exact photographic negative (--color-grey-negative-*) instead. DARK MODE IS LIVE (2026-11-09): the light/dark toggle in the secondary header (js/ui-prefs.js) sets and remembers the choice. UI follows the theme; image containers never do. See css/ui-prefs.css for the dark UI artwork and the parts that are pinned light. ===================================================================== */ :root { /* Logo overlays: square root of the max rendered AREA. 64px = 4,096px^2 (see .logo-overlay in component-layout.css). */ --logo-max-side: 64px; /* Buttons (Figma: Primary button). 40px / 16px on desktop, 32px / 12px on mobile, on the same slope as the small-copy font-size clamp. */ --btn-height: clamp(2rem, calc(0.826 * var(--vw)) + 1.834rem, 2.5rem); --btn-padding-x: clamp(0.75rem, calc(0.413 * var(--vw)) + 0.667rem, 1rem); /* ---- Dimension tokens (Figma: "Dimensions" collection, modes Desktop = max-clamp end / Mobile = min-clamp end) ---- */ /* Spacing blocks (.space-N) */ --space-4: clamp(3px, calc(0.22 * var(--vw)) + 2.29px, 4px); --space-8: clamp(6px, calc(0.42 * var(--vw)) + 4.66px, 8px); --space-16: clamp(12px, calc(0.83 * var(--vw)) + 9.34px, 16px); --space-24: clamp(19px, calc(1.25 * var(--vw)) + 15px, 24px); --space-32: clamp(25px, calc(1.67 * var(--vw)) + 19.67px, 32px); --space-40: clamp(31px, calc(2.08 * var(--vw)) + 24.34px, 40px); --space-48: clamp(37px, calc(2.5 * var(--vw)) + 29px, 48px); --space-56: clamp(44px, calc(2.92 * var(--vw)) + 34.67px, 56px); --space-64: clamp(50px, calc(3.33 * var(--vw)) + 39.34px, 64px); --space-72: clamp(56px, calc(3.75 * var(--vw)) + 44px, 72px); --space-80: clamp(62px, calc(4.17 * var(--vw)) + 48.67px, 80px); --space-120: clamp(93px, calc(6.25 * var(--vw)) + 73px, 120px); --space-160: clamp(124px, calc(8.33 * var(--vw)) + 97.34px, 160px); /* Layout */ --section-padding: clamp(8px, calc(2.5 * var(--vw)), 32px); /* .section-container edge */ --printer-marks-padding: clamp(16px, calc(1.25 * var(--vw)) + 12px, 28px); --content-padding: clamp(24px, calc(6 * var(--vw)), 48px); --nav-height: 80px; --layout-max-width: 1920px; /* KV node: the diameter of one round node in every Google Summits KV (key visual), site-wide. Base = the Security KV's scale: 3.7% of a full-width module's width, i.e. the viewport (capped at the layout max) minus the section + printer-mark padding each side, so it tracks the layout at every width. KVs are sized as "N nodes wide" off this (see the KV NODE SCALE block in film-and-animation.css). */ --kv-node: calc((min(calc(100 * var(--vw)), 1920px) - 2 * (var(--section-padding) + var(--printer-marks-padding))) * 0.037); /* Shape */ --radius-pill: 9999px; --stroke-thin: 1px; /* 1px everywhere since v2.35 (Figma note 354:52463): the UI strokes match the fine line work in the case-study visuals. --stroke-bold is kept as a name so existing rules still resolve. */ --stroke-bold: 1px; /* ---- Motion tokens (Figma: "Motion") ---- */ --duration-fast: 0.15s; /* fades: sequence canvases, svg wraps */ --duration-base: 0.4s; /* buttons, fills, underlines */ --duration-slow: 0.6s; /* links, menu items */ --easing-default: ease; /* ---- Breakpoints (Figma: "Breakpoints"), reference only: custom properties can't be used inside @media, so the queries keep the literal values. ---- */ --bp-stack: 1024px; /* 50/50 + 30/70 modules stack to one column */ --bp-full-width: 1080px; /* full-width images switch to 1:1 */ --bp-nav-compact: 418px; /* nav gap stops shrinking */ --bp-fluid-min: 322px; /* fluid type reaches its min-clamp size */ --bp-fluid-max: 1290px; /* fluid type reaches its max-clamp size */ /* ---- Primitives ---- */ --color-grey-neutral-000: #FFFFFF; --color-grey-neutral-050: #F8F8F8; --color-grey-neutral-100: #F5F5F5; --color-grey-neutral-200: #EBEBEB; --color-grey-neutral-300: #D6D6D6; --color-grey-neutral-400: #ADADAD; --color-grey-neutral-500: #858585; --color-grey-neutral-600: #5C5C5C; --color-grey-neutral-700: #333333; --color-grey-neutral-800: #0A0A0A; --color-grey-neutral-900: #000000; --color-grey-negative-000: #000000; --color-grey-negative-050: #070707; --color-grey-negative-100: #0A0A0A; --color-grey-negative-200: #141414; --color-grey-negative-300: #292929; --color-grey-negative-400: #525252; --color-grey-negative-500: #7A7A7A; --color-grey-negative-600: #A3A3A3; --color-grey-negative-700: #CCCCCC; --color-grey-negative-800: #F5F5F5; --color-grey-negative-900: #FFFFFF; --color-black-05: rgba(0, 0, 0, 0.05); --color-black-10: rgba(0, 0, 0, 0.1); --color-black-20: rgba(0, 0, 0, 0.2); --color-black-30: rgba(0, 0, 0, 0.3); --color-black-40: rgba(0, 0, 0, 0.4); --color-black-50: rgba(0, 0, 0, 0.5); --color-black-60: rgba(0, 0, 0, 0.6); --color-black-70: rgba(0, 0, 0, 0.7); --color-black-80: rgba(0, 0, 0, 0.8); --color-black-90: rgba(0, 0, 0, 0.9); --color-white-05: rgba(255, 255, 255, 0.05); --color-white-10: rgba(255, 255, 255, 0.1); --color-white-20: rgba(255, 255, 255, 0.2); --color-white-30: rgba(255, 255, 255, 0.3); --color-white-40: rgba(255, 255, 255, 0.4); --color-white-50: rgba(255, 255, 255, 0.5); --color-white-60: rgba(255, 255, 255, 0.6); --color-white-70: rgba(255, 255, 255, 0.7); --color-white-80: rgba(255, 255, 255, 0.8); --color-white-90: rgba(255, 255, 255, 0.9); --color-positive-100: #CCF0D3; --color-positive-200: #99E0A6; --color-positive-300: #00B221; --color-positive-400: #33C14D; --color-positive-500: #1ABA37; --color-positive-600: #00A01E; --color-positive-700: #008E1A; --color-positive-800: #006B14; --color-positive-900: #00470D; --color-positive-1000: #002407; --color-critical-100: #FAE3CC; --color-critical-200: #F5C799; --color-critical-300: #EFAB66; --color-critical-400: #EA8F33; --color-critical-500: #E8811A; --color-critical-600: #CE6800; --color-critical-700: #B75C00; --color-critical-800: #894500; --color-critical-900: #5C2E00; --color-critical-1000: #2E1700; --color-negative-100: #FACCCC; --color-negative-200: #F59999; --color-negative-300: #EF6666; --color-negative-400: #EA3333; --color-negative-500: #E81A1A; --color-negative-600: #CE0000; --color-negative-700: #B70000; --color-negative-800: #890000; --color-negative-900: #5C0000; --color-negative-1000: #2E0000; --color-informative-100: #CCE2F5; --color-informative-200: #99C6EB; --color-informative-300: #66A9E0; --color-informative-400: #338DD6; --color-informative-500: #1A7ED1; --color-informative-600: #0065B8; --color-informative-700: #005AA3; --color-informative-800: #00437A; --color-informative-900: #002D52; --color-informative-1000: #001629; /* ---- Theme tokens: light (default) ---- */ --color-background-page: var(--color-grey-neutral-000); --color-background-surface: var(--color-grey-neutral-050); --color-background-surface-raised: var(--color-grey-neutral-000); --color-background-subtle: var(--color-grey-neutral-200); --color-background-muted: var(--color-grey-neutral-300); --color-background-inverse: var(--color-grey-neutral-700); --color-background-inverse-hover: var(--color-grey-neutral-600); --color-text-primary: var(--color-grey-neutral-700); --color-text-secondary: var(--color-grey-neutral-500); --color-text-inverse: var(--color-grey-neutral-000); --color-border-strong: var(--color-grey-neutral-700); --color-border-default: var(--color-grey-neutral-300); --color-border-subtle: var(--color-grey-neutral-200); --color-overlay-scrim: var(--color-black-50); --color-overlay-tint: var(--color-black-05); --color-status-positive: var(--color-positive-500); --color-status-positive-subtle: var(--color-positive-100); --color-status-positive-text: var(--color-positive-800); --color-status-critical: var(--color-critical-500); --color-status-critical-subtle: var(--color-critical-100); --color-status-critical-text: var(--color-critical-700); --color-status-negative: var(--color-negative-500); --color-status-negative-subtle: var(--color-negative-100); --color-status-negative-text: var(--color-negative-600); --color-status-informative: var(--color-informative-500); --color-status-informative-subtle: var(--color-informative-100); --color-status-informative-text: var(--color-informative-600); --color-primary-elements-000: var(--color-grey-neutral-000); --color-primary-elements-050: var(--color-grey-neutral-050); --color-primary-elements-100: var(--color-grey-neutral-100); --color-primary-elements-200: var(--color-grey-neutral-200); --color-primary-elements-300: var(--color-grey-neutral-300); --color-primary-elements-400: var(--color-grey-neutral-400); --color-primary-elements-500: var(--color-grey-neutral-500); --color-primary-elements-600: var(--color-grey-neutral-600); --color-primary-elements-700: var(--color-grey-neutral-700); --color-primary-elements-800: var(--color-grey-neutral-800); --color-primary-elements-900: var(--color-grey-neutral-900); } /* ---- Theme tokens: dark (direct inverse; switched on by js/ui-prefs.js) ---- */ [data-theme="dark"] { color-scheme: dark; --color-background-page: var(--color-grey-neutral-900); /* exact inverse of the light surface (#F8F8F8 is 7 below white, so #070707 is 7 above black): the module panels sit the same step in from the page in both themes */ --color-background-surface: var(--color-grey-negative-050); --color-background-surface-raised: var(--color-grey-neutral-900); --color-background-subtle: var(--color-grey-neutral-600); --color-background-muted: var(--color-grey-neutral-500); --color-background-inverse: var(--color-grey-neutral-100); --color-background-inverse-hover: var(--color-grey-neutral-200); --color-text-primary: var(--color-grey-neutral-100); --color-text-secondary: var(--color-grey-neutral-300); --color-text-inverse: var(--color-grey-neutral-900); --color-border-strong: var(--color-grey-neutral-100); --color-border-default: var(--color-grey-neutral-500); --color-border-subtle: var(--color-grey-neutral-600); --color-overlay-scrim: var(--color-white-50); --color-overlay-tint: var(--color-white-05); --color-status-positive: var(--color-positive-600); --color-status-positive-subtle: var(--color-positive-1000); --color-status-positive-text: var(--color-positive-300); --color-status-critical: var(--color-critical-600); --color-status-critical-subtle: var(--color-critical-1000); --color-status-critical-text: var(--color-critical-400); --color-status-negative: var(--color-negative-600); --color-status-negative-subtle: var(--color-negative-1000); --color-status-negative-text: var(--color-negative-500); --color-status-informative: var(--color-informative-600); --color-status-informative-subtle: var(--color-informative-1000); --color-status-informative-text: var(--color-informative-500); --color-primary-elements-000: var(--color-grey-negative-000); --color-primary-elements-050: var(--color-grey-negative-050); --color-primary-elements-100: var(--color-grey-negative-100); --color-primary-elements-200: var(--color-grey-negative-200); --color-primary-elements-300: var(--color-grey-negative-300); --color-primary-elements-400: var(--color-grey-negative-400); --color-primary-elements-500: var(--color-grey-negative-500); --color-primary-elements-600: var(--color-grey-negative-600); --color-primary-elements-700: var(--color-grey-negative-700); --color-primary-elements-800: var(--color-grey-negative-800); --color-primary-elements-900: var(--color-grey-negative-900); }