/* ============================================================ design-tokens.css — MyBAIBS House Design System (v1.1) Identity: evolved-neon / Tron. Dark-first. SOURCE OF TRUTH. One canonical value per concept — no drift. Visual reference: references/design-lab.html Usage 1. Import once at the app root (e.g. index.css / main entry): @import "./design-tokens.css"; 2. Set the app on the root element: (office | carmela | lucia | staicee | aimie) 3. Style EVERYTHING with var(--token). Never inline a raw hex, px size, radius, shadow, or duration. If a value you need is not here, ADD a token — do not hardcode a one-off. ============================================================ */ :root { /* --- Surfaces (dark-first; step void -> elevated) --- */ --bg-void: #070B14; /* app background, deepest */ --bg-base: #0B1220; /* default page surface */ --bg-surface: #0E1626; /* cards, panels */ --bg-elevated: #16203A; /* raised cards, modals, popovers */ --bg-inset: #060A12; /* wells, code blocks, table headers */ --scrim: rgba(7,11,20,0.74); /* --- Lines / borders --- */ --border-subtle: #1B2942; --border-default: #25395C; --border-strong: #33507F; /* --- Text --- */ --text-primary: #E6F0FF; --text-secondary: #9FB2D0; --text-muted: #6B7E9E; --text-faint: #475A78; --text-on-accent: #04121B; /* text sitting on a filled accent */ /* --- Neon brand palette (also the Library category colors) --- */ --cyan: #2DE2FF; --magenta: #FF2E88; --violet: #9B5CFF; --amber: #FFC24B; --green: #3DF5A0; --red: #FF4D6D; /* --- Semantic aliases --- */ --info: var(--cyan); --success: var(--green); --warning: var(--amber); --danger: var(--red); /* --- Per-app accent (each app overrides ONE var; see bottom) --- */ --app-accent: var(--cyan); --app-accent-soft: color-mix(in srgb, var(--app-accent) 16%, transparent); --app-accent-dim: color-mix(in srgb, var(--app-accent) 40%, var(--bg-surface)); /* --- Library category colors (meaning is FIXED; never remap) --- */ --cat-global: var(--red); /* GLOBAL */ --cat-business: var(--cyan); /* BUSINESS */ --cat-apa: var(--magenta); /* AGENT POWERED APPS */ --cat-infra: var(--violet); /* SHARED INFRASTRUCTURE */ --cat-agents: var(--green); /* AGENT WORKFORCE */ /* --- Type --- */ /* Sora = clean UI face. JetBrains Mono = data/IDs/numbers. Both are single tokens; swap here only (e.g. Geist) to re-font everything. */ --font-ui: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --text-xs: 0.75rem; /* 12 — captions, mono labels */ --text-sm: 0.8125rem; /* 13 — secondary / dense UI */ --text-md: 0.9375rem; /* 15 — body */ --text-lg: 1.125rem; /* 18 — lead */ --text-xl: 1.5rem; /* 24 — section heading */ --text-2xl: 2rem; /* 32 — page title */ --text-3xl: 3rem; /* 48 — hero (admin) */ --text-4xl: clamp(2.75rem, 6vw, 4.5rem); /* hero (public) */ /* Premium-grammar display steps (v1, STAICEE passes) */ --text-display: clamp(2.9rem, 6.5vw, 4.75rem); /* editorial headline */ --text-display-num: clamp(3.4rem, 9vw, 6.5rem); /* hero focal numeral */ --text-display-hand: clamp(1.6rem, 4.6vw, 3.4rem); /* card-glyph focal (Best Hand) */ --lh-tight: 1.1; --lh-snug: 1.3; --lh-body: 1.55; /* --- Spacing (4px base) --- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px; /* --- Radius --- */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px; /* --- Elevation (dark ambient shadow + neon glow) --- */ --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 4px 16px rgba(0,0,0,.45); --shadow-3: 0 16px 48px rgba(0,0,0,.55); --glow-accent: 0 0 0 1px color-mix(in srgb, var(--app-accent) 55%, transparent), 0 0 18px color-mix(in srgb, var(--app-accent) 38%, transparent); --glow-focus: 0 0 0 2px var(--bg-void), 0 0 0 4px color-mix(in srgb, var(--app-accent) 70%, transparent), 0 0 16px color-mix(in srgb, var(--app-accent) 45%, transparent); --glow-text: 0 0 28px color-mix(in srgb, var(--app-accent) 34%, transparent); /* hero focal — the one text glow per screen */ /* --- Atmosphere (public-register hero backdrop; v1, STAICEE passes) --- */ --aurora-core: color-mix(in srgb, var(--app-accent) 17%, transparent); /* accent lobe */ --aurora-halo: color-mix(in srgb, var(--app-accent) 7%, transparent); /* soft halo */ --aurora-cool: color-mix(in srgb, var(--cyan) 13%, transparent); /* cool counterpart lobe (cyan reads brighter — lower %) */ /* --- Charts (v1, STAICEE passes) --- */ --chart-compare: color-mix(in srgb, var(--cyan) 55%, var(--text-muted)); /* comparison-series stroke — subordinate, never a second accent */ /* --- Podium metals (rank 1/2/3; v1, STAICEE passes) --- */ --metal-gold: var(--amber); --metal-silver: #C9D4E0; --metal-bronze: #C98A5E; /* --- Mask stencil (v1.1, STAICEE lobby run 2026-08-20) --- */ /* A CSS mask reads only the ALPHA channel, so this is not a colour: it is "fully opaque", the paint that means KEEP in a mask gradient. It exists as a token so a mask can be written without a raw literal on the line. */ --mask-solid: #000; /* --- Motion --- */ --ease: cubic-bezier(.2,.8,.2,1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 360ms; } /* ============================================================ Per-app accent overrides — the ONLY per-app delta. Everything else (surfaces, text, spacing, type) is shared. ============================================================ */ [data-app="office"] { --app-accent: var(--cyan); } [data-app="carmela"] { --app-accent: var(--magenta); } [data-app="lucia"] { --app-accent: var(--violet); } [data-app="staicee"] { --app-accent: var(--green); } [data-app="aimie"] { --app-accent: var(--amber); } /* Optional global niceties — safe defaults, override per app as needed */ :focus-visible { outline: none; box-shadow: var(--glow-focus); border-radius: var(--r-sm); } ::selection { background: color-mix(in srgb, var(--app-accent) 30%, transparent); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } [data-app="mybaibs"] { --app-accent: var(--cyan); } /* ============================================================ added landing-brand — mybaibs.com brand alignment (2026-09-03). Supersedes the "added landing-v2" block. App-scoped additions only; the canonical v1.1 block above is untouched, byte for byte. Lines carried over unchanged from landing-v2 keep their original "added landing-v2" tag; every new or changed line is tagged "added landing-brand". The brand pair is taken from logo.png, not from the legacy .brand gradient stops: the logo's modal blue #2D8AFF and modal pink #FF389C differ from #4A9EF5 / #E94B8A by OKLab dE 0.063 and 0.053 — about three just-noticeable steps — so per spec the LOGO wins. The surface ramp is re-derived in the login field's hue (h 273.2 deg, the darkest stop of the legacy body gradient) with the canonical steps' exact OKLCH lightness deltas. ============================================================ */ [data-app="mybaibs"] { /* --- Brand pair (from logo.png) --------------------------------------------------------- */ --mb-blue: #2D8AFF; /* added landing-brand — logo modal blue, 26.61% of opaque px */ --mb-pink: #FF389C; /* added landing-brand — logo modal pink, 21.76% of opaque px */ --mb-gradient: linear-gradient(to right, var(--mb-blue), var(--mb-pink)); /* added landing-brand — the login .brand angle */ --mb-gradient-hover: linear-gradient(to right, color-mix(in srgb, var(--mb-blue) 92%, var(--text-primary)), color-mix(in srgb, var(--mb-pink) 92%, var(--text-primary))); /* added landing-brand — 8% lift, both stops stay >= 3:1 on white */ --app-accent: var(--mb-blue); /* added landing-brand — overrides the canonical cyan for this app */ --app-accent-2: var(--mb-pink); /* added landing-brand — the pair's second half; only where the brand rules allow */ --text-on-gradient: #FFFFFF; /* added landing-brand — text sitting on --mb-gradient */ /* --- Surfaces re-derived in the login field's hue ---------------------------------------- */ /* --bg-void is the darkest stop of the legacy body gradient (#0a0e27). Every other step keeps that hue and chroma and moves by the canonical ramp's own OKLCH lightness delta: base +0.0331, surface +0.0513, elevated +0.0988, inset -0.0057, border-subtle +0.1315, border-default +0.1957, border-strong +0.2817. */ --bg-void: #0A0E27; /* added landing-brand — L 0.1768 C 0.0512 h 273.2 */ --bg-base: #111630; /* added landing-brand */ --bg-surface: #151A34; /* added landing-brand */ --bg-elevated: #202641; /* added landing-brand */ --bg-inset: #090D26; /* added landing-brand */ --border-subtle: #272E4A; /* added landing-brand */ --border-default: #373F5C; /* added landing-brand */ --border-strong: #4E5675; /* added landing-brand */ /* --- Atmosphere: the two hero lobes become the brand pair -------------------------------- */ --aurora-core: color-mix(in srgb, var(--mb-blue) 20%, transparent); /* added landing-brand */ --aurora-cool: color-mix(in srgb, var(--mb-pink) 14%, transparent); /* added landing-brand — pink reads hotter, so it stays the weaker lobe, as on /login */ /* --- The login field's grid --------------------------------------------------------------- */ --grid-line: rgba(255,255,255,0.02); /* added landing-brand — the legacy body::before line colour, at its opacity */ --grid-line-floor: rgba(255,255,255,0.06); /* added landing-brand — same white, stronger, for the hero floor */ --grid-cell: 60px; /* added landing-brand — the legacy body::before cell */ /* --- Wordmark ------------------------------------------------------------------------------ */ --font-wordmark: 'Orbitron', var(--font-ui); /* added landing-brand — already in the static head; no new font request */ --track-wordmark: -0.03em; /* added landing-brand — the legacy .brand letter-spacing */ /* --- Inputs: the login's field colours, re-expressed as tokens ---------------------------- */ --input-bg: rgba(255,255,255,0.08); /* added landing-brand — legacy .form-input background */ --input-border: rgba(255,255,255,0.2); /* added landing-brand — legacy .form-input border */ /* --- Type step added for the primary button ---------------------------------------------- */ --text-btn: 1.1667rem; /* added landing-brand — 18.67px; at weight 700 this is WCAG "large text" (3:1) */ /* --- Layout / motion, carried from landing-v2 unchanged ---------------------------------- */ --measure-page: 1120px; /* added landing-v2 — page content width */ --measure-text: 62ch; /* added landing-v2 — reading paragraph cap */ --measure-display: 15ch; /* added landing-v2 — hero H1 wrap cap */ --nav-h: 64px; /* added landing-v2 — sticky nav height + anchor offset */ --hero-min: 72vh; /* added landing-v2 — hero minimum height */ --dur-ambient: 48s; /* added landing-v2 — atmosphere rotation period (>= 40s) */ --perspective-floor: 640px; /* added landing-v2 — grid-floor perspective depth */ --track-tight: -0.02em; /* added landing-v2 — display tracking */ --track-wide: 0.12em; /* added landing-v2 — mono label tracking (= the login .tagline tracking) */ --nav-scrim: var(--bg-surface); /* added landing-brand — scrolled nav; v2b's 92% scrim let the section behind it read through the bar (verified on the live v2b page), so it is now opaque */ } /* ============================================================ added landing-buttons — primary-button gradient sweep (2026-09-03). Mirrors the /login .form-btn motion exactly in shape (3-stop 135deg ramp, 200% 200%, 0%->100%->0% background-position travel, 7s, ease, infinite) with the brand pair in place of the legacy --blue/--pink. ============================================================ */ [data-app="mybaibs"] { --mb-gradient-loop: linear-gradient(135deg, var(--mb-blue), var(--mb-pink), var(--mb-blue)); /* added landing-buttons — the login .form-btn gradient, brand stops */ --dur-gradient-loop: 7s; /* added landing-buttons — the login .form-btn animation-duration */ --ease-gradient-loop: ease; /* added landing-buttons — the login .form-btn animation-timing-function */ /* Hover keeps the existing 8% lift toward --text-primary, re-expressed on the loop's shape so hovering changes brightness only and never the ramp's geometry. */ --mb-gradient-loop-hover: linear-gradient(135deg, color-mix(in srgb, var(--mb-blue) 92%, var(--text-primary)), color-mix(in srgb, var(--mb-pink) 92%, var(--text-primary)), color-mix(in srgb, var(--mb-blue) 92%, var(--text-primary))); /* added landing-buttons */ } /* ============================================================ added authed-shell — the SPA shell (2026-09-03). design-tokens.css and the three faces now load on EVERY route, so the authed and pre-auth views style from tokens instead of their own literals. These are the values that shell needs and the canonical v1.1 block above does not carry. App-scoped additions only; the canonical body of this file is untouched, byte for byte, as are the landing-brand and landing-buttons blocks. Nothing here re-declares an existing token. ============================================================ */ [data-app="mybaibs"] { /* --- Hairline: the one border width the shell draws ---------------------- */ --bw: 1px; /* added authed-shell */ /* --- Type steps beyond the canonical scale ------------------------------- */ --text-2xs: 0.6875rem; /* added authed-shell — 11px, the version chip + mono micro-labels */ --text-wordmark: clamp(2.6rem, 6vw, 3.6rem); /* added authed-shell — the auth card's Orbitron wordmark */ --text-wordmark-sm: clamp(1.75rem, 4vw, 2.4rem); /* added authed-shell — the same wordmark on an authed view */ /* --- Measures ------------------------------------------------------------ */ --measure-auth: 540px; /* added authed-shell — the auth column */ --measure-form: 400px; /* added authed-shell — form field column */ --measure-tools: 440px; /* added authed-shell — dashboard tool list */ --measure-settings: 800px; /* added authed-shell — settings page column */ --measure-settings-body: 720px; /* added authed-shell — settings card column */ --measure-admin: 960px; /* added authed-shell — admin table column */ --measure-modal: 520px; /* added authed-shell — modal width cap */ --measure-pending: 420px; /* added authed-shell — pending card cap */ --measure-field-label: 180px; /* added authed-shell — settings label column */ /* --- Fixed-geometry pieces ----------------------------------------------- */ --mark-auth: 280px; /* added authed-shell — the auth card's MB mark */ --avatar: 120px; /* added authed-shell — profile photo circle */ --logo-box: 220px; /* added authed-shell — company-logo well */ --logo-img-w: 200px; /* added authed-shell */ --logo-img-h: 120px; /* added authed-shell */ --atmo-w: 900px; /* added authed-shell — the shell's single backdrop lobe */ --atmo-h: 700px; /* added authed-shell */ /* --- Accent used as TEXT ------------------------------------------------- */ /* --app-accent on --app-accent-soft (the accent at 16% over --bg-surface) measures 4.01:1 — under 4.5:1 for normal text. This step lifts the accent 30% toward --text-primary, which reads as the same accent and measures 5.57:1 on that tint and 8.0:1 on --bg-void. Use it wherever the accent is the TEXT colour. */ --accent-text: color-mix(in srgb, var(--mb-blue) 70%, var(--text-primary)); /* added authed-shell */ /* --- Motion -------------------------------------------------------------- */ --dur-enter: 520ms; /* added authed-shell — the shell's fade-up entrance */ --dur-pulse: 2500ms; /* added authed-shell — the .status dot pulse */ /* --- Third-party marks --------------------------------------------------- */ /* Microsoft and Google identity colours. These are the vendors' marks, not MyBAIBS colour: they are tokenised so no rule carries a literal, but they are deliberately NOT mapped onto the brand pair or the semantic ramp. */ --brand-ms: #0078D4; /* added authed-shell */ --brand-ms-tint: color-mix(in srgb, var(--brand-ms) 18%, transparent); /* added authed-shell */ --brand-ms-text: #5DADE2; /* added authed-shell — the readable text weight on --bg-surface */ --brand-gg: #D93025; /* added authed-shell */ --brand-gg-tint: color-mix(in srgb, var(--brand-gg) 18%, transparent); /* added authed-shell */ --brand-gg-text: #EF7B6F; /* added authed-shell — the readable text weight on --bg-surface */ } /* landing-reference-r1: additive home-only dimensions and readable type. */ [data-app="mybaibs"] .lp:not(.pp) { --lp-frame: 1280px; --lp-body: 1rem; --lp-list: .9375rem; --lp-detail: .875rem; --lp-compare-title: 2rem; --lp-compare-title-wide: 2.375rem; --lp-contact-title: 2.375rem; --lp-contact-title-wide: 3.25rem; --lp-section-title: 2.75rem; --lp-principle-title: 1.1875rem; --lp-submit-text: 1.25rem; --lp-submit-height: 3.5rem; --lp-textarea: 7.5rem; --lp-cluster: 22rem; --lp-message-width: 10rem; --lp-message-height: 7.5rem; --lp-stage-rail: 11rem; --lp-stage-phone: 4.5rem; } [data-app="mybaibs"] .lp:not(.pp) { --lp-target: 44px; --lp-phone-nav: 5.75rem; } /* landing-reference-r2: additive, home-scoped reference surface and artwork palette. */ [data-app="mybaibs"] .lp:not(.pp) { --lp-r2-canvas: #0A0E27; --lp-r2-section: #0C132C; --lp-r2-lift: #121D37; --lp-r2-input: #1C2842; --lp-r2-warm: #18182F; --lp-r2-border: #344767; --lp-r2-chip: #101A32; --lp-r2-quiet: #BDCCE5; --lp-r2-grid: rgba(100,145,210,.025); --lp-r2-blue-halo: rgba(45,138,255,.09); --lp-r2-pink-halo: rgba(255,56,156,.065); --lp-r2-perimeter: linear-gradient(120deg,var(--mb-blue),#7772CB 58%,var(--mb-pink)); --lp-r2-art-max: 800px; --lp-r2-small-max: 400px; --lp-r2-label: .8125rem; }