/* BAND-002347 (UI-05), BAND-002859: the design-token layer. The colours, shadows and the UI fonts come from the pinned Velanum.Brand snapshot in /brand (docs/architecture/brand.md): the two imports below load its fonts.css (Inter and JetBrains Mono) and its tokens.css, and every colour and shadow token here is an alias of a --velanum-* token, or a color-mix() of them where the brand has no role of its own (the tinted accent fills of hover and secondary actions, the focus halo, the letterbox). Brand 1.0 gave the selected fill, the scrim and the overlay layer roles of their own, so those are aliases now. A colour reads only the brand's semantic colours, the ones each of its themes defines, never its unthemed palette, which the brand keeps for its graphics (BAND-002895; Velanum.Brand guidelines/UI-THEMES.md). The type scale, the font weights and families, the radii, the focus ring and the indicator bar's width are the brand's too, by alias (BAND-002877, brand 1.0; Velanum.Brand guidelines/TOKENS.md); spacing, line heights, stacking and the shell sizes are still the app's own. This is the ONLY stylesheet that may name a --velanum-* token, use color-mix() or hold a raw scale value; every other stylesheet, inline style and script uses var(--token), and no stylesheet holds a colour literal. The snapshot's tokens.css carries both themes and follows data-theme on (js/theme.js sets it before the first paint), so an alias needs one value; only the tokens whose recipe differs per theme are redefined under :root[data-theme="dark"]; names never change. Contrast guarantees (checked by DesignTokenContrastTests against the snapshot's values in both themes) and usage rules are documented in docs/architecture/design-tokens.md. */ @import url("/brand/tokens/generated/fonts.css"); @import url("/brand/tokens/generated/tokens.css"); :root { /* Surfaces, the brand's layers: page is the canvas; surface (cards, the sticky header, inputs) is surface-raised; surface-2 (a quiet well on a card: table heads, pre, fieldsets) is the brand surface; surface-3 (hover and chip fill) is the canvas; overlay is surface-overlay. */ --color-page: var(--velanum-color-canvas); --color-surface: var(--velanum-color-surface-raised); --color-surface-2: var(--velanum-color-surface); --color-surface-3: var(--velanum-color-canvas); /* The brand's level 3: menus, popovers, dialogs and toasts. White like surface in the light theme, a lighter petrol in the dark one. No mark, lockup or eye sign stands on it (brand D-5). */ --color-overlay: var(--velanum-color-surface-overlay); /* The video letterbox stays dark in both themes. The brand has no role for it, so it takes the darkest semantic colour of each theme: the text here, the canvas in the dark theme. */ --color-media: var(--velanum-color-text); /* Text. text-muted stays AA (4.5:1) on every layer and status surface. */ --color-text: var(--velanum-color-text); --color-text-muted: var(--velanum-color-text-muted); --color-text-on-accent: var(--velanum-color-on-primary); /* The label on a danger fill (the strong destructive button): the brand's on-danger. */ --color-text-on-danger: var(--velanum-color-on-danger); /* Text on the letterbox: the alt text a cover shows when its image does not decode. The brand has no role for it either, so it takes a light semantic colour of each theme: the raised surface here, the text in the dark theme. */ --color-text-on-media: var(--velanum-color-surface-raised); /* Lines. divider/divider-strong are decorative (card edges, row separators, quiet outlines of labelled buttons; never the only cue), the brand's color-border, below 3:1 by design; border outlines interactive controls (the brand's color-border-strong, 3:1); border-strong is the hover/emphasis outline. */ --color-divider: var(--velanum-color-border); --color-divider-strong: var(--velanum-color-border); --color-border: var(--velanum-color-border-strong); --color-border-strong: var(--velanum-color-text-muted); /* Accent: the brand's primary. The subtle fills tint the layer they sit on with it: hover and secondary actions, which the brand has no role for. */ --color-accent: var(--velanum-color-primary); --color-accent-hover: var(--velanum-color-primary-hover); --color-accent-subtle: color-mix(in srgb, var(--velanum-color-primary) 10%, var(--velanum-color-surface-raised)); --color-accent-subtle-hover: color-mix(in srgb, var(--velanum-color-primary) 14%, var(--velanum-color-surface-raised)); /* Selected: the brand's fill of a selected item (the current utility, the chosen language and theme, a chosen option or tile, the open project switcher). Never the only cue: a selected item also shows a check, a weight change or an indicator bar in the accent, and in a dark menu the fill alone barely shows, so there it always has its check or its bar (brand D-11). */ --color-selected: var(--velanum-color-selected); /* Status: foreground (AA text), tinted background, and the outline, which is the foreground itself (above 3:1 on every layer and on its own tint). */ --color-success: var(--velanum-color-success); --color-success-subtle: var(--velanum-color-success-surface); --color-success-border: var(--velanum-color-success); --color-warning: var(--velanum-color-warning); --color-warning-subtle: var(--velanum-color-warning-surface); --color-warning-border: var(--velanum-color-warning); --color-danger: var(--velanum-color-danger); --color-danger-subtle: var(--velanum-color-danger-surface); --color-danger-border: var(--velanum-color-danger); --color-info: var(--velanum-color-info); --color-info-subtle: var(--velanum-color-info-surface); --color-info-border: var(--velanum-color-info); /* Focus: the keyboard ring (3:1 on every layer) and the soft halo around focused fields. */ --color-focus: var(--velanum-color-focus); --color-focus-halo: color-mix(in srgb, var(--velanum-color-focus) 20%, transparent); /* The scrim behind a modal dialog, the guide's spotlight and the project drawer: the brand's (deep petrol at 40 % in the light theme, black at 60 % in the dark one). Never under a menu, popover or toast. */ --color-scrim: var(--velanum-color-scrim); /* Elevation: the brand's three levels (each themed in the snapshot). */ --shadow-xs: var(--velanum-elevation-level-1-shadow); --shadow-sm: var(--velanum-elevation-level-1-shadow); --shadow-md: var(--velanum-elevation-level-2-shadow); --shadow-lg: var(--velanum-elevation-level-3-shadow); --shadow-spotlight: 0 0 0 9999px var(--color-scrim), var(--velanum-elevation-level-3-shadow); --shadow-focus-halo: 0 0 0 3px var(--color-focus-halo); /* The indicator bar of the current or selected item in a vertical list (the account menu), on its leading edge: border-width-2 in the accent, drawn inside the item so nothing moves. */ --shadow-indicator: inset var(--velanum-border-width-2) 0 0 var(--velanum-color-primary); /* Border widths: the brand's border-width-2 marks a state on a boundary, the indicator bar of the current or selected item (the selected station tab, the current item of the account menu). Hairlines stay 1px. */ --border-width-indicator: var(--velanum-border-width-2); /* Motion, the brand's (Velanum.Brand TOKENS.md, "motion"): short for hover and press feedback and fades, medium for a control changing state, long with the emphasized easing for something arriving (a toast), and loop for short repeating indicators (the busy spinner, indeterminate progress, the skeleton's pulse; brand 1.0). Reduced motion stops all of it (css/app.css, css/components.css). */ --motion-duration-short: var(--velanum-motion-duration-short); --motion-duration-medium: var(--velanum-motion-duration-medium); --motion-duration-long: var(--velanum-motion-duration-long); --motion-duration-loop: var(--velanum-motion-duration-loop); --motion-easing-standard: var(--velanum-motion-easing-standard); --motion-easing-emphasized: var(--velanum-motion-easing-emphasized); /* Spacing: 4px grid. */ --space-0-5: 2px; --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-2-5: 10px; --space-3: 12px; --space-3-5: 14px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-9: 36px; --space-10: 40px; --space-12: 48px; /* Radius: the brand's four (BAND-002877), each --radius- its --velanum-radius-, in the brand's roles (Velanum.Brand TOKENS.md): sm for chips, segmented options, notices and small insets; md for buttons, fields, menus and list items, and for the surfaces nested in a card (panels, fieldsets, wells, tiles) and media; lg for cards, dialogs and the Library's detail panel; pill for badges, pills and the dots and step circles, which are square boxes, where it draws the same circle as 50%. Rules: docs/architecture/design-tokens.md. */ --radius-sm: var(--velanum-radius-sm); --radius-md: var(--velanum-radius-md); --radius-lg: var(--velanum-radius-lg); --radius-pill: var(--velanum-radius-pill); /* ---- Typography (BAND-002351, UI-09; BAND-002877) --------------------------------------- The brand's type scale: its nine sizes, xs to 5xl, each --font-size- the brand's size of the same name, and its weights. Body copy is --font-size-base, the brand's md (body text and default controls), and nothing renders below xs. Secondary text, labels and buttons take sm; control and list text take md like the body. Headings step down strictly h1 > h2 > h3 > h4 on the scale and are never tracked negatively (it crowds Cyrillic). Line heights stay ratios of the size. Rules: docs/architecture/design-tokens.md, "Typography". The families are the brand's: Inter from the snapshot's fonts.css, then system fallbacks; and for codes, ids, hashes, time codes and raw data only (never prose, headings or bold), JetBrains Mono, then system monospace fonts, with ligatures off wherever it is set (Velanum.Brand TYPOGRAPHY.md, "Monospace"; brand D-1). */ --font-family-sans: var(--velanum-typography-font-family-body); --font-family-mono: var(--velanum-typography-font-family-mono); --font-size-xs: var(--velanum-typography-size-xs); /* the minimum: badges, table cells, captions, step labels */ --font-size-sm: var(--velanum-typography-size-sm); /* secondary: labels, buttons, meta lines */ --font-size-md: var(--velanum-typography-size-md); /* control and list text; the same step as base */ --font-size-lg: var(--velanum-typography-size-lg); --font-size-xl: var(--velanum-typography-size-xl); --font-size-2xl: var(--velanum-typography-size-2xl); --font-size-3xl: var(--velanum-typography-size-3xl); --font-size-4xl: var(--velanum-typography-size-4xl); --font-size-5xl: var(--velanum-typography-size-5xl); --font-size-base: var(--font-size-md); /* body copy */ /* The one h1 is the product name in the 56px top bar, on two lines on phones: 2xl fits it there. */ --font-size-h1: var(--font-size-2xl); --font-size-h2: var(--font-size-xl); --font-size-h3: var(--font-size-lg); --font-size-h4: var(--font-size-base); --line-height-none: 1; /* lines set solid: only the two-line product name in the phone top bar */ --line-height-tight: 1.2; --line-height-snug: 1.3; --line-height-normal: 1.5; --line-height-relaxed: 1.6; --line-height-loose: 1.8; --font-weight-regular: var(--velanum-typography-weight-regular); --font-weight-medium: var(--velanum-typography-weight-medium); --font-weight-semibold: var(--velanum-typography-weight-semibold); --font-weight-bold: var(--velanum-typography-weight-bold); /* ---- end of typography ---- */ /* Stacking. */ --z-base: 0; --z-raised: 1; --z-dropdown: 100; --z-sticky: 200; --z-menu: 300; /* the header while its account menu is open, over the sticky session banner */ --z-overlay: 900; --z-spotlight: 910; --z-modal: 1000; --z-toast: 1100; /* Focus ring geometry: the brand's ring, size-focus-ring wide and drawn spacing-2 outside the control. The offset is required: color-focus equals color-primary, so a ring on a primary button would merge with its fill (Velanum.Brand UI-THEMES.md). */ --focus-ring-width: var(--velanum-size-focus-ring); --focus-ring-offset: var(--velanum-spacing-2); /* BAND-002353 (UI-11): layout. A media query cannot read var(), so every width query in the stylesheets names one of these breakpoints by its value, as (width < N) or (width >= N) (ApplicationShellTests checks it), and js/app-shell.js reads them from here. sm phone | tablet: single-column forms; below it the header shows the sign and the name on two lines instead of the small lockup md the source and the export side by side; cards take their full padding lg the project panel docks beside the stage xl the brand's wide desktop (breakpoint-xl); no rule changes there since the "local, no cloud" label moved into the account menu (brand 1.0) */ --breakpoint-sm: 600px; --breakpoint-md: 1024px; --breakpoint-lg: 1280px; --breakpoint-xl: 1440px; /* The sticky header: the top bar over the station tabs, always this tall. */ --size-topbar: 56px; --size-station-nav: 44px; --size-shell-header: calc(var(--size-topbar) + var(--size-station-nav)); --size-project-panel: 380px; --size-content-max: 1800px; --size-icon: 18px; --size-control: 36px; /* The brand's touch target (44px): the account button and the rows of the account menu. */ --size-touch-target: var(--velanum-size-touch-target); } /* BAND-002348 (UI-06), BAND-002859: the dark theme. js/theme.js sets data-theme on to the resolved theme (Light, Dark, or the OS preference for System) before the first paint, and the snapshot's tokens.css switches every --velanum-* colour and shadow with it. Only the recipes that differ per theme are redefined here: the tinted accent fills sink into the canvas instead of lifting the raised layer (which would fall below 4.5:1 for the mint accent); the letterbox takes the canvas, the darkest colour of this theme (its text is light), and the text on the letterbox takes that light text. The scrim is the brand's own in each theme (brand 1.0). DesignTokenContrastTests checks both themes. */ :root[data-theme="dark"] { --color-media: var(--velanum-color-canvas); --color-text-on-media: var(--velanum-color-text); --color-accent-subtle: color-mix(in srgb, var(--velanum-color-primary) 10%, var(--velanum-color-canvas)); --color-accent-subtle-hover: color-mix(in srgb, var(--velanum-color-primary) 14%, var(--velanum-color-canvas)); }