/* selfievo-ui · brand/tokens.css — THE design tokens. One source of truth. JARABOT Design System 2026, PRODUCT dark surface. The design system ships two different dark treatments and they must not be mixed. The marketing dark (the website kit, the deck) separates surfaces with a deep soft shadow and the signature orange radial glow. The PRODUCT dark — `ui_kits/contact-center/`, which is JARABOT's own operator console and therefore this file's precedent — kills the card shadow outright and separates surfaces with a 1px white hairline. It uses the glow zero times. This is the product surface, so: hairlines, no glow, no card shadow. The house rule is "monochrome + one electric orange": the orange carries 100 % of the brand energy and everything else is a black→white ramp. The previous surface ("Warm Depth", v0.5.0) tilted its greys warm and used an amber #f5a623. Both are gone. Layering (see base.html): brand/fonts.css the three JARABOT webfaces, self-hosted brand/tokens.css THIS FILE — every token, brand + system brand/customers.css per-customer identity, scoped under app.css components. Defines NO tokens. admin/*.css components. Define NO tokens. Two rules keep it honest: 1. Nothing below this file may define a token. A component that needs a new value adds it here, so one file answers "what colour is this?". 2. `--jb-*` are the BRAND primitives, copied from the design system's tokens/ directory. Everything else is a semantic name resolving to one of them. Components read the semantic name, never `--jb-*`, so the brand can move without touching a component. Every contrast figure in the comments below was MEASURED against the surface named, not estimated. ONE declaration per token. The file this replaces wrote each colour twice — a hex, then an oklch() "fallback" — believing the old browser would keep the hex. It does not. A custom property accepts any token stream at parse time, so the SECOND declaration always wins and the browser only discovers the value is unusable at substitution time, where it computes to `unset` rather than to the hex above it. Every value here is therefore written once, in a syntax every target browser parses. */ :root { color-scheme: dark; /* ============================================================ BRAND PRIMITIVES — verbatim from the design system tokens/ ============================================================ */ --jb-orange: #F55B01; /* THE accent. 5.23:1 on the card. */ --jb-orange-deep: #D94E00; /* 4.13:1 — a FILL colour, never text. */ --jb-orange-300: #F9A64B; --jb-orange-200: #FFCE99; --jb-black: #000000; --jb-charcoal: #121212; /* dark page */ --jb-charcoal-2: #1B1B1B; /* elevated dark card */ --jb-white: #FFFFFF; --jb-snow: #F8F8F8; /* the light plate under a light-background mark */ --jb-success: #1F9D55; --jb-danger: #D64541; /* ============================================================ SURFACES — the contact-center kit's four dark levels, verbatim ============================================================ */ /* #1B1B1B on #121212 is a 1.09:1 step — very nearly invisible on its own. That is deliberate: in this system the HAIRLINE draws the edge and the value step only says which side is on top. Never reach for a shadow to make a card visible; reach for `--border`. */ --bg: var(--jb-charcoal); /* #121212 canvas */ --surface: var(--jb-charcoal-2); /* #1B1B1B panel, card, header */ --surface-2: #202020; /* SUNKEN well inside a panel: search field, read-only block */ --surface-overlay: #262626; /* hover fill, status chip */ /* ---- BORDERS (white-alpha, so one value holds on every level) ---- */ --border: rgba(255, 255, 255, 0.10); /* the workhorse hairline */ --border-subtle: rgba(255, 255, 255, 0.06); /* inside a panel */ --border-strong: rgba(255, 255, 255, 0.22); /* input + outline button */ /* ============================================================ TEXT — three tiers, every one AA at 11 px ============================================================ */ /* The kit's own muted tier is rgba(255,255,255,0.35), which measures 3.18:1 and fails AA at the 11 px it carries (timestamps, group headers, counts). The old "Warm Depth" muted failed the same way at 4.16:1. This ramp bottoms out at 0.55 — 5.97:1 on the card, 5.58:1 on a chip — so the smallest text in the product still passes. */ --text: var(--jb-white); /* 17:1 headings, values */ --text-dim: rgba(255, 255, 255, 0.72); /* 9.4:1 prose, help text */ --text-muted: rgba(255, 255, 255, 0.55); /* 6.0:1 labels, meta, counts */ /* ============================================================ ACCENT — the one colour in the system ============================================================ */ --accent: var(--jb-orange); /* Hover LIGHTENS. --jb-orange-deep is the design system's hover for orange on a LIGHT page; on charcoal a darker orange reads as disabled, and as text it measures 4.13:1 and fails AA. So deep is the PRESSED state and a fill colour only, and hover goes up. */ --accent-hover: #FF7324; --accent-press: var(--jb-orange-deep); --accent-fade: #C24800; /* Text ON an orange fill. White measures 3.29:1 and fails; charcoal is 5.69:1. The design system's own primary button is a charcoal pill for exactly this reason. */ --accent-ink: var(--jb-charcoal); /* The kit remaps --jb-orange-50 to this on dark. It is the fill behind an active nav item, a selected row, and a soft icon button. Kept transparent, not pre-mixed, so it holds on all four surface levels. */ --accent-subtle: rgba(245, 91, 1, 0.16); --accent-glow: rgba(245, 91, 1, 0.28); /* ============================================================ STATUS — tint-on-tint: 12 % fill, full-strength text ============================================================ */ /* Success is the design system hue unchanged: #1F9D55 measures 4.93:1 on the card and passes. Danger is lifted — #D64541 measures 3.93:1 and fails, and a failure state is the last thing that may be hard to read. The lift keeps the hue and buys 5.33:1. */ --ok: var(--jb-success); --ok-bg: rgba(31, 157, 85, 0.12); --error: #EA6461; --error-bg: rgba(214, 69, 65, 0.12); /* The design system maps "warning" onto the brand orange. In a telephony console the orange is already the accent — a warning that looks like the primary action is not a warning. Warning takes the orange-300 tint instead: same family, unmistakably not the accent, and 8.68:1. */ --warn: var(--jb-orange-300); --warn-bg: rgba(249, 166, 75, 0.12); /* "Live / in progress". The house rule is that the orange is the system pulse, so a running session pulses in the accent rather than in a blue this palette does not contain. */ --running: var(--accent); /* ============================================================ TYPE ============================================================ */ /* Manrope, not the token file's Plus Jakarta Sans: the brand body face is Creato Display, which ships no webfont, and Plus Jakarta is only the design system's stand-in for it. jarabot.com itself overrides the token to Manrope, and Manrope is the face the system actually ships a file for. Inter Tight carries UI chrome, Space Grotesk carries numerals. There is no brand monospace; extension numbers and DIDs need one, so the mono stack is a documented deviation on system faces. */ --font-display: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --font-alt: "Space Grotesk", "Inter Tight", system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --ls-tight: -0.5px; /* headings */ --ls-eyebrow: 0.08em; /* the uppercase group header */ /* ============================================================ RADII ============================================================ */ /* "Soft-rounded cards, full-pill buttons" is the brand's silhouette, so --r-md is the system's 16 px card and --r-pill is on every button, tag, badge and chip — this system has no small-radius chip. The two smaller steps are the kit's own control radii. */ --r-xs: 8px; /* nav item, icon button */ --r-sm: 10px; /* sunken well, square action button */ --r-md: 16px; /* the default card */ --r-lg: 24px; /* feature panel */ --r-pill: 999px; /* every button, tag, badge, chip */ /* ============================================================ ELEVATION — a hairline, not a shadow ============================================================ */ /* The product theme sets --shadow-card to none and lets the border carry the edge, so --elev-1 and --elev-2 are deliberately no-ops: a card that needs to look raised gets `border: 1px solid var(--border)`, not a blur. Only something that genuinely floats over the page — a drawer, a popover — earns --elev-3. They are a TRANSPARENT shadow, not the keyword `none`. Existing rules compose them in a list (`box-shadow: var(--elev-1), var(--shelf)`), and `none` is illegal inside a shadow list — it would invalidate the whole declaration and take the hairline with it. A zero-spread transparent shadow composes cleanly and paints nothing. */ --shelf: inset 0 1px 0 rgba(255, 255, 255, 0.04); --elev-1: 0 0 0 0 rgba(0, 0, 0, 0); --elev-2: 0 0 0 0 rgba(0, 0, 0, 0); --elev-3: 0 24px 60px -20px rgba(0, 0, 0, 0.66); /* A crisp ring plus a halo. The kit's focus is an inset accent line and a 4px tint; this is the same idea as one outer box-shadow, so it works on an element that already owns its border. */ --focus-glow: 0 0 0 1.5px var(--accent), 0 0 0 5px rgba(245, 91, 1, 0.20); --gradient-cta: linear-gradient(180deg, var(--accent-hover) 0%, var(--accent) 55%, var(--accent-fade) 100%); /* The signature orange radial bloom. It is MARKETING texture: the design system's own product kit never draws it. Defined here for the sign-in page only, which is the one screen in this product with a hero. */ --glow-bloom: radial-gradient(closest-side, rgba(245, 91, 1, 0.55), rgba(245, 91, 1, 0) 70%); /* ============================================================ MOTION — the design system's single easing curve ============================================================ */ --ease-enter: cubic-bezier(0.22, 1, 0.36, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); --ease-snap: cubic-bezier(0.12, 0, 0.08, 1); --dur-instant: 100ms; --dur-micro: 150ms; --dur-fast: 200ms; --dur-standard: 280ms; /* ============================================================ LAYOUT ============================================================ */ --bar-h: 52px; /* ============================================================ CUSTOMER IDENTITY — defaults; brand/customers.css overrides per tenant ============================================================ */ /* The PRODUCT is JARABOT and stays orange on every tenant: the design system gives the accent 100 % of the brand energy, and a per-tenant accent would spend it. A customer's identity is their logo, their name, and one tint on their own lockup — never the product's accent. `--brand-customer-logo` is a full `background` shorthand, not a bare url(), and that is what makes the fallback work with ONE knob. The monogram sits under the logo layer. A tenant with no block leaves this at `none`, the layer paints nothing, and the monogram shows through. A tenant WITH a block brings `--brand-tile` along, whose opaque colour covers the monogram — so a transparent PNG never lets two identities show at once. No template knows which tenants have art. */ --brand-tile: center / contain no-repeat var(--surface-2); /* Some client marks are drawn for a white page: black wordmarks, dark navy, deep red. On charcoal they disappear, and inverting them would turn a blue brand orange. They get a light plate instead, which is not a compromise — it is showing the mark on the background its owner drew it for. Pick the plate in the customer's block by naming this tile instead of --brand-tile. */ --brand-tile-plate: center / contain no-repeat var(--jb-snow); --brand-customer-logo: none; --brand-customer-tint: var(--accent); }