/* ════════════════════════════════════════════════════════════════ NRP App — Design Tokens + Components NewRock Properties · v1.0 · Navy + White themes Stack: FastAPI + Jinja2. Drop this file in static/, link from your base template, and add data-theme="dark" or "light" to . … Sidebar always uses the navy palette regardless of [data-theme]. ════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;1,400&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Inter+Tight:wght@400;500;600&display=swap'); /* ── Sidebar (always navy) ───────────────────────────────────── */ :root { --nrp-side-bg: #2f3b46; --nrp-side-text: #f5f1e8; --nrp-side-text-dim: rgba(245,241,232,0.60); --nrp-side-text-mut: rgba(245,241,232,0.45); --nrp-side-active-bg: rgba(196,106,45,0.14); --nrp-side-active-rl: #c46a2d; --nrp-side-divider: rgba(245,241,232,0.08); --nrp-side-badge: #c46a2d; --nrp-side-logo-ora: #e08a4a; /* Brand-fixed (theme-independent) */ --nrp-orange: #c46a2d; --nrp-orange-soft: #e08a4a; --nrp-orange-deep: #a24e1a; /* Typography */ --nrp-font-display: 'Plus Jakarta Sans', 'Inter Tight', system-ui, sans-serif; --nrp-font-logo: 'Newsreader', ui-serif, Georgia, serif; /* wordmark only — exempt from the display swap */ --nrp-font-body: 'Inter Tight', system-ui, -apple-system, sans-serif; --nrp-font-mono: ui-monospace, 'SF Mono', Menlo, monospace; /* Sizes */ --nrp-fs-page-title: 28px; --nrp-fs-section: 17px; --nrp-fs-body: 13px; --nrp-fs-body-sm: 12px; --nrp-fs-caption: 11.5px; --nrp-fs-eyebrow: 10px; /* Spacing */ --nrp-s-1: 4px; --nrp-s-2: 8px; --nrp-s-3: 12px; --nrp-s-4: 16px; --nrp-s-5: 20px; --nrp-s-6: 24px; --nrp-s-7: 28px; --nrp-s-8: 32px; /* Radii */ --nrp-r-sm: 4px; --nrp-r-md: 6px; --nrp-r-pill: 16px; /* Motion */ --nrp-ease: cubic-bezier(0.2, 0, 0.1, 1); --nrp-dur-fast: 120ms; --nrp-dur: 240ms; } /* ── Dark (navy) theme — DEFAULT ─────────────────────────────── */ :root, [data-theme="dark"] { --nrp-bg: #1a2028; --nrp-card: #242d37; --nrp-card-raised: #2c3641; --nrp-card-border: #333e4a; --nrp-input-bg: #1a2028; --nrp-input-border: #3a4552; --nrp-row-border: rgba(245,241,232,0.06); --nrp-row-hover: rgba(245,241,232,0.04); --nrp-strip-bg: rgba(245,241,232,0.025); --nrp-text: #f5f1e8; --nrp-text-mid: #a8b0b8; --nrp-text-dim: #6b7680; --nrp-text-muted: rgba(245,241,232,0.45); /* Faint placeholder — clearly a hint, not entered text. */ --nrp-placeholder: #4f5862; --nrp-orange-tint: rgba(170,154,136,0.16); /* warm-stone wash (was peach rgba(196,106,45,0.14)) */ --nrp-orange-tint-strong: rgba(170,154,136,0.24); /* warm-stone wash (was peach rgba(196,106,45,0.22)) */ /* ────────────────────────────────────────────────────────────────── STATUS-COLOR RULE — read this before reaching for a tint. --nrp-orange* in-progress / awaiting tenant action / pending move-in. The "we're working on it" family. Examples: WAITING FOR INFO hero pill, move-in requirements band, addendum partially-signed. --nrp-warn* needs landlord attention but NOT an error. Examples: insurance expiring soon, optional info missing, pet addendum sent and stalling. --nrp-info* neutral state changes / read-only callouts. Examples: "Bundled with addendum" badges, generic help banners. --nrp-danger* TRUE ERRORS ONLY. Don't reach for danger to signal "important to do." That's --nrp-orange. Examples: overdue rent, failed payment, expired insurance, declined signature, hard validation failures. If you find yourself painting a draft / waiting / pending / "needs this before move-in" surface in the danger family, you are describing a workflow state, not an error — use --nrp-orange. ────────────────────────────────────────────────────────────────── */ --nrp-success: #7db58a; --nrp-success-tint: rgba(76,136,88,0.18); --nrp-info: #8eb0d6; --nrp-info-tint: rgba(75,110,150,0.20); --nrp-warn: #d9a84e; --nrp-warn-tint: rgba(217,168,78,0.18); --nrp-danger: #cb5742; /* brick red — dark-theme sibling, lifted for contrast on navy (was coral #d97560) */ --nrp-danger-tint: rgba(203,87,66,0.18); /* Subtle danger row wash — sits on top of --nrp-bg (dark navy) at low alpha so the row reads as warm-tinted, not "on fire." Hover bumps to the stronger value. Used by .nrp-row--danger; kept in the danger family so future urgency states (other than INCOMPLETE) can opt in. */ --nrp-danger-bg-subtle: rgba(203,87,66,0.08); --nrp-danger-bg-subtle-hover: rgba(203,87,66,0.14); --nrp-btn-primary-bg: #f5f1e8; --nrp-btn-primary-fg: #2f3b46; --nrp-btn-navy-bg: #2f3b46; --nrp-btn-navy-fg: #f5f1e8; --nrp-btn-success-bg: #4c8858; --nrp-btn-danger-bg: #cb5742; /* collapsed: button fill == --nrp-danger (was a separate salmon #a6443a) */ } /* ── Light (white) theme ─────────────────────────────────────── */ [data-theme="light"] { --nrp-bg: #FFFFFF; /* all-white page bg (was #F5F2EC cream) */ --nrp-card: #FFFFFF; --nrp-card-raised: #F5F6F8; /* cool grey (was #F0EBE0 cream) */ --nrp-card-border: #E4E6EA; /* cards separate via border, Buildium-style (was #E5E0D6) */ --nrp-input-bg: #FFFFFF; --nrp-input-border: #D7DAE0; /* was #D9D3C5 */ --nrp-row-border: #EDEEF1; /* was #ECE7DB */ --nrp-row-hover: #F7F8FA; /* was #F5F1E8 */ --nrp-strip-bg: #F7F8FA; /* was #F0EBE0 */ --nrp-text: #1E222A; /* cool near-black (was #1A1814 warm) */ --nrp-text-mid: #565C66; /* was #5A5448 */ --nrp-text-dim: #8A909B; /* was #8A8273 */ --nrp-text-muted: rgba(30,34,42,0.55); /* Faint placeholder — much lighter than --nrp-text-dim so sample hints (e.g. "Jane Doe", "T1A 0A1") read as guidance, not filled-in values. */ --nrp-placeholder: #C2BCB0; /* Brand-fixed orange shifts slightly darker on cream for AA contrast */ --nrp-orange: #C8642E; --nrp-orange-soft: #B8551E; --nrp-orange-deep: #8E3F12; --nrp-orange-tint: rgba(126,108,92,0.16); /* warm-stone wash (was peach rgba(200,100,46,0.10)) */ --nrp-orange-tint-strong: rgba(126,108,92,0.24); /* warm-stone wash (was peach rgba(200,100,46,0.18)) */ --nrp-success: #2F6B3E; --nrp-success-tint: rgba(47,107,62,0.12); --nrp-info: #2B5878; --nrp-info-tint: rgba(43,88,120,0.12); --nrp-warn: #A66A0E; --nrp-warn-tint: rgba(166,106,14,0.12); --nrp-danger: #A02B1C; /* brick red (was #A8321F) */ --nrp-danger-tint: rgba(160,43,28,0.12); /* Light-theme danger wash — derived from the cream surface, so the same row class reads as a warm pink-cream tint here instead of the dark-theme reddish-navy. */ --nrp-danger-bg-subtle: rgba(160,43,28,0.07); --nrp-danger-bg-subtle-hover: rgba(160,43,28,0.13); --nrp-btn-primary-bg: #1F1B14; /* near-black filled button */ --nrp-btn-primary-fg: #F5F2EC; --nrp-btn-navy-bg: #2B3950; --nrp-btn-navy-fg: #F5F2EC; --nrp-btn-success-bg: #2F6B3E; --nrp-btn-danger-bg: #A02B1C; /* brick red — matches --nrp-danger */ /* Modal scrim — warm dark on cream, lighter than the dark-mode scrim */ --nrp-modal-scrim: rgba(26,24,20,0.45); } /* Dark-theme scrim default (defined under :root so default = dark scrim) */ :root, [data-theme="dark"] { --nrp-modal-scrim: rgba(0,0,0,0.55); } /* ════════════════════════════════════════════════════════════════ Legacy variable aliases — many older templates reference these pre-rebrand tokens (--color-primary, --text-muted, --bg-card, --border-light, etc.). Aliasing them onto NRP tokens lets every legacy template inherit the design-system palette without per-file rewrites. All new code must use the --nrp-* tokens directly. The selector list includes :root.dark-mode (the legacy theme class set by base.html's bootstrap script) so the alias overrides the inline blue palette in base.html with higher specificity. ════════════════════════════════════════════════════════════════ */ :root, :root.dark-mode, :root.light-mode, [data-theme="dark"], [data-theme="light"] { /* Surfaces */ --bg-card: var(--nrp-card); --bg-card-raised: var(--nrp-card-raised); --bg-table-alt: var(--nrp-strip-bg); --bg-strip: var(--nrp-strip-bg); --bg-input: var(--nrp-input-bg); /* Text */ --text-primary: var(--nrp-text); --text-default: var(--nrp-text); --text-secondary: var(--nrp-text-mid); --text-muted: var(--nrp-text-mid); --text-very-muted: var(--nrp-text-dim); --text-dim: var(--nrp-text-dim); /* Borders */ --border-light: var(--nrp-row-border); --border-muted: var(--nrp-row-border); --border-input: var(--nrp-input-border); --border-card: var(--nrp-card-border); /* Accent / semantic */ --color-primary: var(--nrp-orange); --color-primary-soft:var(--nrp-orange-soft); --color-primary-bg: var(--nrp-orange-tint); --color-accent: var(--nrp-orange); --color-success: var(--nrp-success); --color-warn: var(--nrp-warn); --color-warning: var(--nrp-warn); --color-danger: var(--nrp-danger); --color-info: var(--nrp-info); } /* ════════════════════════════════════════════════════════════════ Reset + base ════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } /* Native