/* ============================================================================= VENTRILOC — theme layer for the Car Auction Operations demo "Editorial data observatory on warm paper — a single orange ember punctuating monochrome precision." This file is loaded AFTER the compiled Tailwind bundle. Every rule in that bundle sits inside a cascade layer (@layer theme/base/components/utilities), and unlayered declarations always beat layered ones — so nothing here needs !important. Redefining a Tailwind theme variable (e.g. --color-amber-500) repaints every utility built from it, including the /10 /20 alpha variants, because Tailwind v4 compiles those to color-mix() over the same variable. Structure: section 2 states the palette, section 3 binds it to a set of semantic tokens *per mode*, and every rule after that reads only the semantic tokens. That is why light and dark cost one block each instead of two copies of the stylesheet. Sections 1. Fonts 5. Typography 9. Sidebar 2. Palette 6. Radius & shadow 10. Masthead 3. Semantic tokens 7. Surfaces & cards 11. Tables, charts, misc 4. Accent remap 8. Buttons, tags 12. Focus / scroll / toasts 13. Not-found page ========================================================================== */ /* 1 · FONTS ================================================================ PolySans is a licensed custom face and is not redistributable. The style reference names Inter Tight or Space Grotesk as its substitute; Space Grotesk is used here because its neo-grotesque skeleton holds up at display sizes under the weight-400 restraint the system demands. Both are self-hosted — the build makes no external requests. */ @font-face { font-family: 'Ventriloc Display'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('/fonts/space-grotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Ventriloc Display'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('/fonts/space-grotesk-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Ventriloc Text'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Ventriloc Text'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* 2 · PALETTE & SCALE ====================================================== */ :root { /* The reference palette, verbatim */ --color-graphite: #202020; --color-canvas-white: #ffffff; --color-ash: #efefef; --color-fog: #f5f5f5; --color-ivory: #ebe6dd; --color-steel: #4d4d4d; --color-slate: #828282; --color-mist: #e8e8e8; --color-ember-orange: #ff682c; --color-brass: #816729; /* Tones derived from that palette rather than added to it. Ember-ink: Ember darkened for small text on paper. Pure Ember clears 3.0:1 on Canvas White — fine for strokes, fills and display numerals, not for 11px currency in a table. This clears 4.95:1 and still reads unmistakably as Ember. Slate-ink: the reference gives two text tiers below Graphite (Steel for body, Slate for helper text), but Slate is 3.8:1 on Canvas White and the build has four tiers of muted text to place. This sits between them — quieter than Steel, legible where Slate is not (5.5:1 white, 4.8:1 Ash). Brass-lit: Brass is a paper colour. At 3.4:1 on the dark ground it is unreadable, so dark mode lifts it while keeping the warm-gold identity. Pitch / Slab / Shelf / Umber: the dark ground and its two lifted surfaces, plus the warm band that stands in for Ivory. Ivory is literally paper stock; the dark counterpart keeps the warmth and drops the light. */ --color-ember-ink: #c8420e; --color-slate-ink: #696969; --color-brass-lit: #c2a05c; --color-pitch: #141414; --color-slab: #1e1e1e; --color-shelf: #262626; --color-umber: #241f1a; /* Typography */ --font-polysans: 'Ventriloc Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-inter: 'Ventriloc Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --text-caption: 14px; --leading-caption: 1.43; --text-subheading: 18px; --leading-subheading: 1.25; --text-heading: 32px; --leading-heading: 1.19; --tracking-heading: -0.64px; --text-heading-lg: 40px; --leading-heading-lg: 1.2; --tracking-heading-lg: -0.8px; --text-display: 66px; --leading-display: 0.91; --tracking-display: -1.32px; --tracking-polysans: -0.02em; /* Spacing */ --spacing-8: 8px; --spacing-12: 12px; --spacing-16: 16px; --spacing-20: 20px; --spacing-36: 36px; --spacing-40: 40px; --spacing-60: 60px; /* Radius — the dialect system: sharp / card / widget / fully round, plus the asymmetric signature */ --radius-tags: 20px; --radius-cards: 8px; --radius-buttons: 0px; --radius-nav-pills: 200px; --radius-data-widget: 20px; --radius-asymmetric-card: 6px 0 0 0; } /* 3 · SEMANTIC TOKENS ====================================================== Ventriloc is described as a light system and light is the default, but the build ships a working theme toggle in the sidebar. A toggle that changes nothing is worse than no toggle, so the system is extended to a dark counterpart built from the same palette and the same rules: one ground, one lifted surface for the cards, one warm band, one ember. Light reads as ink on paper — Ash ground, Canvas White cards, so the data widgets float on warm gray and sections alternate white/ash bands. Dark inverts the relationship without inverting the logic: the ground goes to Pitch, the cards lift to Slab, and Ash becomes the ink. */ :root { --vt-ground: var(--color-ash); --vt-surface: var(--color-canvas-white); --vt-surface-2: var(--color-fog); --vt-surface-3: var(--color-ash); --vt-masthead: var(--color-ivory); --vt-masthead-ghost: 0.14; --vt-ink: var(--color-graphite); --vt-ink-body: var(--color-steel); --vt-ink-quiet: var(--color-slate-ink); --vt-ink-faint: #8f8f8f; --vt-hairline: var(--color-mist); --vt-accent: var(--color-ember-orange); --vt-accent-ink: var(--color-ember-ink); --vt-accent-2: var(--color-brass); --vt-on-accent: #ffffff; --vt-invert-bg: var(--color-graphite); --vt-invert-fg: var(--color-canvas-white); --vt-scrim: var(--color-graphite); color-scheme: light; } .dark, :root[data-theme='dark'] { --vt-ground: var(--color-pitch); --vt-surface: var(--color-slab); --vt-surface-2: var(--color-shelf); --vt-surface-3: #2c2c2c; --vt-masthead: var(--color-umber); --vt-masthead-ghost: 0.20; --vt-ink: var(--color-ash); --vt-ink-body: #b8b8b8; --vt-ink-quiet: #8f8f8f; --vt-ink-faint: #6e6e6e; --vt-hairline: #333333; --vt-accent: var(--color-ember-orange); --vt-accent-ink: var(--color-ember-orange); /* 5.8:1 on Slab — no ink variant needed */ --vt-accent-2: var(--color-brass-lit); --vt-on-accent: var(--color-pitch); --vt-invert-bg: var(--color-ash); --vt-invert-fg: var(--color-pitch); --vt-scrim: #000000; color-scheme: dark; } /* --- bind the build's shadcn tokens to the semantic set ------------------ */ :root, .dark, :root[data-theme='dark'] { --background: var(--vt-ground); --foreground: var(--vt-ink); --card: var(--vt-surface); --card-foreground: var(--vt-ink); --popover: var(--vt-surface); --popover-foreground: var(--vt-ink); --primary: var(--vt-ink); --primary-foreground: var(--vt-surface); --secondary: var(--vt-surface-3); --secondary-foreground: var(--vt-ink); --muted: var(--vt-surface-2); --muted-foreground: var(--vt-ink-body); --accent: var(--vt-surface-3); --accent-foreground: var(--vt-ink); --destructive: var(--vt-accent-ink); --border: var(--vt-hairline); --input: var(--vt-hairline); --ring: var(--vt-accent); /* The sidebar is the paper the nav is printed on: one step off the content ground, separated by a single hairline. */ --sidebar: var(--vt-surface); --sidebar-foreground: var(--vt-ink); --sidebar-primary: var(--vt-invert-bg); --sidebar-primary-foreground: var(--vt-invert-fg); --sidebar-accent: var(--vt-surface-3); --sidebar-accent-foreground: var(--vt-ink); --sidebar-border: var(--vt-hairline); --sidebar-ring: var(--vt-accent); /* Chart pair — the reference's prescribed strokes: Ember data line, Brass secondary. Ember carries "below target" because the ember is the system's punctuation; Brass carries "at or above" because good news is meant to stay quiet. Both clear AA on their own surface, and they separate by lightness and chroma as well as hue. */ --hit: var(--vt-accent-2); --miss: var(--vt-accent); /* Achromatic chart ramp, warm rather than blue-gray */ --chart-1: var(--vt-ink); --chart-2: var(--vt-ink-body); --chart-3: var(--vt-ink-quiet); --chart-4: var(--vt-ink-faint); --chart-5: var(--vt-hairline); --radius: 8px; } /* 4 · ACCENT REMAP ========================================================= The build carries three chromatic signals — amber (urgent), red (below target), emerald (at or above). Ventriloc allows exactly two warm accents, so they collapse onto Ember and Brass. Redefining the Tailwind theme variables repaints text-, bg-, border- and every /alpha variant at once. The split is between ink and mark rather than between signals: the amber utilities land almost entirely on *text* — the carry clock, the "STRUCTURAL RISK NOT ASSESSABLE FROM DATA" warning, triage verdicts, several of them at 9–11px. On paper, pure Ember only clears 3.0:1, so text takes Ember-ink and full-strength Ember is reserved for marks that carry no reading burden: chart strokes, the damage-map zone, focus rings, link underlines, selection. On the dark ground Ember already clears 5.8:1, so the two converge and the accent is simply itself. */ :root, .dark, :root[data-theme='dark'] { --color-amber-500: var(--vt-accent-ink); /* urgency, the carry clock */ --color-amber-600: var(--vt-accent-ink); --color-red-500: var(--vt-accent-ink); /* below target, negatives */ --color-emerald-500: var(--vt-accent-2); /* at or above target */ --color-black: var(--vt-scrim); } /* Tailwind ships a @supports lab() override for those same tokens inside @layer theme. Unlayered rules win regardless, and the alpha utilities are compiled as color-mix(in oklab, var(--color-x) N%, transparent), so they pick up the values above without further work. */ /* Muted text at low alpha turns illegible much faster on a light ground than it did on the dark one: Steel at 60% lands on #949494, which is 2.6:1 on the Ash ground — and the copy wearing it includes the demo disclaimer, the one paragraph on the page that must stay readable. Four alpha tiers collapse to two: one quiet reading tone and one that is only ever a decorative mark. Hierarchy in this system comes from size and weight, not from five shades of gray. */ .text-muted-foreground\/40 { color: var(--vt-ink-faint); } .text-muted-foreground\/60, .text-muted-foreground\/70, .text-muted-foreground\/80 { color: var(--vt-ink-quiet); } /* The build reaches for the chart tokens directly in a few places. Those are reading text at 12px, so they take the ink rather than the mark. */ .text-\[var\(--miss\)\] { color: var(--vt-accent-ink); } .text-\[var\(--hit\)\] { color: var(--vt-accent-2); } /* 5 · TYPOGRAPHY =========================================================== "PolySans is the voice; Inter is the grammar." Headings, nav items and button labels take the display face at weight 400 with -0.02em tracking. Everything else is Inter. Numerals stay monospaced — the build's Geist Mono is already local, and monospaced precision is part of the data-card idiom the reference asks for. */ :root, :host { --font-sans: var(--font-inter); } html, body { font-family: var(--font-inter); background-color: var(--vt-ground); color: var(--vt-ink); } /* The display face, at 400, always. Never bolded — the whisper weight is the signature and bolding it destroys the editorial restraint. */ h1, h2, h3, h4, h5, h6, .font-heading, [data-slot='card-title'], [data-slot='dialog-title'], [data-slot='alert-title'], [data-slot='sheet-title'], [data-slot='drawer-title'] { font-family: var(--font-polysans); font-weight: 400; letter-spacing: var(--tracking-polysans); } /* Page masthead — heading-lg on the reference scale */ main h1 { font-size: clamp(2rem, 2.4vw, var(--text-heading-lg)); line-height: var(--leading-heading-lg); letter-spacing: var(--tracking-heading-lg); font-weight: 400; } /* Card and panel titles — subheading */ [data-slot='card-title'], [data-slot='dialog-title'], [data-slot='drawer-title'], [data-slot='sheet-title'] { font-size: var(--text-subheading); line-height: var(--leading-subheading); } [data-slot='card-description'] { font-family: var(--font-inter); font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--vt-ink-body); letter-spacing: 0; } /* Nav items and button labels are the display face too */ [data-slot='sidebar-menu-button'], [data-slot='button'], [data-slot='tabs-trigger'], button.rounded-full { font-family: var(--font-polysans); font-weight: 400; letter-spacing: var(--tracking-polysans); } /* Monospaced figures: tabular, untracked, precise. The mono face carries its own rhythm and must not inherit the display face's negative tracking. */ .font-mono { font-variant-numeric: tabular-nums; } /* The uppercase micro-labels ("// FROM YOUR CLOSED UNITS", column eyebrows) are the closest thing this build has to the reference's Brass caption. */ [data-slot='sidebar-header'] .font-mono { color: var(--vt-accent-2); } /* NOTE — do not add bare element selectors that set `color` or `background-color` here. Because this sheet is unlayered, such a rule beats every Tailwind colour utility on the *same* element regardless of specificity: a `p { color: inherit }` silently repainted the amber carry clock ("Day 35 of 44") Graphite. Element-level rules in this file are restricted to typography and box properties for that reason. */ /* 6 · RADIUS & SHADOW ====================================================== Deliberate dialects, in rising softness: sharp (0px) buttons, inputs, nav rows — architectural card (8px) structural cells and small panels widget (20px) data cards and tags round (200px) pills, chips and meters Nothing carries a shadow. Depth comes from surface contrast, never elevation — the cards against the ground do all the lifting. */ .rounded-md, .rounded-sm, .rounded-\[min\(var\(--radius-md\)\2c 10px\)\], .rounded-\[min\(var\(--radius-md\)\2c 12px\)\], .rounded-\[2px\] { border-radius: var(--radius-buttons); } .rounded-lg, .rounded-xl { border-radius: var(--radius-cards); } /* Bare `.rounded` is 4px in the build, and it only ever lands on the thin meter tracks (the live rule counts, the carry bars). A 4px corner on a 6px bar is a fourth radius value for no reason — capsules, like every other meter in the system. */ .rounded { border-radius: var(--radius-nav-pills); } .rounded-t-xl { border-top-left-radius: var(--radius-cards); border-top-right-radius: var(--radius-cards); } .rounded-b-xl { border-bottom-left-radius: var(--radius-cards); border-bottom-right-radius: var(--radius-cards); } /* Data widgets — the chart and panel cards */ [data-slot='card'] { border-radius: var(--radius-data-widget); } [data-slot='card'] > [data-slot='card-header'].rounded-t-xl { border-top-left-radius: var(--radius-data-widget); border-top-right-radius: var(--radius-data-widget); } /* Tags */ [data-slot='badge'], .rounded-4xl { border-radius: var(--radius-tags); } /* Form controls follow the button dialect — square. The build leaves them on the card radius, which reads as a third, unintended shape. */ [data-slot='input'], [data-slot='textarea'], [data-slot='select-trigger'], [data-slot='command-input'], input, textarea, select { border-radius: var(--radius-buttons); } /* Kill every shadow in the build. */ .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl, [data-slot='card'], [data-slot='popover-content'], [data-slot='dropdown-menu-content'], [data-slot='dialog-content'], [data-slot='tooltip-content'], [data-slot='select-content'], [data-slot='sheet-content'], [data-slot='command'] { --tw-shadow: 0 0 #0000; --tw-drop-shadow: none; box-shadow: none; } /* Floating surfaces lose their shadow, so a hairline anchors them */ [data-slot='popover-content'], [data-slot='dropdown-menu-content'], [data-slot='dialog-content'], [data-slot='select-content'], [data-slot='sheet-content'], [data-slot='command-dialog'] { border: 1px solid var(--vt-hairline); border-radius: var(--radius-cards); background-color: var(--vt-surface); } [data-slot='sheet-content'] { border-radius: 0; } [data-slot='tooltip-content'] { border-radius: var(--radius-buttons); background-color: var(--vt-invert-bg); color: var(--vt-invert-fg); font-family: var(--font-inter); letter-spacing: 0; } [data-slot='tooltip-content'] .bg-primary { background-color: var(--vt-invert-bg); } [data-slot='tooltip-content'] .fill-primary { fill: var(--vt-invert-bg); } /* 7 · SURFACES & CARDS ===================================================== */ /* Main content ground */ [data-slot='sidebar-inset'], main.bg-background { background-color: var(--vt-ground); } /* Data dashboard card: lifted surface, hairline, no shadow, generous padding. --card-spacing drives the build's own header/content padding, so lifting it to the reference's 20px element gap widens every card at once. */ [data-slot='card'] { --card-spacing: var(--spacing-20); background-color: var(--vt-surface); --tw-ring-color: var(--vt-hairline); --tw-ring-shadow: 0 0 0 1px var(--vt-hairline); box-shadow: 0 0 0 1px var(--vt-hairline); } [data-slot='card'][data-size='sm'] { --card-spacing: var(--spacing-16); } [data-slot='card-content'] { padding-top: var(--spacing-20); } /* Nested/secondary containers, one step off the ground */ .bg-muted { background-color: var(--vt-surface-2); } .bg-secondary { background-color: var(--vt-surface-3); } /* Structural cells — the funnel steps, stat tiles and shortlist rows. */ .bg-card { background-color: var(--vt-surface); } /* Hairline borders everywhere */ .border-border, .border { border-color: var(--vt-hairline); } .divide-border > * { border-color: var(--vt-hairline); } /* Emphasis borders (the build's hover and active states) read as the ink */ .border-primary\/50 { border-color: color-mix(in srgb, var(--vt-ink) 34%, transparent); } .border-primary\/40 { border-color: color-mix(in srgb, var(--vt-ink) 26%, transparent); } .hover\:border-primary\/50:hover { border-color: var(--vt-ink); } /* 8 · BUTTONS, TAGS, PILLS ================================================= */ /* Primary CTA — solid ink fill, square. The square edge is deliberate contrast against the rounded cards. No shadow, ever. */ [data-slot='button'] { border-radius: var(--radius-buttons); box-shadow: none; } [data-slot='button'].bg-primary { background-color: var(--vt-invert-bg); color: var(--vt-invert-fg); } [data-slot='button'].bg-primary:hover { background-color: color-mix(in srgb, var(--vt-invert-bg) 86%, var(--vt-accent)); } /* Ghost outlined — 1px ink, transparent ground */ [data-slot='button'].border { border-color: var(--vt-ink); background-color: transparent; color: var(--vt-ink); } [data-slot='button'].border:hover { background-color: var(--vt-surface-3); } /* Tags: 20px. Ember only when the tag is the urgent one — the build marks those with the amber utilities, which now resolve to Ember automatically. */ [data-slot='badge'] { font-family: var(--font-inter); font-weight: 500; letter-spacing: 0; padding-inline: 10px; } [data-slot='badge'].bg-secondary { background-color: var(--vt-surface-3); } /* A badge filled solid with the accent needs its own ink. The build pairs the fill with Graphite text (3.3:1), and the right answer flips by mode: on paper the fill is Ember-ink and takes white (4.95:1); on the dark ground the fill is Ember itself, which is a *light* colour, so it takes Pitch (6.4:1). White on pure Ember would be 2.9:1. */ [data-slot='badge'].bg-amber-500, [data-slot='badge'].bg-destructive { color: var(--vt-on-accent); } /* Chips and filter pills — the nav-pill dialect: capsule, no border */ button.rounded-full, [data-slot='tabs-list'] { border-radius: var(--radius-nav-pills); } button.rounded-full.bg-card { background-color: var(--vt-surface-3); border-color: transparent; } button.rounded-full.bg-card:hover { background-color: color-mix(in srgb, var(--vt-surface-3) 80%, var(--vt-ink)); border-color: transparent; } [data-slot='tabs-list'] { background-color: var(--vt-surface-3); padding: 4px; } [data-slot='tabs-trigger'] { border-radius: var(--radius-nav-pills); box-shadow: none; } /* One inverted cell: the active pill inverts rather than washing out against the capsule behind it. */ [data-slot='tabs-trigger'][data-state='active'] { background-color: var(--vt-invert-bg); color: var(--vt-invert-fg); box-shadow: none; } /* 9 · SIDEBAR ============================================================== The paper the nav is printed on, one hairline, sharp-cornered rows. The active row is the inverted cell — the only place the eye is asked to stop. */ [data-slot='sidebar-container'] .bg-sidebar, [data-slot='sidebar-inner'] { background-color: var(--vt-surface); } [data-slot='sidebar-menu-button'] { border-radius: var(--radius-buttons); font-size: 14px; } [data-slot='sidebar-menu-button'][data-active='true'] { background-color: var(--vt-invert-bg); color: var(--vt-invert-fg); font-weight: 400; } [data-slot='sidebar-menu-button'][data-active='true'] svg { color: var(--vt-invert-fg); } [data-slot='sidebar-menu-button']:not([data-active='true']):hover { background-color: var(--vt-surface-3); color: var(--vt-ink); } [data-slot='sidebar-group-label'] { font-family: var(--font-inter); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; font-size: 10px; color: var(--vt-ink-quiet); } [data-slot='sidebar-footer'] { color: var(--vt-ink-quiet); } /* 10 · MASTHEAD BANNER ===================================================== The banner is the one place this build is allowed a photograph for its own sake, and it earns the exception by doing a job: it says "auction yard" before a single figure is read. The frame is a purpose-generated dawn shot of a storage lot — hundreds of cars in orderly rows receding into haze, which is the operation this dashboard runs. Ventriloc's rule against lifestyle photography is not abandoned, it is satisfied: the frame is desaturated to the warm-neutral family so it reads as printed stock rather than a stock photo, and a scrim built from the masthead colour keeps the headline column on near-solid ground. The one Ember rule along the bottom edge ties the band to the accent system, and the signature asymmetric radius survives — soft top-left, sharp elsewhere. The two gradients do different work: left-to-right protects the headline, bottom-to-top lands the band on the page without a hard seam. */ :root { --vt-banner-filter: saturate(0.30) contrast(1.03) brightness(1.03); } /* The dark banner is a separate, natively dark frame — dimming is not needed, only a light desaturation to keep it in the warm-neutral family. */ .dark, :root[data-theme='dark'] { --vt-banner-filter: saturate(0.55) contrast(1.04); } main > div.relative.overflow-hidden:has(img) { background-color: var(--vt-masthead); border-radius: var(--radius-asymmetric-card); } main > div.relative.overflow-hidden:has(img) > img { filter: var(--vt-banner-filter); opacity: 1; } /* The build fades the photo with a gradient built on --background; replace it with the two-axis scrim the headline needs. Left-to-right protects the headline column, bottom-to-top lands the band without a hard seam. */ main > div.relative.overflow-hidden:has(img) > .absolute.inset-0 { background-image: linear-gradient( to right, var(--vt-masthead) 0%, color-mix(in srgb, var(--vt-masthead) 90%, transparent) 28%, color-mix(in srgb, var(--vt-masthead) 38%, transparent) 50%, transparent 78% ), linear-gradient( to top, var(--vt-masthead) 0%, color-mix(in srgb, var(--vt-masthead) 30%, transparent) 46%, transparent 78% ); } /* 11 · TABLES, CHARTS, MISC ================================================ */ [data-slot='table'] { font-family: var(--font-inter); } /* Column headers are content, not chrome — they carry the meaning of every figure under them, so they take the body ink rather than the quiet tier. */ [data-slot='table-head'] { font-family: var(--font-inter); font-weight: 500; color: var(--vt-ink-body); letter-spacing: 0.02em; } [data-slot='table-row'] { border-color: var(--vt-hairline); } [data-slot='table-row']:hover { background-color: var(--vt-surface-2); } [data-slot='separator'] { background-color: var(--vt-hairline); } /* --- Charts --------------------------------------------------------------- The reference is specific about how data is drawn: "a flat, minimal style with thin strokes in Ember Orange and Brass against white card surfaces." The build fills its bars solid, and because nearly every unit in the demo closed below target, that painted whole panels a solid Ember — the exact opposite of a page that should read 95% achromatic. So every bar becomes a tinted body under a full-strength hairline: the ember still marks the bar, but as punctuation rather than mass. Dots and value labels keep the pure accent — they are small enough to earn it. The tint mixes into the card surface, so it follows the mode automatically. SVG presentation attributes (fill="var(--miss)") lose to any CSS rule, so attribute selectors can retarget each series without touching the build. */ .recharts-rectangle { stroke-width: 1px; paint-order: fill; } /* Below target — Ember body, Ember hairline */ .recharts-rectangle[fill='var(--miss)'] { fill: color-mix(in srgb, var(--vt-accent) 20%, var(--vt-surface)); stroke: var(--vt-accent); } /* At or above target — Brass, the quiet counterpoint */ .recharts-rectangle[fill='var(--hit)'] { fill: color-mix(in srgb, var(--vt-accent-2) 18%, var(--vt-surface)); stroke: var(--vt-accent-2); } /* Achromatic series — the cost waterfall and its kin */ .recharts-rectangle[fill='var(--chart-1)'], .recharts-rectangle[fill='var(--chart-2)'] { fill: color-mix(in srgb, var(--vt-ink) 15%, var(--vt-surface)); stroke: var(--vt-ink); } /* Dots stay full strength — small marks are where the ember belongs */ .recharts-symbols[fill='var(--miss)'] { fill: var(--vt-accent); } .recharts-symbols[fill='var(--hit)'] { fill: var(--vt-accent-2); } /* Axis and tick labels: the build hardcodes #666 / #808080, cool grays outside this palette. Warm them to the quiet tier. */ .recharts-text[fill='#666'], .recharts-text[fill='#808080'] { fill: var(--vt-ink-quiet); } /* Value labels sitting on the card need the ink to clear AA at 10px */ .recharts-text[fill='var(--miss)'] { fill: var(--vt-accent-ink); } .recharts-text[fill='var(--hit)'] { fill: var(--vt-accent-2); } /* Gridlines: the build hardcodes #ccc, heavier than a Ventriloc hairline */ svg line[stroke='#ccc'], svg .recharts-cartesian-grid line, svg .recharts-cartesian-axis-line, svg .recharts-cartesian-axis-tick-line { stroke: var(--vt-hairline); } /* The target line is the one authoritative rule on a chart */ .recharts-reference-line-line { stroke: var(--vt-ink); } .stroke-border { stroke: var(--vt-hairline); } .stroke-muted-foreground { stroke: var(--vt-ink-body); } .fill-muted-foreground { fill: var(--vt-ink-body); } /* Inline links take the Ember underline, offset off the baseline. Used sparingly by the build, which is exactly the reference's instruction. */ a:not([data-slot]):not(.no-underline)[href^='http'], a.underline { text-decoration-line: underline; text-decoration-color: var(--vt-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; } /* Images that are data rather than decoration keep their own radius */ img.rounded-lg, img.rounded-xl { border-radius: var(--radius-cards); } /* 12 · FOCUS, SELECTION, SCROLLBAR, TOASTS ================================= */ ::selection { background-color: color-mix(in srgb, var(--vt-accent) 24%, transparent); color: var(--vt-ink); } :focus-visible { outline-color: var(--vt-accent); } * { scrollbar-width: thin; scrollbar-color: var(--vt-hairline) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--vt-hairline); border: 3px solid transparent; background-clip: padding-box; border-radius: var(--radius-nav-pills); } *::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--vt-hairline) 70%, var(--vt-ink)); background-clip: padding-box; } /* Sonner toasts ship their own palette through these variables. */ [data-sonner-toaster] { --normal-bg: var(--vt-surface); --normal-text: var(--vt-ink); --normal-border: var(--vt-hairline); font-family: var(--font-inter); } [data-sonner-toast] { border-radius: var(--radius-cards); box-shadow: none; border: 1px solid var(--vt-hairline); background: var(--vt-surface); color: var(--vt-ink); } [data-sonner-toast] [data-title] { font-family: var(--font-polysans); font-weight: 400; letter-spacing: var(--tracking-polysans); } [data-sonner-toast] [data-description] { color: var(--vt-ink-body); } [data-sonner-toast] [data-button] { border-radius: var(--radius-buttons); background: var(--vt-invert-bg); color: var(--vt-invert-fg); } /* 13 · NOT-FOUND PAGE ====================================================== Next ships its stock error page with an inline