/* ============================================================ Trellis — design tokens. Single source of truth. Brand direction: the Trellis member of the Branch family (2026-07-12) — same warm paper canvas and Branch UI physics as Sceneline, carrying the Trellis ENGINE INDIGO accent (#6167E9, chosen by Boek: the AI-generation identity; the color returns in the Branch Engine mark). Trellis leans on its semantic STATUS colors for day-to-day communication — the accent stays scarce, only on decisions. This file is a copy of the Sceneline reference (sceneline/static/css/tokens.css) with ONLY the brand block swapped, per the swap procedure below. The legacy Trellis variable names (tokens-v2 vocabulary: --bg-primary, --border-color, --color-primary, ...) are mapped onto these tokens in tokens-v2.css, which now acts as the alias layer. Change a value here and everything follows. No other file may hardcode a color, radius, font stack, or duration that exists here as a token. ARCHITECTURE — two blocks, one physics: Each theme scope below is split into a BRAND BLOCK and a SYSTEM BLOCK. The BRAND BLOCK holds everything that carries the product's identity: the accent family (fills, ink, wash, gradient, glows), the entity-tag tints, selection + focus halo, the warm canvas tint, and the danger tints. The SYSTEM BLOCK holds the Branch UI physics — surfaces, ink, glass, elevation, type, spacing, radii, motion — identical across every Branch product. Swap procedure for a new platform: copy this file, replace ONLY the BRAND BLOCK in both theme scopes (:root and the dark companion) with the new product's colors, and leave the SYSTEM BLOCK untouched. Everything downstream follows. Never fork a system token per platform. Type: Archivo (display + UI, variable 100–900) and Fragment Mono (technical labels). Archivo loads via Google Fonts in base.html for now. Accent usage rule (the brand's one law): the engine indigo appears only on things that ask for or mark a decision — primary actions, active states, AI/generator affordances. Never as ambient decoration. Trellis' status colors (green / orange / red / blue, defined in tokens-v2.css) stay the semantic voice for node & approval state; they are NOT accent. Two tiers, because a mid indigo cannot be BOTH a legible text color and a legible fill: --accent (#6167E9) is the FILL and active tone and always carries white --on-accent (4.5:1); --accent-ink (#4348B5) is the readable accent TEXT tone on the paper (6.5:1). ============================================================ */ :root { /* ================================================ BRAND BLOCK — what changes per product. Trellis: the engine indigo family. ================================================ */ /* ---- Color: accent (engine indigo) ---- --accent is the FILL tone (buttons, active, AI affordances). Text ON an indigo fill is WHITE (--on-accent). --accent-ink is the readable accent TEXT tone on the paper. The fill leans on --accent-mark (the deeper indigo) at the base of the gradient. */ --accent: #6167E9; /* fills: buttons, active */ --accent-ink: #4348B5; /* accent text, hover */ --accent-mark: #5157D6; /* the stamp/underline, never body text */ --accent-wash: rgba(138, 143, 240, 0.32); /* tinted backgrounds */ --on-accent: #FFFFFF; /* white text on --accent fills */ /* ---- Accent button: the candy pill recipe, in indigo ---- Light wash top → indigo base, carrying WHITE text. Soft, bright pill; hover presses IN (translateY(1.5px) scale(.985) + --shadow-accent-press). */ --accent-grad: linear-gradient(180deg, #8A8FF0, #6167E9); --shadow-accent: 0 6px 16px -6px rgba(58, 63, 160, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5); --shadow-accent-press: inset 0 3px 8px rgba(58, 63, 160, 0.32), inset 0 -1px 2px rgba(255, 255, 255, 0.4); /* ---- Color: entity tags ---- Kept for system parity (Sceneline uses these for @Character / @Location). Trellis has no entity tags today; if one appears, the "character" pair is the accent-tinted chip, "location" the neutral chip. */ --tag-character-bg: rgba(138, 143, 240, 0.34); --tag-character-text: #3A3FA8; --tag-location-bg: #EAE6E0; --tag-location-text: #5B585C; /* ---- Selection + focus halo: the accent's fingerprints ---- */ --selection-bg: #C7C9F8; --focus-halo: 0 0 0 3px rgba(97, 103, 233, 0.22); /* input focus: accent border + this halo */ /* ---- Canvas: the warm paper tint is brand ---- The Branch family's warm paper (shared with Sceneline); every raised surface is WHITE on top of it. Boundaries come from that warm-vs-white step plus drop shadows — never grey fills, never outlines. */ --bg-app: #F3F0EC; /* canvas: warm paper */ /* ---- Danger family — semantic, but the tints may differ per brand; that is why it lives in the brand block. ---- */ --danger: #C0392B; /* alert red, kept distinct from the indigo accent */ /* Danger button: the same pill, in red. Solid gradient fill, white text, for terminal actions (Sign out, delete). Same lift + press-in as the accent pill. */ --danger-grad: linear-gradient(180deg, #D9564A, #C0392B); --shadow-danger: 0 6px 16px -6px rgba(150, 40, 30, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35); --shadow-danger-press: inset 0 3px 8px rgba(120, 30, 22, 0.4), inset 0 -1px 2px rgba(255, 255, 255, 0.25); /* ================================================ SYSTEM BLOCK — the Branch UI physics. Identical across products. Do not fork per platform. ================================================ */ /* ---- Color: surfaces (soft paper, WHITE panes) ---- ONE canvas, ONE raised-white, ONE inset — kept in a tight near-neutral family so the app reads as a single surface, not a patchwork of tones. */ --bg-panel: #FFFFFF; /* every raised surface: white */ --bg-inset: #ECE8E2; /* wells/fields: a warm step below BOTH canvas and white, so sunken reads sunken everywhere */ --row-alt: rgba(236, 232, 226, 0.45); /* zebra wash on white sheets: the warm-vs-white step at a whisper, so table rows read without grey fills/outlines */ --bg-scrim: rgba(28, 26, 28, 0.45); /* overlays, lightbox */ --bg-glass: rgba(255, 255, 255, 0.72); /* blurred chrome strips */ --hover-glass: rgba(0, 0, 0, 0.035); /* faint ink wash on hover */ --panel-glass: rgba(255, 255, 255, 0.78); /* floating panels (sidebar, menus): frosted white — low enough to actually read as glass when content is behind */ /* dot-grid canvas: texture for the frost to blur. Warm ink, same base as the shadow/scrim family. */ --dot-ink: rgba(28, 26, 28, 0.10); --dot-gap: 22px; /* ---- Color: ink (neutral dark + greys) ---- */ --text-primary: #1C1C1E; /* ink */ --text-secondary: #5A585B; /* slate, does the talking */ --text-faint: #8D8B8E; /* ash: labels, disabled */ /* Borders retired: separation comes from shadow, not outlines. These resolve to transparent so every `border: 1px solid var(--line)` / `var(--border-color)` in the components simply vanishes, while the accent focus border (which sets its own color) still shows. */ --line: transparent; /* was a hairline */ --line-strong: transparent; /* was a hover border */ /* ---- Glass: the hero pane recipe, exact ---- background gradient + hairline border + blur + inset bevel. Used by popups, the login card, floating chrome. */ --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.42)); --glass-border: transparent; /* retired — see --line */ --glass-blur: blur(26px) saturate(1.5); /* the website pane, exact */ /* What a DIALOG does to the page behind it. Distinct from --glass-blur, which is the pane's own material: this is the backdrop, and it only ever needs to push the page back far enough to stop competing for attention. The image viewer already did this at 12px and was the only overlay that did — every other dialog sat on a flat scrim or nothing at all. Now it is one token, applied to every dialog, at half that strength (Boek 2026-07-26: "dat zou ik bij alle pop-ups willen, maar de blur mag 50% minder"). */ --overlay-blur: blur(6px); --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(0, 0, 0, 0.04); /* ---- Glass pane details (cards wear the full recipe) ---- */ --glass-rim: rgba(255, 255, 255, 0.8); /* the pane's 1px light edge */ --glass-bevel: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(20, 19, 16, 0.04); /* Imagery tucked straight into its card as a whisper-recessed well: a hair darker, with a super-subtle inner shadow. */ --image-inset-bg: rgba(20, 19, 16, 0.03); --image-inset-shadow: inset 0 1px 3px rgba(20, 19, 16, 0.08); /* ---- Veil: blur+tint backdrop for transient pickers/flyouts ---- Sits UNDER a floating picker, over the whole page: softens the content behind and — in the light colorway — LIGHTENS it (warm paper at just over half strength), so the floating layer owns the moment without a heavy lightbox scrim. A veil is atmosphere, not a click-catcher: it always rides with pointer-events: none and fades in/out with its picker. */ --veil-bg: rgba(246, 244, 241, 0.55); --veil-blur: blur(10px); /* ---- Elevation for the white-on-white system ---- --shadow-soft: the super-subtle lift that tells a white card from the canvas. --shadow-field: the sunken-input inset that replaces an input's border. */ --shadow-soft: 0 1px 2px rgba(30, 26, 30, 0.04), 0 4px 10px -4px rgba(30, 26, 30, 0.06); --shadow-field: inset 0 1px 2px rgba(30, 26, 30, 0.06); /* ---- Quiet button: the QUIET button — white twin of the accent pill ---- A whisper of a white gradient + a crisper lift than --shadow-soft, so a secondary action reads as PRESSABLE instead of wearing the exact same flat-white skin as a card. Hover presses IN, like the accent. */ --btn-grad: linear-gradient(180deg, #FFFFFF, #F5F4F3); --shadow-btn: 0 1px 2px rgba(30, 26, 30, 0.08), 0 3px 8px -2px rgba(30, 26, 30, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.9); --shadow-btn-press: inset 0 2px 5px rgba(30, 26, 30, 0.10); /* ---- Toggle: physical switch look (no outline, soft shadow) ---- */ --toggle-track: var(--bg-inset); --toggle-track-inset: inset 0 1px 2px rgba(0, 0, 0, 0.07); --toggle-knob-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 1px 1px rgba(0, 0, 0, 0.06); /* Raised knob / active-segment fill. White reads as a clean step ABOVE the warm --toggle-track (#ECE8E2) — the classic Branch switch look. Consumed by the Dev/Ops/Client switch, the theme switch, range thumbs, and the mini segmented column pill. Per-theme (see dark colorway). */ --toggle-indicator-bg: #FFFFFF; /* ---- Color: feedback (system-wide semantics) ---- */ --success: #2D8056; --focus-ring: #1C1C1E; /* warm ink outlines */ /* ---- Type: families ---- */ --font-display: 'Archivo', -apple-system, 'Segoe UI', sans-serif; --font-ui: 'Archivo', -apple-system, 'Segoe UI', sans-serif; --font-mono: 'Fragment Mono', 'Consolas', monospace; /* ---- Type: one clamp-based scale ---- */ --type-display: clamp(44px, 7.5vw, 96px); /* hero statements */ --type-title: clamp(28px, 4vw, 44px); /* section headings */ --type-heading: clamp(20px, 2.4vw, 26px); /* sub-heads, cards */ --type-body-lg: clamp(17px, 1.8vw, 20px); /* standfirst copy */ --type-body: 16px; --type-small: 13px; /* UI chrome */ --type-micro: 11px; /* small labels */ /* ---- Type: weights (Archivo variable axis) ---- */ --weight-display: 400; --weight-heading: 600; --weight-medium: 500; --weight-body: 400; /* ---- Spacing: one rhythm ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px; --space-section: clamp(64px, 11vw, 140px); /* between site sections */ --content-width: 1080px; /* ---- Radii: the hero's exact steps ---- 26px panes, 16px inner imagery, 14px form fields, pills for buttons/chips. --radius-soft covers the small in-between chrome (menus, bubbles, hover tiles). */ --radius-sheet: 26px; /* panels, popups — the hero pane */ --radius-media: 16px; /* imagery inside a pane */ --radius-field: 14px; /* form inputs — the hero form */ --radius-soft: 10px; /* small cards, bubbles, menus */ --radius-pill: 999px; /* buttons, chips, tags */ /* ---- Elevation: barely-there, warm-toned ---- */ --shadow-raised: 0 1px 3px rgba(40, 24, 30, 0.05), 0 4px 12px -6px rgba(40, 24, 30, 0.10); --shadow-floating: 0 26px 64px -30px rgba(40, 24, 30, 0.28); /* the hero's --sh-3, exact */ --shadow-rail: 6px 0 22px -14px rgba(40, 24, 30, 0.14), 0 14px 40px -30px rgba(40, 24, 30, 0.18); /* floating nav rail: a quiet cast to the right — present, never loud */ /* ---- Motion: ease-out only, never ease-in ---- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-boot: cubic-bezier(0.16, 1, 0.3, 1); /* entrances */ --duration-fast: 150ms; /* hovers, toggles */ --duration-base: 280ms; /* reveals, pills, bubbles */ --duration-slow: 600ms; /* staged sequences */ } /* ------------------------------------------------------------ Dark companion — the dark member of the SAME indigo identity: warm dark-grey surfaces (not pure black) carrying the same engine indigo. The platform toggles [data-theme="dark"]; the body.theme-dark selector is kept for parity with the family. Accent fills stay indigo with white --on-accent; accent TEXT lifts to a light indigo (--accent-ink) so it clears contrast on the dark. ------------------------------------------------------------ */ [data-theme="dark"], body.theme-dark { /* ================================================ BRAND BLOCK — what changes per product. Trellis: the engine indigo family, dark colorway. ================================================ */ /* ---- Color: accent (same engine indigo family) ---- */ --accent: #6167E9; /* same indigo fill */ --accent-ink: #A2A6F5; /* light indigo text on dark */ --accent-mark: #7A7FEE; --accent-wash: rgba(97, 103, 233, 0.24); --on-accent: #FFFFFF; /* white text on the indigo fill */ /* Accent button: the same indigo pill; the glow reads a touch deeper on dark surfaces. */ --shadow-accent: 0 6px 16px -6px rgba(58, 63, 160, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4); --shadow-accent-press: inset 0 3px 8px rgba(45, 50, 140, 0.5), inset 0 -1px 2px rgba(255, 255, 255, 0.25); /* ---- Color: entity tags, dark colorway ---- */ --tag-character-bg: rgba(97, 103, 233, 0.24); --tag-character-text: #A2A6F5; --tag-location-bg: #332E2E; --tag-location-text: #C9C2BE; /* ---- Selection + focus halo, dark colorway ---- */ --selection-bg: rgba(97, 103, 233, 0.45); --focus-halo: 0 0 0 3px rgba(97, 103, 233, 0.30); /* ---- Canvas: the brand's warm near-black ---- */ --bg-app: #201D1E; /* warm near-black canvas */ /* ---- Danger family — semantic, but the tints may differ per brand; that is why it lives in the brand block. ---- */ --danger: #E0685E; --danger-grad: linear-gradient(180deg, #E0685E, #C94A40); /* ================================================ SYSTEM BLOCK — the Branch UI physics. Identical across products. Do not fork per platform. ================================================ */ /* ---- Color: surfaces, dark colorway ---- */ --bg-panel: #2A2626; --bg-inset: #332E2E; --row-alt: rgba(51, 46, 46, 0.5); /* zebra wash on dark sheets */ --bg-scrim: rgba(12, 6, 8, 0.62); --bg-glass: rgba(42, 38, 38, 0.65); --hover-glass: rgba(255, 255, 255, 0.07); --panel-glass: rgba(36, 33, 33, 0.9); /* dot-grid canvas: texture for the frost to blur */ --dot-ink: rgba(255, 255, 255, 0.07); /* ---- Color: ink, dark colorway ---- */ --text-primary: #F0ECE8; /* warm off-white */ --text-secondary: #A49D9A; --text-faint: #6F6866; --line: transparent; /* borders retired */ --line-strong: transparent; /* Glass, translated to the dark colorway: same silhouette, smoke instead of milk. */ --glass-bg: linear-gradient(180deg, rgba(48, 43, 43, 0.72), rgba(38, 34, 34, 0.58)); --glass-border: transparent; --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.22); /* Glass details, dark colorway. */ --glass-rim: rgba(255, 255, 255, 0.09); --glass-bevel: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.22); --image-inset-bg: rgba(0, 0, 0, 0.22); --image-inset-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4); /* Veil, dark colorway: same physics, smoke instead of milk — the page behind a transient picker blurs and DARKENS. Same warm near-black family as --bg-scrim. */ --veil-bg: rgba(12, 6, 8, 0.55); --veil-blur: blur(10px); --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.25), 0 4px 10px -4px rgba(0, 0, 0, 0.32); --shadow-field: inset 0 1px 2px rgba(0, 0, 0, 0.3); /* Quiet button, dark colorway: same pressable pill in warm dark greys — the top-light bevel does the "raised" work on dark. */ --btn-grad: linear-gradient(180deg, #383333, #2C2828); --shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.35), 0 3px 8px -2px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.07); --shadow-btn-press: inset 0 2px 5px rgba(0, 0, 0, 0.45); /* ---- Toggle, dark colorway ---- */ --toggle-track: var(--bg-inset); --toggle-track-inset: inset 0 1px 2px rgba(0, 0, 0, 0.3); --toggle-knob-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.25); /* Raised knob / active-segment fill, dark colorway. A warm grey a clear step LIGHTER than the #332E2E track (same warm-neutral family: R a touch above G=B, cf. #2A2626 / #332E2E / #383333). The old value aliased --bg-panel (#2A2626), which sits BELOW the track — so the knob vanished or read inverted. #4A4444 lifts it above the well, so the knob and every active segment read raised without shouting. */ --toggle-indicator-bg: #4A4444; /* ---- Color: feedback, dark colorway ---- */ --success: #4CAF50; --focus-ring: #F0ECE8; /* ---- Elevation, dark colorway ---- */ --shadow-raised: 0 1px 3px rgba(0, 0, 0, 0.32), 0 4px 12px -6px rgba(0, 0, 0, 0.42); --shadow-floating: 0 26px 64px -30px rgba(0, 0, 0, 0.6); --shadow-rail: 6px 0 22px -14px rgba(0, 0, 0, 0.35), 0 14px 40px -30px rgba(0, 0, 0, 0.42); } /* ============================================================ BRAND SKIN OVERRIDE — Productbeeld (ink / black on white) ------------------------------------------------------------ Per-domain skin (config.DOMAIN_BRANDS -> ). This block ONLY re-tints the accent family (the BRAND BLOCK). It NEVER touches a SYSTEM token — surfaces, ink, glass, type, spacing, radii and motion stay the shared Branch physics, so the app is byte-for-byte the same layout, just wearing an ink accent instead of the engine indigo. Default (data-brand= "trellis") matches nothing here => the indigo skin is untouched. Specificity: :root[data-brand="productbeeld"] is (0,2,0), which beats plain :root (0,1,0) and [data-theme="dark"] (0,1,0). The dark companion below adds the theme attribute so it wins in dark. ============================================================ */ :root[data-brand="productbeeld"] { /* Ink fill (near-black) carrying WHITE text — the site's zwart/wit. */ --accent: #1b1b1d; /* fills: buttons, active */ --accent-ink: #1b1b1d; /* accent text on paper (near-max contrast) */ --accent-mark: #1b1b1d; /* stamp/underline */ --accent-wash: rgba(27, 27, 29, 0.10); /* tinted backgrounds */ --on-accent: #FFFFFF; /* white text on the ink fill */ /* The candy pill, in ink: a faint top-light on near-black. */ --accent-grad: linear-gradient(180deg, #34343a, #1b1b1d); --shadow-accent: 0 6px 16px -6px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18); --shadow-accent-press: inset 0 3px 8px rgba(0, 0, 0, 0.5), inset 0 -1px 2px rgba(255, 255, 255, 0.12); /* Selection + focus halo: neutral ink instead of indigo. */ --selection-bg: #d5d5d8; --focus-halo: 0 0 0 3px rgba(27, 27, 29, 0.22); /* Entity tags follow the ink accent (kept for system parity). */ --tag-character-bg: rgba(27, 27, 29, 0.10); --tag-character-text: #1b1b1d; } /* Dark colorway: an ink accent would vanish on the near-black canvas, so the monochrome flips — a near-white fill carrying dark text, still purely zwart/wit. Attribute + theme = (0,2,0) beats the plain [data-theme="dark"] brand block above. */ :root[data-brand="productbeeld"][data-theme="dark"], [data-theme="dark"][data-brand="productbeeld"] { --accent: #F0ECE8; /* warm off-white fill */ --accent-ink: #F0ECE8; /* accent text on dark */ --accent-mark: #F0ECE8; --accent-wash: rgba(240, 236, 232, 0.14); --on-accent: #201D1E; /* dark text on the light fill */ --accent-grad: linear-gradient(180deg, #FFFFFF, #E7E3DE); --shadow-accent: 0 6px 16px -6px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.6); --shadow-accent-press: inset 0 3px 8px rgba(0, 0, 0, 0.28), inset 0 -1px 2px rgba(255, 255, 255, 0.4); --selection-bg: rgba(240, 236, 232, 0.28); --focus-halo: 0 0 0 3px rgba(240, 236, 232, 0.30); --tag-character-bg: rgba(240, 236, 232, 0.16); --tag-character-text: #F0ECE8; }