/* ============================================================================ * VAGANZA STAFF DESIGN SYSTEM — vg.css (v2 — "Flamingo redesign" palette) * Served publicly at https://app.vaganza.mt/vg.css * * Every staff app under vaganza.mt links this file: * * * * HOW TO CHANGE THE LOOK OF EVERY APP AT ONCE: * 1. Edit the TOKENS block below. * 2. Deploy: cd ~/Projects/flamingo-app-launcher && vercel --prod * 3. All apps pick it up within ~5 minutes (cache TTL) — no app redeploys. * * v2 (2026-07-03): tokens lifted from John's Claude Design housekeeping * redesign — refined pink #F42C8B + teal #0EA891, one typeface (Geist, * tabular numerals), harmonized status colors. The housekeeping app carries * these natively; other staff apps consume them from here. * NOTE: dark-mode token blocks exist below, but consumer apps stay light * until each one's local styles are fully tokenized (housekeeping has its * own native dark mode). Don't add a dark toggle to an app that still has * hardcoded light colors. * ========================================================================== */ /* Typeface — Geist (Google Fonts), replaces the old Fontshare kit */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800;900&display=swap'); /* ============================== TOKENS ==================================== * EDIT ME — this block is the design system. Values are verbatim from the * redesign (flamingo-hk-redesign.dc.html). */ :root { /* surfaces */ --vg-bg: #F1F3F5; --vg-surface: #FFFFFF; /* cards / panels */ --vg-panel-2: #F4F6F8; /* inset surfaces: chips, segmented controls */ --vg-border: #E6E9ED; /* text */ --vg-ink: #14161A; --vg-ink-2: #59616D; --vg-ink-3: #949BA6; /* brand */ --vg-brand: #F42C8B; /* flamingo pink — wordmarks */ --vg-teal: #0EA891; /* primary action */ --vg-teal-press: #0C9580; --vg-teal-ink: #0A7D6C; --vg-teal-soft: #DCF1EB; --vg-blue: #2563EB; --vg-blue-press: #1E54CC; --vg-accent: var(--vg-teal); /* default accent — overridden per app below */ /* status system (fill / ink / dot) */ --vg-todo-fill:#EBEEF1; --vg-todo-ink:#59616D; --vg-todo-dot:#C2C8D0; --vg-wip-fill:#FAEFD8; --vg-wip-ink:#8A5A0E; --vg-wip-dot:#F59E0B; --vg-insp-fill:#E7EDFF; --vg-insp-ink:#1D4FBF; --vg-insp-dot:#2F6BFF; --vg-done-fill:#DCF1EB; --vg-done-ink:#0A7D6C; --vg-done-dot:#0EA891; --vg-block-fill:#FCE3E9; --vg-block-ink:#C41F45; --vg-block-dot:#F0435F; --vg-live-fill:#E6F5F0; --vg-live-border:#CDE9E1; --vg-live-ink:#0A7D6C; --vg-live-dot:#10B39A; /* type */ --vg-font: 'Geist','Helvetica Neue','Helvetica',Arial,system-ui,sans-serif; --vg-font-display: var(--vg-font); /* one typeface — weight does the work */ --vg-font-body: var(--vg-font); /* shape + depth */ --vg-radius: 20px; /* cards */ --vg-radius-sm: 14px; /* buttons */ --vg-radius-xs: 9px; /* chips */ --vg-shadow: 0 1px 2px rgba(16,24,40,.05), 0 14px 30px -22px rgba(16,24,40,.30); --vg-shadow-teal: 0 8px 18px -12px rgba(14,168,145,.55); /* controls */ --vg-tap: 44px; } /* Per-app accents — one place to give each app its personality */ [data-vg-app="hub"] { --vg-accent: #F42C8B; } [data-vg-app="housekeeping"] { --vg-accent: #0EA891; } [data-vg-app="id"] { --vg-accent: #2563EB; } /* hotel ID */ [data-vg-app="id-apts"] { --vg-accent: #5145E6; } /* apartments ID */ [data-vg-app="events"] { --vg-accent: #F42C8B; } [data-vg-app="touchup"] { --vg-accent: #F59E0B; } [data-vg-app="breakfast"] { --vg-accent: #F59E0B; } /* Dark theme tokens (verbatim from the redesign). Consumers stay light for * now — these apply only when an app explicitly sets data-theme="dark" AND * has tokenized all its local styles. */ [data-theme="dark"] { --vg-bg:#0E1116; --vg-surface:#171A20; --vg-panel-2:#1E232B; --vg-border:#282E38; --vg-ink:#F1F4F7; --vg-ink-2:#A4ABB8; --vg-ink-3:#6C7480; --vg-brand:#FF4DA3; --vg-teal:#12B79E; --vg-teal-press:#0FA88F; --vg-teal-ink:#4FD6BE; --vg-teal-soft:rgba(18,183,158,.16); --vg-blue:#3B76FF; --vg-blue-press:#2E63E6; --vg-shadow:0 1px 2px rgba(0,0,0,.4),0 14px 30px -20px rgba(0,0,0,.55); --vg-todo-fill:rgba(255,255,255,.06); --vg-todo-ink:#9BA3AF; --vg-todo-dot:#525A67; --vg-wip-fill:rgba(245,158,11,.15); --vg-wip-ink:#F6B94F; --vg-wip-dot:#F59E0B; --vg-insp-fill:rgba(59,118,255,.18); --vg-insp-ink:#8FB0FF; --vg-insp-dot:#3B76FF; --vg-done-fill:rgba(18,183,158,.16); --vg-done-ink:#4FD6BE; --vg-done-dot:#12B79E; --vg-block-fill:rgba(240,67,95,.17); --vg-block-ink:#FF8398; --vg-block-dot:#F0435F; --vg-live-fill:rgba(18,183,158,.14); --vg-live-border:rgba(18,183,158,.3); --vg-live-ink:#4FD6BE; --vg-live-dot:#12B79E; } /* ============================ COMPONENTS ================================== * Built ONLY from tokens. Styles only .vg-* classes — linking this file * cannot break an app that doesn't use them yet. */ .vg-body { background: var(--vg-bg); color: var(--vg-ink); font-family: var(--vg-font); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; } .vg-display { font-family: var(--vg-font); font-weight: 800; letter-spacing: -.025em; } .vg-wordmark { font-family: var(--vg-font); font-weight: 800; letter-spacing: -.025em; color: var(--vg-brand); } .vg-card { background: var(--vg-surface); border: 1px solid var(--vg-border); border-radius: var(--vg-radius); box-shadow: var(--vg-shadow); } .vg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--vg-tap); padding: 0 18px; background: var(--vg-teal); color: #fff; border: 0; border-radius: var(--vg-radius-sm); font: 700 15px/1 var(--vg-font); cursor: pointer; text-decoration: none; box-shadow: var(--vg-shadow-teal); transition: background .15s ease, transform .05s ease; } .vg-btn:hover { background: var(--vg-teal-press); } .vg-btn:active { transform: translateY(1px); } .vg-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; } .vg-btn--accent { background: var(--vg-accent); box-shadow: none; } .vg-btn--blue { background: var(--vg-blue); box-shadow: 0 8px 18px -12px rgba(37,99,235,.5); } .vg-btn--blue:hover { background: var(--vg-blue-press); } .vg-btn--ghost { background: transparent; color: var(--vg-ink); border: 1px solid var(--vg-border); box-shadow: none; } .vg-btn--ghost:hover { background: var(--vg-panel-2); } .vg-btn--danger { background: var(--vg-block-dot); box-shadow: none; } .vg-input { width: 100%; min-height: var(--vg-tap); padding: 0 14px; background: var(--vg-surface); color: var(--vg-ink); border: 1px solid var(--vg-border); border-radius: var(--vg-radius-sm); font: 500 15px/1.2 var(--vg-font); } .vg-input:focus { outline: 2px solid var(--vg-accent); outline-offset: -1px; border-color: transparent; } .vg-input::placeholder { color: var(--vg-ink-3); } .vg-chip { display: inline-flex; align-items: center; gap: 6px; height: 27px; padding: 0 10px; border-radius: var(--vg-radius-xs); background: var(--vg-panel-2); border: 1px solid var(--vg-border); font: 600 11px/1 var(--vg-font); color: var(--vg-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Status pills — the redesign's room-card pill language */ .vg-pill { display: inline-flex; align-items: center; gap: 6px; height: 25px; padding: 0 11px; border-radius: 999px; font: 700 10.5px/1 var(--vg-font); letter-spacing: .07em; background: var(--vg-todo-fill); color: var(--vg-todo-ink); } .vg-pill--wip { background: var(--vg-wip-fill); color: var(--vg-wip-ink); } .vg-pill--insp { background: var(--vg-insp-fill); color: var(--vg-insp-ink); } .vg-pill--done { background: var(--vg-done-fill); color: var(--vg-done-ink); } .vg-pill--block { background: var(--vg-block-fill); color: var(--vg-block-ink); } .vg-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .vg-badge { /* back-compat alias of the pill look, block-level tints */ display: inline-block; padding: 3px 9px; border-radius: 7px; font: 700 11px/1.5 var(--vg-font); text-transform: uppercase; letter-spacing: .04em; background: var(--vg-todo-fill); color: var(--vg-todo-ink); } .vg-badge--red { background: var(--vg-block-fill); color: var(--vg-block-ink); } .vg-badge--amber { background: var(--vg-wip-fill); color: var(--vg-wip-ink); } .vg-badge--green { background: var(--vg-done-fill); color: var(--vg-done-ink); } .vg-badge--blue { background: var(--vg-insp-fill); color: var(--vg-insp-ink); } .vg-live { display: inline-flex; align-items: center; gap: 5px; background: var(--vg-live-fill); border: 1px solid var(--vg-live-border); border-radius: 999px; padding: 4px 9px; font: 700 9.5px/1 var(--vg-font); letter-spacing: .1em; color: var(--vg-live-ink); } .vg-live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--vg-live-dot); } .vg-muted { color: var(--vg-ink-2); } .vg-hr { border: 0; border-top: 1px solid var(--vg-border); } .vg-toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--vg-ink); color: var(--vg-bg); padding: 12px 18px; border-radius: var(--vg-radius-sm); font: 600 14px/1.3 var(--vg-font); box-shadow: var(--vg-shadow); z-index: 1000; }