/* The theme: Basecoat's variables (shadcn/ui's names) set to our values, and the ones the reports need that shadcn does not name. Everything colour, size, space or motion is a token here; components and pages only refer to them. In a shadcn build these go in globals.css (@theme and :root). The colours are the default direction, Cobalt; css/theme-petrol.css and css/theme-aubergine.css redefine only the colour (and radius) tokens and are loaded by the Prototype controls' Theme choice (core.js), not by default. Light only: no dark values are defined (decision of the design pass; Basecoat's own dark values are not used). */ /* Geist Sans, shadcn's default typeface, shipped with the prototype (vendor/geist, SIL OFL), so every machine draws the same letters and the same tabular figures. */ @font-face { font-family: "Geist"; src: url("../vendor/geist/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* ---------- colour: Cobalt ---------- Neutrals are tinted toward the accent's hue (262). The page is a shade darker than the cards and popovers, and the sidebar a shade darker again, so regions read as regions. One accent (--primary) marks the main action, where you are, links, selected things, focus and the current series in charts; it is never used for meaning. */ --background: oklch(0.968 0.007 262); --foreground: oklch(0.22 0.03 265); --card: oklch(0.995 0.002 262); --card-foreground: var(--foreground); --popover: var(--card); --popover-foreground: var(--foreground); --primary: oklch(0.5 0.2 262); --primary-foreground: oklch(0.985 0.005 262); --primary-hover: oklch(0.43 0.19 262); --secondary: oklch(0.945 0.01 262); --secondary-foreground: var(--foreground); --muted: oklch(0.952 0.008 262); /* QUA-01's 4.5:1 on every tinted ground it is drawn on (muted, selected, the meaning surfaces, the sidebar). */ --muted-foreground: oklch(0.47 0.025 262); /* Hover ground of menus, ghost and outline buttons (shadcn's "accent"; our accent colour is --primary). */ --accent: oklch(0.94 0.014 262); --accent-foreground: var(--foreground); --border: oklch(0.9 0.011 262); /* Field, checkbox and switch boundaries: 3:1 against the card (WCAG 1.4.11). */ --input: oklch(0.63 0.025 262); /* QUA-01: Basecoat draws the ring at half strength (ring/50, 3 px) round fields and buttons; this deep accent keeps that at 3:1 or more on the card, the page and the sidebar, and the full-strength outline elsewhere far above. */ --ring: oklch(0.29 0.14 262); /* The ring as the page draws it, for what floats over a part that redefines --ring (the sidebar's menu). */ --page-ring: var(--ring); --radius: 0.625rem; --link: oklch(0.46 0.19 262); /* A chosen thing: a selected choice card, tree row, table row, week, pressed toggle, the current step. */ --selected: oklch(0.94 0.035 262); --selected-border: var(--primary); /* A chosen week's days outside its month: quieter than its own, still 4.5:1 on the accent. */ --week-outside-chosen: color-mix(in oklab, var(--primary-foreground) 82%, var(--primary)); --sidebar: oklch(0.936 0.014 262); --sidebar-foreground: var(--foreground); --sidebar-muted-foreground: oklch(0.45 0.025 262); --sidebar-primary: var(--primary); --sidebar-primary-foreground: var(--primary-foreground); --sidebar-accent: oklch(0.905 0.022 262); --sidebar-accent-foreground: var(--foreground); /* The current page's link: a raised pill in the accent. */ --sidebar-active: var(--card); --sidebar-active-foreground: var(--link); --sidebar-border: oklch(0.895 0.014 262); --sidebar-ring: var(--ring); /* Meaning. Direction of a change is also shown by an arrow, never by colour alone. The same in every theme. */ --success: oklch(0.49 0.14 150); --success-surface: oklch(0.955 0.04 156); --warning: oklch(0.54 0.16 49); --warning-surface: oklch(0.958 0.055 92); --destructive: oklch(0.55 0.23 27.3); --destructive-text: oklch(0.5 0.2 27.5); --destructive-surface: oklch(0.945 0.03 18); /* Information is not a meaning of its own: it takes the accent. */ --info: var(--link); --info-surface: oklch(0.95 0.025 262); --trend-up: var(--success); --trend-down: var(--destructive-text); /* Charts: the current series is the accent, the comparison a tinted neutral (hatched or dashed as well), gains and losses the up and down colours a little lighter (bars, not text), groups the accent, an ink and one companion. */ --chart-current: var(--primary); --chart-current-soft: oklch(0.8 0.08 262); --chart-comparison: oklch(0.76 0.015 262); --chart-positive: oklch(0.6 0.13 152); --chart-negative: oklch(0.6 0.19 27); --chart-muted: oklch(0.6 0.03 262); --chart-group-1: var(--primary); --chart-group-2: oklch(0.4 0.04 262); --chart-group-3: oklch(0.6 0.11 200); --chart-1: oklch(0.82 0.07 262); --chart-2: oklch(0.68 0.14 262); --chart-3: var(--primary); --chart-4: oklch(0.42 0.17 262); --chart-5: oklch(0.34 0.13 262); /* Elevation and overlays, tinted like the neutrals. */ --shadow-color: oklch(0.3 0.04 262 / 0.1); --shadow-raised: 0 1px 2px var(--shadow-color), 0 4px 12px var(--shadow-color); --shadow-floating: 0 12px 32px oklch(0.25 0.04 262 / 0.18); --scrim: oklch(0.2 0.03 262 / 0.5); /* Masks, not colours: a CSS mask reads alpha (--mask-opaque is fully shown); an SVG mask reads luminance (--mask-show shows, --mask-hide hides). */ --mask-opaque: #000; --mask-show: #fff; --mask-hide: #000; /* ---------- type ---------- Basecoat's font stack ends with colour-emoji fonts, which draw ▶ ▲ ▼ ⓘ as emoji wherever the text font lacks them; the reports use these glyphs as text. Geist has them. */ --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif; /* The scale, largest first: a report's headline figures lead, then the page title, section headings, body, labels. Report pages are tables of numbers, so body text is 14 px. */ --text-figure: 2rem; --text-title: 1.75rem; --text-figure-sm: 1.375rem; --text-section: 1.125rem; --text-body: 0.875rem; --text-label: 0.75rem; --text-micro: 0.6875rem; /* The small "i" of definition and dash markers. */ --text-marker: 0.625rem; --tracking-figure: -0.035em; --tracking-title: -0.025em; /* Small caps-like section labels (the Selections band, the gallery's index). */ --tracking-label: 0.04em; --app-font-size: var(--text-body); /* The library's drawings, in the drawing's own units (they scale with it). */ --art-caption: 6px; --art-label: 7.5px; --art-body: 9px; --art-title: 11px; --art-figure: 15px; /* ---------- space ---------- Tight inside a group, wider between blocks, clearly wider between sections. */ --space-group: 0.5rem; --space-block: 1rem; --space-section: 2rem; --page-gutter: 1.75rem; --table-row-height: 2.25rem; --table-cell-padding: 0.5rem; /* Coarse pointers (tablets) get 44 px targets (WCAG 2.5.5), components.css. */ --touch-target: 2.75rem; /* Page grids change at two widths of the main column (@container main, frame.css), not of the window: 56rem, under which side columns stack (the main column of a 1024 px window with the sidebar, or a 768 px one without), and 36rem. One drawing also changes at 64rem: the measure tree, a fixed canvas, is drawn at 90% between 56rem and 64rem (out-performance.css, runs.css). Container queries cannot read variables, so the page CSS writes these numbers out. */ /* The bar that replaces the sidebar in a narrow window (frame.css). */ --app-topbar-height: 3.25rem; /* Where sticky headers and bars stick: at the top, or under the top bar while it shows (frame.css). */ --sticky-top: 0px; /* How far the edge of an area that scrolls sideways fades out while it has more (components.css). */ --scroll-fade: 2.5rem; /* ---------- motion ---------- Short and decelerating; transform and opacity only for anything that moves. prefers-reduced-motion turns it off (base.css). */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --duration-hover: 120ms; --duration-enter: 160ms; --duration-status: 320ms; } @media (width < 64rem) { :root { --sticky-top: var(--app-topbar-height); } }