/* * Fluxvia design tokens — canonical, single source of truth. * * Direction: "cool premium" (Portal v3) — clean cool-light surfaces, a cool * charcoal ink, and a single confident indigo accent. The display and body * face is Hanken Grotesk; data/labels stay on JetBrains Mono. No serif. * * Two naming layers live here: * 1. --fv-* canonical tokens (use these in all new/redesigned CSS). * 2. legacy aliases (--paper / --ink / --accent / --green / ...) that map * onto the canonical set so the existing landing + admin CSS keeps * working untouched while screens are migrated layer by layer. * * Fonts are loaded by each app's document head (Google Fonts ). Required * families: * Hanken Grotesk (display + sans/body) · JetBrains Mono (data/labels) */ :root { color-scheme: light; /* ----- Type ----- */ --fv-font-display: 'Hanken Grotesk', 'Inter', sans-serif; --fv-font-sans: 'Hanken Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --fv-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ----- Masking ----- */ /* Fully opaque stencil for mask-image. Not a colour anyone sees: a mask reads alpha, so this is the "keep this part" end of a fade. Named so a use site never carries a hex, and so it stays put if the palette ever inverts. */ --fv-mask-opaque: #000000; /* ----- Cool-light surfaces (lightest -> deepest) ----- */ --fv-bg: #f6f8fb; --fv-bg-tint: #eef1f6; --fv-surface: #ffffff; --fv-surface-2: #eef1f6; --fv-surface-sunken: #e5e9f0; /* ----- Cool charcoal ink ----- */ --fv-ink: #1a1f36; --fv-ink-soft: #4f566b; --fv-ink-mute: #8792a8; --fv-line: rgba(26, 31, 54, 0.10); --fv-line-strong: rgba(26, 31, 54, 0.16); /* ----- Accent (indigo) ----- */ --fv-accent: oklch(0.56 0.20 280); --fv-accent-strong: oklch(0.49 0.21 281); --fv-accent-soft: oklch(0.56 0.20 280 / 0.09); --fv-accent-line: oklch(0.56 0.20 280 / 0.24); /* The pale end of the accent, OPAQUE. The two above it are alpha, which is right for a tint over a surface and wrong for the far end of a gradient: a bar shading from --fv-accent to --fv-accent-line faded out toward its own baseline, so the part a reader measures from was the part hardest to see. Anything with a shape of its own — a column, an arc, a fill — reaches for this; a wash behind content still reaches for --fv-accent-soft. */ --fv-accent-pale: oklch(0.78 0.115 281); /* A CARD's ground, where -soft is a chip's tint: what reads right behind two words reads as a coloured panel behind six lines. Measured off the approved docs/mockups/agenda-composer.png at #f8f8fd, against -soft's #f0eefb. */ --fv-accent-wash: oklch(0.56 0.2 280 / 0.045); --fv-on-accent: #ffffff; /* ----- Accent hero (dark gradient surfaces — Saldo balance card and similar "on-brand-color" panels, never a light card background) ----- */ --fv-accent-hero-start: #241a52; --fv-accent-hero-end: #3a2599; --fv-success-on-accent: #5fe0a0; --fv-success-on-accent-soft: #8fe3b4; --fv-warn-on-accent: #f7c85c; --fv-danger-on-accent: #ff9384; --fv-accent-glow: #a99cff; /* Muted text on a dark brand surface. The ink ramp only descends into light grounds, so a dark panel had nothing below white to reach for and every such surface invented its own grey. */ --fv-ink-on-dark-mute: #b6bfd0; /* A panel drawn ON a dark brand surface: its ground, its raised state, and the three weights of rule it needs. Named by use rather than by origin, so the next dark panel finds the token instead of writing the alpha again -- which is the failure --fv-ink-on-dark-mute above already records. --fv-sb-* is the sidebar's own set and stays that; sharing it would give one value two meanings, and two colours the first time somebody edits one. */ --fv-panel-on-dark: rgba(255, 255, 255, 0.05); --fv-panel-on-dark-raised: rgba(255, 255, 255, 0.08); --fv-line-on-dark-soft: rgba(255, 255, 255, 0.09); --fv-line-on-dark: rgba(255, 255, 255, 0.13); --fv-line-on-dark-strong: rgba(255, 255, 255, 0.2); /* The status tints a chip needs on a dark ground. The -soft pair further up is mixed for paper and disappears at 10% over indigo. */ --fv-success-on-dark-soft: rgba(95, 224, 160, 0.16); --fv-success-on-dark-line: rgba(95, 224, 160, 0.22); --fv-warn-on-dark-soft: rgba(247, 200, 92, 0.16); /* The accent as atmosphere rather than as a mark: a radial bloom behind a brand-coloured hero. --fv-accent-glow is the opaque form and reads as a dot. */ --fv-accent-glow-wash: rgba(169, 156, 255, 0.22); /* Status text at body weight on PAPER. The -on-accent pair is drawn for a dark ground and scores 1.6:1 against white; the person ramp carries these two values already but means "whose thing this is", not "how it went". */ --fv-success-ink: #166f3e; --fv-warn-ink: #845b0b; /* Two colours this palette does not get to decide: they belong to the marks they draw, and a credential rendered in our indigo is a logo we redrew. Published brand values, from meta.com and about.meta.com/brand/resources. They are deliberately NOT given a semantic role -- folding the green into --fv-success would re-tone a logo the day the success ramp is adjusted. Only ever the mark itself: never a surface, a rule or a label. */ --fv-brand-meta: #0467df; --fv-brand-whatsapp: #25d366; /* ----- WhatsApp chat, as the customer's phone draws it ----- Only for a preview of a message on the customer's screen: the wallpaper, the doodle over it, the grey of the hour inside a bubble, and the phone's bezel. */ --fv-wa-wallpaper: #efeae2; --fv-wa-doodle: rgba(84, 101, 111, 0.07); --fv-wa-time: #667781; --fv-wa-bezel: #e9ebef; /* ----- Semantic ----- */ --fv-success: #1f9d57; --fv-success-soft: rgba(31, 157, 87, 0.10); /* The dashed edge of offerable inventory: a free hour is drawn as an outline waiting to be filled, never as a solid block that looks already taken. */ --fv-success-line: rgba(31, 157, 87, 0.42); --fv-warn: #bf8410; --fv-warn-soft: rgba(191, 132, 16, 0.10); /* The halo a live warning beats into, for a ring that has to be visible against paper. `--fv-warn-soft` is a fill behind text at 0.10 and vanishes as a 4px shadow, so the two are different jobs rather than two strengths of one. */ --fv-warn-glow: rgba(191, 132, 16, 0.30); /* Three hues had no `-line` while success and accent did, so an amber, a red or a blue edge could only be mixed at the use site. The asymmetry was the bug, not the need. All three land at 0.45 because that is what the two red and blue call sites had already mixed by hand, and the amber joins them rather than inventing a fourth strength; success (0.42) and accent (0.24) predate all of it and are left where their own surfaces put them. */ --fv-warn-line: rgba(191, 132, 16, 0.45); --fv-danger: #c0392b; --fv-danger-soft: rgba(192, 57, 43, 0.10); --fv-danger-line: rgba(192, 57, 43, 0.45); /* The ground a tinted CARD stands on. 4% is the weight at which the card reads as "this one is about debt" and not as an alert -- and it is a third job, not a third strength: `-soft` at 0.10 is that same card's BORDER, and `-glyph-arrears-bg` is a flat disc behind a glyph. */ --fv-danger-ground: #fdf7f7; /* ----- Haloed glyph grounds ----- The disc a glyph stands on when it fades before its own edge, which is how a strip gets depth without spending a shadow. The flat form of this job is `--fv-glyph-*-bg`; this is the haloed sibling, and the three neighbours it must not be confused with are `-soft` (0.10, a fill behind text), `-glow` (0.30, a shadow beaten against paper) and `-halo` (0.55, a ring). At 0.28 the core reads as a disc and the fade still reaches the page. Four members because a hue per reading is the whole point. */ --fv-danger-tint: rgba(192, 57, 43, 0.28); --fv-success-tint: rgba(31, 157, 87, 0.28); --fv-warn-tint: rgba(191, 132, 16, 0.28); --fv-accent-tint: oklch(0.56 0.2 280 / 0.28); --fv-info: #2563eb; --fv-info-soft: rgba(37, 99, 235, 0.10); --fv-info-line: rgba(37, 99, 235, 0.45); --fv-pink: #db2777; --fv-pink-soft: rgba(219, 39, 119, 0.10); /* The neutral-informational blue: a service, a booked slot, anything that is neither good news nor bad. It lived in crm-web's own sheet, which is the shape `.claude/rules/ui-bar.md` names — a --fv-* defined inside one app is invisible to the other two, and no gate catches it. */ --fv-cool: oklch(0.62 0.1 230); --fv-cool-soft: oklch(0.62 0.1 230 / 0.12); /* Whose thing this is, at the size where the chip carries initials. Measured, not chosen: white initials on the six saturated `--av-*` score 4.52, 3.93, 4.75, 3.49, 3.22 and 3.13 against white — four of six under the 4.5 a 10-13px bold label needs. Each pair here is the same hue as a ground and as ink, and every one clears 5.2. The saturated value stays for the 8px rail dot, which carries no text and needs the loudest form of the colour it can get — and it lives HERE now, not in crm-web's own sheet: one rule reads a ground, an ink and a ring, and two of the three living in a different package is how a chip ends up two colours after somebody edits one of them. The measurement is of white initials, which is what the booking sheet and the inbox paint; the other sites inherit a darker ink and were never the failing pair. */ --fv-person-1: #7a5af8; --fv-person-2: #0c8f8f; --fv-person-3: #2f6fdb; --fv-person-4: #1f9d57; --fv-person-5: #bf8410; --fv-person-6: #8792a8; --fv-person-1-soft: #ece8fe; --fv-person-1-ink: #6349c9; --fv-person-2-soft: #ddefef; --fv-person-2-ink: #096b6b; --fv-person-3-soft: #e2ebfa; --fv-person-3-ink: #275db8; --fv-person-4-soft: #e0f1e7; --fv-person-4-ink: #166f3e; --fv-person-5-soft: #f6eede; --fv-person-5-ink: #845b0b; --fv-person-6-soft: #eef0f3; --fv-person-6-ink: #5c6372; /* ----- Who does the work ----- Teal names the reception, and nothing else. Indigo already means "press this" everywhere in the panel, so drawing the reception's share of a load in the accent would read as a button rather than as a fact. Ink stays the operator's own share, so the two halves of a bar are told apart by hue without either of them looking clickable. */ --fv-reception: oklch(0.62 0.11 195); --fv-reception-strong: oklch(0.52 0.12 196); --fv-reception-soft: oklch(0.62 0.11 195 / 0.12); /* The same card-ground reasoning as --fv-accent-wash, in teal: the lembrete card of docs/mockups/agenda-composer.png, measured at #f3f9f9. */ --fv-reception-wash: oklch(0.62 0.11 195 / 0.05); --fv-reception-line: oklch(0.62 0.11 195 / 0.28); /* ----- Outside systems, in their own colour ----- A badge that says an event also lives in Google is only believable in Google's blue; drawn in our accent it reads as a Fluxvia feature rather than as another system holding the same hour. Used for provenance marks only, never for anything the operator can press. */ --fv-google: #1a73e8; /* ----- The six marks of the Agenda ----- A colour an operator puts on a card to group their own board. Six, fixed, and NOT semantic: what one means is a word the tenant writes and the rail prints, which is the whole reason they may borrow loaded hues at all. They are a ROLE of their own rather than a use of the status palette. Four point at values that already exist and two carry their own, and the indirection is the point: the day the product moves a mark, one line here changes instead of every card, and --fv-success keeps meaning success. The wheel they had to fit was nearly full. Violet is the brand and an unmarked booking, info blue is an unmarked block, teal is the reception, red is danger and grey is closed -- so --fv-mark-1 is a cerulean deliberately lighter and cooler than --fv-info, and far from the teal at 195, so a booking marked blue is never read as a block. Rosa and ameixa are the tight pair: they separate on lightness and chroma rather than on hue alone, which is what survives a 3px bar. */ --fv-mark-1: oklch(0.6 0.14 235); --fv-mark-2: var(--fv-success); --fv-mark-3: var(--fv-warn); --fv-mark-4: var(--fv-pink); --fv-mark-5: oklch(0.47 0.13 330); --fv-mark-6: var(--fv-ink-soft); /* Read against --fv-danger, never from the mark ORDER above. See Overview. */ --fv-series-held: oklch(0.63 0.15 288); /* A ROW of tinted cards: ground at 5%, the hairline closing it at 16%. A fourth job, not a fourth strength -- `-soft` is a chip's fill. */ --fv-danger-bed: color-mix(in oklab, var(--fv-danger) 5%, var(--fv-surface)); --fv-danger-bed-line: color-mix(in oklab, var(--fv-danger) 16%, var(--fv-surface)); --fv-success-bed: color-mix(in oklab, var(--fv-success) 5%, var(--fv-surface)); --fv-success-bed-line: color-mix(in oklab, var(--fv-success) 16%, var(--fv-surface)); --fv-accent-bed: color-mix(in oklab, var(--fv-accent) 5%, var(--fv-surface)); --fv-accent-bed-line: color-mix(in oklab, var(--fv-accent) 15%, var(--fv-surface)); /* A delta chip, and the pale half of a hatch: a bar over a period still running is striped so a short one reads unfinished, not collapsed. */ --fv-danger-chip: color-mix(in oklab, var(--fv-danger) 11%, var(--fv-surface)); --fv-danger-hatch: color-mix(in oklab, var(--fv-danger) 34%, var(--fv-surface)); --fv-series-held-hatch: color-mix(in oklab, var(--fv-series-held) 34%, var(--fv-surface)); /* The bed a marked card sits on: the same hue at the strength that registers as area without the title having to fight it. Written as a mix over the surface rather than as six more literals, so a mark that moves takes its ground with it and the theme still decides the paper. */ --fv-mark-1-ground: color-mix(in oklch, var(--fv-mark-1) 12%, var(--fv-surface)); --fv-mark-2-ground: color-mix(in oklch, var(--fv-mark-2) 12%, var(--fv-surface)); --fv-mark-3-ground: color-mix(in oklch, var(--fv-mark-3) 12%, var(--fv-surface)); --fv-mark-4-ground: color-mix(in oklch, var(--fv-mark-4) 12%, var(--fv-surface)); --fv-mark-5-ground: color-mix(in oklch, var(--fv-mark-5) 12%, var(--fv-surface)); --fv-mark-6-ground: color-mix(in oklch, var(--fv-mark-6) 12%, var(--fv-surface)); /* ----- Radius ----- */ --fv-radius-sm: 8px; --fv-radius-md: 10px; --fv-radius-lg: 12px; --fv-radius-pill: 999px; /* ----- Elevation (cool-tinted, subtle) ----- */ /* Halos and washes: a status colour thinned to the strength a pulse ring or a hover surface needs. Written once here because the alternative is the same color-mix() spelled out in every component that signals a state, and the literal-colour gate gives a new stylesheet a ceiling of zero. */ /* The five readings of a contact base, as drawn. The values are the artwork's own, unchanged -- they live here rather than inside the SVG because a brand colour hiding in a vector is exactly how the retired terracotta survived in `logo-mark.svg` and reached an Asaas checkout. Moving them changes no pixel and gives the next brand pass one place to find them. */ --fv-glyph-all-bg: #f1ecff; --fv-glyph-all-ink: #5b35f2; --fv-glyph-arrears-bg: #fff1df; --fv-glyph-arrears-ink: #f28c00; --fv-glyph-slipping-bg: #fff6d8; --fv-glyph-slipping-ink: #f2a900; --fv-glyph-dormant-bg: #eef1f6; --fv-glyph-dormant-ink: #667085; --fv-glyph-active-bg: #e7f8ec; --fv-glyph-active-ink: #16a34a; --fv-glyph-active-mark: #ffffff; /* The sixth reading, added with the pre-client view. Rose because hue is what names a reading in this set and every other one is spoken for: orange is arrears, amber is slipping, grey is dormant, green is active, violet is the whole base -- and teal names the reception everywhere else in the panel, so borrowing it here would say the wrong thing twice. */ --fv-glyph-prospect-bg: #fdeef5; --fv-glyph-prospect-ink: #b5407f; /* The bed a contact photo sits on while it loads, and the shape it leaves when there is none. Neutral by construction so it reads as absence, not as state. */ --fv-photo-bed: color-mix(in oklab, var(--fv-ink) 8%, var(--fv-surface)); /* The hours outside a professional's journey, on the agenda grid. The whole hatch rather than its two colours, so the day and the week cannot draw the same fact differently — which is exactly what happened while the material lived in each sheet: the day greyed its evenings and the week did not. Grey here means CLOSED; a journey that exists but is full keeps an ordinary grid. Measured off docs/mockups/agenda-desktop.png: a hairline every 9px, not the 5px band of solid grey it was, which read louder than the commitments it sits behind. */ --fv-closed-hatch: repeating-linear-gradient( 45deg, color-mix(in oklab, var(--fv-ink) 7%, var(--fv-surface)), color-mix(in oklab, var(--fv-ink) 7%, var(--fv-surface)) 1.5px, color-mix(in oklab, var(--fv-ink) 2%, var(--fv-surface)) 1.5px, color-mix(in oklab, var(--fv-ink) 2%, var(--fv-surface)) 9px ); /* The other half of the same statement: the hours a professional DOES work. Barely there on purpose — it says "this is the day" without competing with what is on the day, and the rules at its edges are what the eye reads. */ --fv-success-wash: color-mix(in oklab, var(--fv-success) 5%, transparent); /* An hour taken off the board, ruled in ink rather than in blue. The hatch is the material and the material belongs to the product, so it has to read the same over any of the six marks -- a blue ruling over a green mark says the two are arguing about what the card is. 135deg and not the 58deg the glass etch uses: measured at chip size in the rail, one angle made a block and an external commitment the same material. */ --fv-block-hatch: repeating-linear-gradient( 135deg, color-mix(in oklab, var(--fv-ink) 13%, transparent) 0 1.5px, transparent 1.5px 7px ); /* The hairline inside a colour swatch. A ring rather than a border so the target keeps its size, and neutral so the graphite one does not read as a hole cut in the paper. */ --fv-swatch-ring: color-mix(in oklch, var(--fv-ink) 12%, transparent); --fv-danger-halo: color-mix(in oklab, var(--fv-danger) 55%, transparent); --fv-danger-wash: color-mix(in oklab, var(--fv-danger) 16%, transparent); --fv-success-halo: color-mix(in oklab, var(--fv-success) 55%, transparent); /* The tint an hour taken off the board carries on the agenda grid. It joins the warn ramp rather than opening a fourth status hue, because "unavailable by choice" is the same stance the expired calendar already reads as. */ --fv-warn-wash: color-mix(in oklab, var(--fv-warn) 16%, var(--fv-surface)); /* What a sheet lays over the screen behind it. Three sheets still carry their own rgba of this same ink at 0.32, 0.18 and 0.45, and this token does NOT yet collapse them: moving each is a visible change to a surface outside the work that introduced it. One consumer today, three migrations named. */ --fv-scrim: rgba(26, 31, 54, 0.34); /* The sidebar's raised state, shared by the active row and the balance block that borrows its meaning when the saldo screen is open. Two consumers in two stylesheets, so the recipe is a token and not a copy that drifts. */ --fv-sb-raise: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.06)); --fv-sb-raise-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 2px 8px rgba(0, 0, 0, 0.22); --fv-sb-hover: rgba(255, 255, 255, 0.055); --fv-sb-well: rgba(255, 255, 255, 0.10); --fv-shadow-sm: 0 1px 2px rgba(26, 31, 54, 0.06); --fv-shadow-md: 0 6px 20px rgba(26, 31, 54, 0.08); --fv-shadow-lg: 0 20px 50px rgba(26, 31, 54, 0.13); /* A primary action lifts in its own colour rather than in grey, so the rise on hover reads as the accent coming forward instead of a generic drop shadow. */ --fv-shadow-accent-sm: 0 1px 2px oklch(0.49 0.21 281 / 0.30); --fv-shadow-accent-md: 0 4px 14px oklch(0.49 0.21 281 / 0.34); /* ----- Bevel: depth cut into the page rather than floated over it ----- * * A panel catching light from above needs an inset highlight on its top edge * and, for a recessed well, an inset shadow under it. Both are inset shadows * rather than colours, so a use site consumes the effect and never restates * the white or the shadow ink. */ --fv-bevel-hi: inset 0 1px 0 rgba(255, 255, 255, 0.9); --fv-bevel-hi-strong: inset 0 1px 0 rgba(255, 255, 255, 0.95); --fv-bevel-well: inset 0 1px 2px rgba(26, 31, 54, 0.06); /* ----- Type scale, one step per role ----- * * Every screen invents its own: the catalogue carries ten sizes and the * contact mockup twelve, so the same label is 13px here and 14px there and * nobody can say which is right. Merges round DOWN -- compact is the house * preference, and it keeps the ladder from growing on its own. * * Grows as screens adopt it, never ahead of them: a step with no consumer is a * number nobody agreed to. Adoption is per screen, because substituting the * ladder across a sheet wholesale silently resizes text on screens nobody is * looking at. */ --fv-fs-tag: 10px; --fv-fs-meta: 11px; --fv-fs-ui: 12.5px; --fv-fs-title: 13.5px; /* ===================================================================== * Legacy aliases — kept so existing landing/admin rules resolve unchanged. * Prefer the --fv-* tokens above in any new or redesigned CSS. * ===================================================================== */ --paper: var(--fv-bg); --paper-2: var(--fv-bg-tint); --paper-3: var(--fv-surface); --ink: var(--fv-ink); --ink-soft: var(--fv-ink-soft); --ink-mute: var(--fv-ink-mute); --ink-line: var(--fv-line); --ink-line-strong: var(--fv-line-strong); --fs-tag: var(--fv-fs-tag); --fs-meta: var(--fv-fs-meta); --fs-ui: var(--fv-fs-ui); --fs-title: var(--fv-fs-title); --accent: var(--fv-accent); --accent-soft: var(--fv-accent-soft); --accent-strong: var(--fv-accent-strong); --green: var(--fv-success); --green-soft: var(--fv-success-soft); --amber: var(--fv-warn); --amber-soft: var(--fv-warn-soft); --red: var(--fv-danger); --red-soft: var(--fv-danger-soft); --success: var(--fv-success); --warn: var(--fv-warn); --danger: var(--fv-danger); }