/* ============================================================ 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 */ --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); /* ---- 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); /* ---- 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); --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); /* ---- 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; }