/* ────────────────────────────────────────────────────────────────────────── Vectro Family — token sheet. Drop this at the TOP of internal/web/static/app.css, above the existing component rules, then replace hard-coded hex values in those rules with the variables below. No preprocessor, no build step — this is the whole system. Light is the default. Dark is an explicit override in two directions: the media query honours prefers-color-scheme, and [data-theme] on (written by the parent's own choice, persisted server-side) wins over it. ────────────────────────────────────────────────────────────────────────── */ /* ── Self-hosted type (phase 8) ─────────────────────────────────────────── Figtree ships as ONE variable-font woff2 (wght 300–900 in the file; this @font-face declares the 400–800 range the product actually uses) instead of four static files, so every weight below comes from a single request. Fraunces (the display face) is one static instanced weight, declared 400. Both are self-hosted under internal/web/static/fonts — no external host, ever (see scripts/design-guards.sh external). Reproduce or re-subset with scripts/subset-fonts.sh; internal/web/static/fonts/fonts-manifest.txt?v=a4e60474 records the sha256 of each shipped file and proves ș (U+0219) / ț (U+021B) survive the subset. font-display: swap so first paint is never blocked on the font request. */ @font-face { font-family: "Figtree"; src: url("/static/fonts/figtree-variable.woff2?v=5b75f745") format("woff2-variations"), url("/static/fonts/figtree-variable.woff2?v=5b75f745") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; } /* Fraunces, not the design's Caprasimo: Caprasimo has no Romanian diacritics in any build (upstream TTF and Google's hosted latin-ext both lack Ăă/Șș/Țț, cmap-verified), so the child hero could not be spelled in it. Replacement approved by the product owner 2026-08-05 — decisions record #6 in vectro-goals.md. This is a static Black instance (opsz 144, SOFT 100) served as the face's one weight, the same single-weight contract Caprasimo had. */ @font-face { font-family: "Fraunces"; src: url("/static/fonts/fraunces-display.woff2?v=0c94b8a8") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } :root { /* ── Colour, light ── */ --v-bg: #f5ead8; /* page ground. Nothing is written directly on it. */ --v-paper: #fbf6ec; /* surface for real values */ --v-sunk: #eee4d0; /* table headers, inert strips */ --v-ink: #173f35; /* brand + primary text + the "real" material */ --v-ink-2: #49675f; /* secondary text — 6.3:1 on paper */ --v-ink-3: #516961; /* labels, eyebrows, 9.5–12px notes — 4.7:1 min */ --v-hair: rgba(23,63,53,.16); --v-hair-strong: rgba(23,63,53,.38); --v-edu: #7a8a5e; /* the educational voice. Never on real money. */ --v-edu-ink: #4a5636; /* text on educational tints */ --v-edu-tint: #eef3e0; --v-attn: #8c491a; /* "this is waiting for you" / "this price is old" */ --v-attn-tint: #ffe9d8; /* NOT an error colour */ --v-err: #8a2f25; --v-err-tint: #fbe7e2; --v-ok: #2f6b53; --v-ok-tint: #e2efe6; --v-focus: #c06b2e; /* unchanged: 3px ring, 3px offset */ --v-hatch: rgba(23,63,53,.22); /* the missing-value hatch */ /* ── Shape ── */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 24px; --r-pill: 999px; /* --r-sm/--r-md = parent register (dense, instrument-grade) --r-lg = child register (warm, generous) */ /* ── Space, 4px scale ── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 18px; --s-5: 26px; --s-6: 36px; --s-7: 52px; /* ── Elevation ── */ --e-1: 0 1px 2px rgba(32,30,29,.10); --e-2: 0 3px 10px rgba(32,30,29,.13); --e-3: 0 14px 34px rgba(32,30,29,.20); /* ── Motion ── */ --t-fast: 120ms; --t-mid: 220ms; --t-slow: 420ms; --ease: cubic-bezier(.2,.7,.3,1); /* ── Type ── */ --font-body: "Figtree", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-display: "Fraunces", Georgia, serif; /* child register + landing ONLY */ /* Fluid scale, step ~1.22. Note the page title tops out at 2.6rem, not 6.5rem: the poster headline is kept for the landing page and the child register and removed from every utility form. */ --fs-eyebrow: 0.66rem; --fs-note: 0.72rem; --fs-small: 0.79rem; --fs-body: clamp(0.88rem, 0.85rem + 0.2vw, 0.95rem); --fs-lead: clamp(1rem, 0.95rem + 0.4vw, 1.13rem); --fs-h3: clamp(1.1rem, 1rem + 0.6vw, 1.3rem); --fs-h2: clamp(1.35rem, 1.2rem + 1vw, 1.65rem); --fs-h1: clamp(1.6rem, 1.35rem + 2vw, 2.6rem); --fs-hero: clamp(2.2rem, 1.6rem + 5vw, 3.4rem); /* landing + child h1 */ } /* Money, units, percentages, dates — everywhere, without exception. */ .num { font-variant-numeric: tabular-nums; letter-spacing: -0.005em; } /* A missing value. Never a zero, never a colour swap alone: the hatch has to read as "unknown" in greyscale and at any colour vision. */ .hatch { background-image: repeating-linear-gradient( 135deg, var(--v-hatch) 0 1.5px, transparent 1.5px 6px); } /* ── Dark, in both directions ─────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } :root:not([data-theme="light"]) { --v-bg:#191712; --v-paper:#211f19; --v-sunk:#12110d; --v-ink:#f0e8d8; --v-ink-2:#bdb5a3; --v-ink-3:#8d8677; --v-hair:rgba(240,232,216,.16); --v-hair-strong:rgba(240,232,216,.34); --v-edu:#aebf92; --v-edu-ink:#cddcb4; --v-edu-tint:#282f20; --v-attn:#f6a06b; --v-attn-tint:#3a2617; --v-err:#f0a79b; --v-err-tint:#3a201b; --v-ok:#8ec7ab; --v-ok-tint:#1c2c25; --v-focus:#f6a06b; --v-hatch:rgba(240,232,216,.24); } } :root[data-theme="dark"] { color-scheme: dark; --v-bg:#191712; --v-paper:#211f19; --v-sunk:#12110d; --v-ink:#f0e8d8; --v-ink-2:#bdb5a3; --v-ink-3:#8d8677; --v-hair:rgba(240,232,216,.16); --v-hair-strong:rgba(240,232,216,.34); --v-edu:#aebf92; --v-edu-ink:#cddcb4; --v-edu-tint:#282f20; --v-attn:#f6a06b; --v-attn-tint:#3a2617; --v-err:#f0a79b; --v-err-tint:#3a201b; --v-ok:#8ec7ab; --v-ok-tint:#1c2c25; --v-focus:#f6a06b; --v-hatch:rgba(240,232,216,.24); } /* ── The three materials ────────────────────────────────────────────────── These four rules are the whole four-concepts-must-not-blur answer. Fill, edge, radius and mark are fixed per material, so colour is never the only carrier. Set the class from Go; never hand-style a card. */ .m-real { /* the family's real money — private */ background: var(--v-paper); border: 1px solid var(--v-hair-strong); border-radius: var(--r-sm); } .m-shared { /* the slice of the real a child may see */ background: var(--v-edu-tint); border: 1px dashed var(--v-edu); border-radius: var(--r-sm); } .m-edu { /* the child's virtual, educational money */ background: var(--v-edu-tint); border: 1.5px solid var(--v-edu); border-top-width: 5px; border-radius: var(--r-lg); } /* The mark that travels with an educational amount, so a screenshot torn out of context is still honest. Rendered by the `money` partial, not by hand. */ .edu-mark { font-size: 0.62em; font-weight: 800; vertical-align: super; letter-spacing: .06em; margin-left: 2px; } /* Motion: the existing blanket guarantee stays, so anything added later is disabled for a reader who asked for less movement. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ══ END TOKEN SHEET ══════════════════════════════════════════════════════ Everything below is the product's existing component rules, in their original order, with their comments intact. They now read the tokens above instead of carrying their own hex, radius and spacing values. */ /* Additions the sheet has no name for, kept below it so everything above stays byte-identical to docs/design/vectro-redesign/tokens.css — verify with `head -153 internal/web/static/app.css | diff - docs/design/vectro-redesign/tokens.css`. Each one exists because a rule below needed a value the sheet does not carry. */ :root { /* Text on a --v-ink fill. Paper is ink's opposite in both themes, so this needs no dark override; it is named so the primary button does not look like it is painting its label with a surface colour by accident. */ --v-on-ink: var(--v-paper); /* A quiet raised surface on the page ground: the secondary button, nav hover, the install hint. --v-sunk is the wrong token for these, and wrong only in dark: there it recesses below --v-bg, so a cancel button painted with it becomes the darkest thing on the screen and reads as a hole punched in the page rather than as the quieter of two buttons. In dark, "quiet" is a step lighter than the ground, not darker. */ --v-quiet: var(--v-sunk); /* Layout, outside the 4px space scale by nature: that scale stops at 52px and these are page-sized. Naming them also makes two of the comments below true by construction rather than by promise — .chrome-inner has to repeat .shell's horizontal padding, and its column has to match .shell-narrow's. */ --gutter: clamp(var(--s-4), 5vw, 5rem); /* .shell and every band of chrome */ /* 7vw put the first heading about 90px below the chrome on a desktop window, before the eyebrow and the heading's own margins were counted — airy on a poster, but it spent the top of every screen that has an answer to give. This keeps a comfortable floor on a phone and stops growing early. */ --page-pad-y: clamp(var(--s-5), 2.5vw, var(--s-7)); /* Parent screens are scan surfaces: their first useful answer should stay above the fold, and a card should not spend more height on its frame than on the fact it contains. These are the shared density values for the parent register; child screens keep the base rhythm and their deliberate warmer, more generous spacing. */ --parent-page-pad-y: clamp(var(--s-4), 1.8vw, var(--s-6)); --parent-section-gap: var(--s-4); --parent-card-pad: var(--s-4); --measure: 38rem; /* readable text column: .lead, .fine-print */ --column-max: 48rem; /* .shell-narrow: the child's screens and the pre-auth flow */ --page-max: 72rem; /* every parent screen, and the chrome that aligns to it */ } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --v-quiet: var(--v-paper); } } :root[data-theme="dark"] { --v-quiet: var(--v-paper); } :root { color-scheme: light; font-family: var(--font-body); background: var(--v-bg); color: var(--v-ink); } * { box-sizing: border-box; } body { margin: 0; } /* Content starts at the top. That is the default because it is what all but a handful of screens want: a balance sheet, a ledger or a list is read from its first row, and a column centred inside min-height: 100svh pushes that first row toward the middle of the window on any page shorter than the viewport — which, with the old --page-pad-y on top of it, was most of the space wasted above the fold. .shell-centred is the deliberate exception, and the landing page, the sign-in flow, the PIN screens and the error pages are the whole list: one short statement and one control, which read as composed rather than stranded when they sit in the middle of the window. */ .shell { display: flex; min-height: 100svh; max-width: var(--page-max); margin: 0 auto; padding: var(--page-pad-y) var(--gutter); flex-direction: column; justify-content: flex-start; } .shell-centred { justify-content: center; } .eyebrow { margin: 0 0 var(--s-3); font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: 0.16em; } /* The bottom margin belongs on the heading, not on whatever happens to follow it. With `margin: 0` the spacing below a heading came entirely from .lead's own top margin, so the ten or so forms that have no lead paragraph — most of the portfolio and child-management forms — ran their first field label straight into the heading above it. .shell is a flex column and flex items do not collapse margins, so the rule below zeroes .lead's top margin when it follows a heading. That keeps the gap on lead-bearing pages to one margin rather than the sum of two. The size is --fs-h1, the token the sheet has always carried, and it is the DEFAULT rather than something a page opts into. This rule used to hardcode a 6.5rem poster, which is what the design named as a defect in so many words: "titlul de pagină coboară de la 6.5rem la 2.6rem maxim: afișul de azi arată bine pe pagina de intrare și absurd pe un formular de evaluare". A poster is the exception — see .hero below — so the exception is what carries a class. Phase 3 had fixed this the other way round, with a --fs-h1-parent that only the eighteen mains someone remembered to mark .page-parent ever got; the thirty-eight that were never marked, /portfolio and /children and /orders among them, kept the poster. One default and one opt-in cannot drift apart that way. Line height and tracking come from that same phase-3 rule: they were tuned for a title, and the 0.98/-0.055em they replace was tuned for a poster that no longer renders here. */ h1 { max-width: 24ch; margin: 0 0 var(--s-5); font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -0.03em; } /* The poster headline: the display face on exactly two h1s — the landing and the child register's hero — as README.md names, restored to both once Fraunces replaced Caprasimo (which could not spell ă/ț; see the @font-face note and decisions record #6). The face ships one instanced weight declared 400 — declare it here too, or the browser fakes a bold; the design sets the display face untracked at ~1.06, not the Figtree-tuned negative tracking above. Money is never set in the display face: the money partial does not accept a font override. It is also the only h1 allowed to be poster-sized, and it now says so in its own rule instead of inheriting it: --fs-hero tops out at 3.4rem against the title's 2.6rem. Both are below the 6.5rem this used to inherit — the design draws these two headlines at 40px and 30px, so the poster was over even its own mark. */ .hero { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-hero); letter-spacing: normal; line-height: 1.06; } .lead { max-width: var(--measure); margin: var(--s-6) 0; font-size: var(--fs-lead); line-height: 1.55; color: var(--v-ink-2); } h1 + .lead { margin-top: 0; } /* ── Parent density ─────────────────────────────────────────────────────── The wide shell is the parent register. Keeping this contract on the shared shell means a spacing decision reaches every parent page that uses it, while the narrow shell remains the child/pre-auth register. Local page treatments below may still make a deliberate exception, but they no longer need to repeat the baseline rhythm. */ main.shell:not(.shell-narrow) { --page-pad-y: var(--parent-page-pad-y); } main.shell:not(.shell-narrow) > h1 { margin-bottom: var(--s-4); } main.shell:not(.shell-narrow) > .lead { margin-block: var(--s-4); } main.shell:not(.shell-narrow) > h1 + .lead { margin-top: 0; } main.shell:not(.shell-narrow) > .card:not(.attention-card) { margin-block: var(--parent-section-gap); padding: var(--parent-card-pad); } main.shell:not(.shell-narrow) > .card:not(.attention-card) > h2:not(.attention-head) { margin: 0; font-size: var(--fs-h2); line-height: 1.2; } main.shell:not(.shell-narrow) > .card:not(.attention-card) > .fine-print { margin: 0; } main.shell:not(.shell-narrow) > .card:not(.attention-card) > .item-list { margin-top: 0; } main.shell:not(.shell-narrow) .item-actions { margin-block: var(--s-4); } /* Formerly .status, and renamed because that name is what went wrong. One outlined pill served "there is nothing here yet", "here is a neutral fact" and "this number may be wrong" on 48 sites across the twelve view packages, so a reader could not tell an empty list from a stale price. The states moved out to .state-note (see the ten of them at the foot of this file); what is left here is what a chip actually is — a short, inert label: a currency a form cannot change, a visibility, a lifecycle word. It is not interactive and must not look it. */ .chip { align-self: flex-start; display: inline-flex; align-items: center; border: 1px solid var(--v-hair-strong); border-radius: var(--r-pill); padding: var(--s-3) var(--s-4); font-size: 0.85rem; font-weight: 700; } .shell-narrow { max-width: var(--column-max); } .stack { display: grid; width: min(100%, 34rem); gap: var(--s-3); } label { font-weight: 750; } /* A read-only value shown beside a form's fields — a currency chip, not an input — needs a name, not a