/* ============================================================ UGBuildPro — Design Tokens (Django/CSS) Generated from tokens.jsx — keep in sync. Mount in Django via: ============================================================ */ :root { /* ---------- Type ---------- */ --ugbp-font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif; --ugbp-font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace; --ugbp-fs-display: 36px; --ugbp-lh-display: 1.10; --ugbp-tr-display: -0.02em; --ugbp-fs-h1: 28px; --ugbp-lh-h1: 1.15; --ugbp-tr-h1: -0.015em; --ugbp-fs-h2: 20px; --ugbp-lh-h2: 1.25; --ugbp-tr-h2: -0.01em; --ugbp-fs-h3: 16px; --ugbp-lh-h3: 1.30; --ugbp-fs-body: 14px; --ugbp-lh-body: 1.50; --ugbp-fs-small: 12px; --ugbp-lh-small: 1.40; --ugbp-fs-micro: 11px; --ugbp-lh-micro: 1.30; --ugbp-tr-micro: 0.06em; --ugbp-fs-mono: 13px; --ugbp-lh-mono: 1.40; /* ---------- Spacing (spacious default) ---------- */ --ugbp-sp-xs: 4px; --ugbp-sp-s: 8px; --ugbp-sp-m: 12px; --ugbp-sp-l: 16px; --ugbp-sp-xl: 24px; --ugbp-sp-xxl: 32px; --ugbp-sp-xxxl:48px; /* ---------- Radii ---------- */ --ugbp-radius-s: 4px; --ugbp-radius-m: 6px; --ugbp-radius-l: 10px; --ugbp-radius-xl: 14px; --ugbp-radius-full: 999px; /* ---------- Brand (overridden per-tenant; fallback = Hawthorne) ---------- */ --ugbp-primary: #F59E0B; --ugbp-primary-ink: #0B0F14; --ugbp-secondary: #1E40AF; --ugbp-accent: #10B981; /* ---------- Light mode (default) ---------- */ --ugbp-bg: #F6F7F4; --ugbp-surface: #FFFFFF; --ugbp-surface-2: #F1F2EE; --ugbp-border: #E2E5DF; --ugbp-border-strong: #CBD0C7; --ugbp-ink: #0B0F14; --ugbp-ink-soft: #3B4452; --ugbp-ink-muted: #6B7484; --ugbp-ink-faint: #9AA1AE; --ugbp-ok: #15803D; --ugbp-ok-bg: #DCFCE7; --ugbp-warn: #B45309; --ugbp-warn-bg: #FEF3C7; --ugbp-danger: #B91C1C; --ugbp-danger-bg: #FEE2E2; --ugbp-info: #1E40AF; --ugbp-info-bg: #DBEAFE; --ugbp-shadow-s: 0 1px 2px rgba(11,15,20,0.04), 0 0 0 1px rgba(11,15,20,0.04); --ugbp-shadow-m: 0 1px 2px rgba(11,15,20,0.06), 0 4px 12px rgba(11,15,20,0.04); --ugbp-shadow-l: 0 4px 8px rgba(11,15,20,0.05), 0 12px 32px rgba(11,15,20,0.08); } /* ---------- Dark mode ---------- */ [data-theme="dark"] { --ugbp-bg: #0B0F14; --ugbp-surface: #11161D; --ugbp-surface-2: #161C25; --ugbp-border: #1F2731; --ugbp-border-strong: #2A3340; --ugbp-ink: #F1F5F9; --ugbp-ink-soft: #CBD5E1; --ugbp-ink-muted: #94A3B8; --ugbp-ink-faint: #64748B; --ugbp-ok: #4ADE80; --ugbp-ok-bg: #052E16; --ugbp-warn: #FBBF24; --ugbp-warn-bg: #3F2D06; --ugbp-danger: #F87171; --ugbp-danger-bg: #3F0F12; --ugbp-info: #60A5FA; --ugbp-info-bg: #0B1E3D; --ugbp-shadow-s: 0 1px 2px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04); --ugbp-shadow-m: 0 1px 2px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3); --ugbp-shadow-l: 0 4px 8px rgba(0,0,0,0.5), 0 12px 32px rgba(0,0,0,0.55); } /* ---------- Density: cozy ---------- */ [data-density="cozy"] { --ugbp-sp-xs: 2px; --ugbp-sp-s: 4px; --ugbp-sp-m: 8px; --ugbp-sp-l: 12px; --ugbp-sp-xl: 16px; --ugbp-sp-xxl:24px; --ugbp-sp-xxxl:32px; } /* ---------- Tenant presets ---------- Override by setting data-tenant="" on or . Or apply tenant brand from DB at runtime by overriding --ugbp-primary inline. */ [data-tenant="hawthorne"] { --ugbp-primary:#F59E0B; --ugbp-primary-ink:#0B0F14; --ugbp-secondary:#1E40AF; --ugbp-accent:#10B981; } [data-tenant="midstate"] { --ugbp-primary:#DC2626; --ugbp-primary-ink:#FFFFFF; --ugbp-secondary:#0F766E; --ugbp-accent:#F59E0B; } [data-tenant="northridge"] { --ugbp-primary:#0EA5E9; --ugbp-primary-ink:#0B0F14; --ugbp-secondary:#475569; --ugbp-accent:#F59E0B; } /* ============================================================ Component recipes — minimum set to render the shell. Use these as Django template classes; pair with HTMX for interactions. ============================================================ */ body { background: var(--ugbp-bg); color: var(--ugbp-ink); font-family: var(--ugbp-font-family); margin: 0; } .ugbp-card { background: var(--ugbp-surface); border: 1px solid var(--ugbp-border); border-radius: var(--ugbp-radius-l); box-shadow: var(--ugbp-shadow-s); padding: var(--ugbp-sp-xl); } .ugbp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--ugbp-radius-m); border: 1px solid transparent; font-weight: 500; font-size: 13px; font-family: inherit; cursor: pointer; text-decoration: none; transition: background .12s ease, color .12s ease, border-color .12s ease, transform .08s ease, box-shadow .12s ease, filter .12s ease; } .ugbp-btn:focus-visible { outline: 2px solid var(--ugbp-primary); outline-offset: 2px; } .ugbp-btn:active { transform: translateY(1px); } .ugbp-btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; } .ugbp-btn--primary { background: var(--ugbp-primary); color: var(--ugbp-primary-ink); } .ugbp-btn--primary:hover:not([disabled]) { filter: brightness(0.94); box-shadow: var(--ugbp-shadow-s); } .ugbp-btn--secondary { background: var(--ugbp-surface); color: var(--ugbp-ink); border-color: var(--ugbp-border-strong); } .ugbp-btn--secondary:hover:not([disabled]) { background: var(--ugbp-surface-2); border-color: var(--ugbp-primary); color: var(--ugbp-ink); } .ugbp-btn--ghost { background: transparent; color: var(--ugbp-ink-soft); } .ugbp-btn--ghost:hover:not([disabled]) { background: var(--ugbp-surface-2); color: var(--ugbp-ink); } .ugbp-btn--danger { background: var(--ugbp-danger); color: #fff; } .ugbp-btn--danger:hover:not([disabled]) { filter: brightness(0.92); box-shadow: var(--ugbp-shadow-s); } .ugbp-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--ugbp-radius-full); font-size: 11px; font-weight: 500; background: var(--ugbp-surface-2); color: var(--ugbp-ink-soft); } .ugbp-badge i { font-size: 9px; } .ugbp-badge--ok { background: var(--ugbp-ok-bg); color: var(--ugbp-ok); } .ugbp-badge--warn { background: var(--ugbp-warn-bg); color: var(--ugbp-warn); } .ugbp-badge--danger { background: var(--ugbp-danger-bg); color: var(--ugbp-danger); } .ugbp-badge--info { background: var(--ugbp-info-bg); color: var(--ugbp-info); } .ugbp-mono { font-family: var(--ugbp-font-mono); font-variant-numeric: tabular-nums; } .ugbp-label { font-size: var(--ugbp-fs-micro); letter-spacing: var(--ugbp-tr-micro); text-transform: uppercase; font-weight: 600; color: var(--ugbp-ink-muted); } .ugbp-input { background: var(--ugbp-surface); color: var(--ugbp-ink); border: 1px solid var(--ugbp-border-strong); border-radius: var(--ugbp-radius-m); padding: 8px 12px; font-family: inherit; font-size: 13px; width: 100%; } .ugbp-input:focus { outline: 2px solid var(--ugbp-primary); outline-offset: 1px; border-color: var(--ugbp-primary); }