/* ========================================================================== tokens.css — the whole design system Locked by brand: the mgmnt.work wordmark and the teal accent. Everything else here is new. ACCENT BUDGET. The teal is the only hue with brand meaning, so it is rationed: the two wordmarks, the primary CTA, links, and a handful of in-frame data highlights. It is never a section background, never a heading colour, never a border. Restraint is what makes the page read as clean. ========================================================================== */ :root { /* --- type families ----------------------------------------------------- Geist, the same face the app runs on — the page and the product should not introduce themselves in two different voices, and the mock frames here are drawings OF the app, so they read as fake the moment their type diverges from it. Geist Mono keeps data and eyebrows. --font-display stays a separate token from --font-sans even though both name Geist: the rules that read it carry heading weight and tracking, and a display face may come back. --font-brand is the ONE locked family. The mgmnt.work wordmark is a fixed piece of brand construction, not typography the page owns, so it keeps Space Grotesk whatever the text face is. Nothing but .brand may read it. */ --font-brand: 'Space Grotesk', ui-sans-serif, -apple-system, system-ui, sans-serif; --font-display: 'Geist', ui-sans-serif, -apple-system, system-ui, sans-serif; --font-sans: 'Geist', ui-sans-serif, -apple-system, system-ui, sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* --- type scale ------------------------------------------------------- */ /* 60, not 64. The hero's longest line ("one system it can") measures 486.6px in Geist against a 460px column at 64px, so it breaks to a fifth row and shoves the CTAs down; Red Hat Display fit the same line by 1.7px, which is how narrow the margin always was. 60px brings it to ~456px and the hero back to four lines. If the headline copy or the column width changes, re-measure — this number is tuned to one specific line. */ --t-display: clamp(40px, 4.9vw, 60px); --t-h2: clamp(26px, 3.1vw, 34px); --t-h3: 20px; --t-lead: clamp(17px, 1.5vw, 20px); --t-body: 16px; --t-cap: 13.5px; --t-eyebrow: 11.5px; /* in-frame data sizes — the mock UI runs tighter than the page */ --t-fr: 12.5px; --t-fr-sm: 11px; --t-fr-lg: 17px; /* --- rhythm ----------------------------------------------------------- */ --maxw: 1180px; --gutter: 24px; --sec-gap: 128px; --measure: 62ch; /* hard cap on text line length, independent of container */ /* --- radii ------------------------------------------------------------ */ --r-frame: 12px; --r-card: 14px; --r-chip: 6px; --r-xs: 4px; --ease: cubic-bezier(0.22, 1, 0.36, 1); /* --- light palette ---------------------------------------------------- */ --ink: #0E1A19; /* headlines, wordmark "mgmnt" */ --paper: #F7F8F7; /* page */ --panel: #FFFFFF; /* frames, cards */ --sunk: #EFF1F0; /* toolbars, table headers, inset fills */ --body: #3A4644; /* running copy — 9.1:1 on paper */ --muted: #55625F; /* secondary — 5.9:1 on paper */ --faint: #67736F; /* metadata, eyebrows — 4.6:1 on paper */ --border: #E4E9E7; --border-2: #D2DAD8; --accent: #10756A; --accent-2: #22B8A3; /* hover only */ --accent-fg: #F7F8F7; /* text on an accent fill */ --accent-soft: rgba(16, 117, 106, 0.08); /* data sentiment. Deliberately NOT the accent, and used only where a delta is the actual point — elsewhere direction is carried by a glyph in muted text, so frames stay quiet. */ --up: #1F7A4D; --down: #B0503E; --shadow-frame: 0 1px 2px rgba(14, 26, 25, 0.04), 0 12px 32px -12px rgba(14, 26, 25, 0.10); --focus: var(--accent-2); } /* --- dark ---------------------------------------------------------------- */ [data-theme="dark"] { --ink: #F2F5F4; --paper: #0A1211; --panel: #101A19; --sunk: #060D0C; --body: #B3C1BE; --muted: #7F8F8C; --faint: #74837E; /* was #66756F — 3.9:1, under AA for 11.5px eyebrows */ --border: rgba(180, 200, 196, 0.12); --border-2: rgba(180, 200, 196, 0.20); --accent: #5FE3CF; --accent-2: #22B8A3; --accent-fg: #06110F; --accent-soft: rgba(95, 227, 207, 0.12); --up: #4FCFA8; --down: #E2836B; --shadow-frame: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -12px rgba(0, 0, 0, 0.55); } /* ========================================================================== FRAME TOKENS Every product mockup reads only these, never the page tokens directly. That indirection is what lets one frame vocabulary sit on paper, on a dark section, and in dark theme without a single per-context override. ========================================================================== */ :root, [data-theme="dark"] { --fr-bg: var(--panel); --fr-bg-2: var(--sunk); --fr-side: var(--sunk); --fr-line: var(--border); --fr-line-2: var(--border-2); --fr-text: var(--ink); --fr-text-2: var(--body); --fr-text-3: var(--muted); --fr-text-4: var(--faint); --fr-accent: var(--accent); --fr-soft: var(--accent-soft); --fr-up: var(--up); --fr-down: var(--down); --fr-fill: color-mix(in srgb, var(--ink) 8%, transparent); } /* A section that is dark regardless of theme (§8, governance). Re-points the page tokens rather than restyling anything, so frames follow automatically. */ .sec--dark { --ink: #F2F5F4; --paper: #0A1211; --panel: #101A19; --sunk: #060D0C; --body: #B3C1BE; --muted: #7F8F8C; --faint: #74837E; --border: rgba(180, 200, 196, 0.12); --border-2: rgba(180, 200, 196, 0.20); --accent: #5FE3CF; --accent-fg: #06110F; --accent-soft: rgba(95, 227, 207, 0.12); --up: #4FCFA8; --down: #E2836B; --shadow-frame: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -12px rgba(0, 0, 0, 0.55); } /* In dark theme the band would otherwise equal the page background and read as nothing at all. Recess it rather than lighten it, so the frame still lifts. */ [data-theme="dark"] .sec--dark { --paper: #04100E; --sunk: #020807; } @media (max-width: 860px) { :root { --sec-gap: 72px; --gutter: 20px; } }