/* ============================================================ Tassels / Social Upkeep — Tenant theme tokens ------------------------------------------------------------ Four workspace themes selected per-tenant via Organization.theme and applied as data-theme="" on (server-rendered in base.html). ONE set of components, FOUR token skins. - creative (default) — warm, expressive, friendly LIGHT - executive — refined, editorial, authoritative LIGHT - athlete — electric, condensed, high-energy DARK - smb — clean, friendly, organized LIGHT Components must read tokens only — never hard-code a hex or font-family. Never `transition` a property whose value is a per-theme var() (background-color, color, border-color); the paint freezes on switch and produces a broken mixed-theme render. Transition transform / filter / opacity only. See design/design_handoff_tenant_theming/ for the full handoff (CLAUDE.md guardrails, django-integration.md, prototypes). ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700;800&family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); /* ── Mode-invariant scale ───────────────────────────────────── */ :root { --font-mono: 'JetBrains Mono', monospace; /* Type scale */ --text-page-title: 22px; --text-section: 16px; --text-body: 13px; --text-label: 11px; --text-meta: 11px; --text-mono: 12px; /* Weights */ --weight-regular: 400; --weight-medium: 500; /* Spacing (8px base grid) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; /* Display-treatment defaults (each theme overrides) */ --disp-weight: 700; --disp-spacing: -0.01em; --disp-transform: none; --disp-line: 1.05; } /* ============================================================ CREATIVE (default) — warm, expressive, friendly ============================================================ */ [data-theme="creative"] { color-scheme: light; --font-display: 'Bricolage Grotesque', sans-serif; --font-body: 'DM Sans', sans-serif; --disp-weight: 800; --disp-spacing: -0.02em; --disp-transform: none; --disp-line: 1.02; --radius-sm: 9px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --color-bg-base: #fdf6f0; --color-bg-nav: #fffdfb; --color-bg-card: #ffffff; --color-bg-card-hover: #fef2ec; --color-bg-sidebar: #ffffff; --color-bg-input: #fef2ec; --color-bg-dropdown: #ffffff; --color-bg-tooltip: #2c211b; --color-bg-elevated: #f6e9df; --color-text-primary: #2c211b; --color-text-secondary: #86756a; --color-text-muted: #bca99d; --color-text-disabled: #d8ccc3; --color-text-accent: #f0584b; --color-text-accent-hover: #d8473b; --color-border-subtle: #f4e8df; --color-border-default: #efe0d6; --color-border-strong: #2c211b; --color-border-nav: #efe0d6; --color-accent-indigo: #f0584b; --color-accent-cyan: #7c5cff; --color-accent-gradient: linear-gradient(135deg, #f0584b, #f8714f); --color-accent-indigo-bg: #ffe7e2; --color-accent-indigo-border: #f7cbc3; --color-accent-cyan-bg: #ece6ff; --color-accent-cyan-border: #d8ccff; --color-accent-cyan-text: #6b4ef0; --color-status-success: #1f9d6b; --color-status-success-bg: #dcf3e8; --color-status-success-border: #bfe7d4; --color-status-warning: #e08a1e; --color-status-warning-bg: #fcefd9; --color-status-warning-border: #f4ddb4; --color-status-danger: #e0473b; --color-status-danger-bg: #fde6e3; --color-status-danger-border: #f6c8c2; --color-status-info: #2b7fd6; --color-status-info-bg: #e1eefb; --color-status-info-border: #c2dbf3; --color-nav-active: #f0584b; --color-nav-active-border: #f0584b; --label-gradient: linear-gradient(90deg, #f0584b, #7c5cff); --card-backdrop: none; --glow-color: rgba(240, 88, 75, 0.10); } /* ============================================================ EXECUTIVE — refined, editorial, authoritative ============================================================ */ [data-theme="executive"] { color-scheme: light; --font-display: 'Newsreader', serif; --font-body: 'DM Sans', sans-serif; --disp-weight: 500; --disp-spacing: -0.01em; --disp-transform: none; --disp-line: 1.08; --radius-sm: 3px; --radius-md: 4px; --radius-lg: 7px; --radius-xl: 8px; --color-bg-base: #f3f0e8; --color-bg-nav: #fbfaf6; --color-bg-card: #fbfaf6; --color-bg-card-hover: #f1eee5; --color-bg-sidebar: #fbfaf6; --color-bg-input: #f1eee5; --color-bg-dropdown: #fbfaf6; --color-bg-tooltip: #172338; --color-bg-elevated: #e9e4d8; --color-text-primary: #172338; --color-text-secondary: #5a627a; --color-text-muted: #9aa0b2; --color-text-disabled: #c2c6d1; --color-text-accent: #1f3a63; --color-text-accent-hover: #14283f; --color-border-subtle: #ece7da; --color-border-default: #e0dac9; --color-border-strong: #172338; --color-border-nav: #172338; --color-accent-indigo: #1f3a63; --color-accent-cyan: #9a7a44; --color-accent-gradient: linear-gradient(135deg, #1f3a63, #27497c); --color-accent-indigo-bg: #e3e8f0; --color-accent-indigo-border: #c7d2e2; --color-accent-cyan-bg: #f0e9da; --color-accent-cyan-border: #e0d2b3; --color-accent-cyan-text: #9a7a44; --color-status-success: #2f6f4f; --color-status-success-bg: #e2ede6; --color-status-success-border: #c7ddd0; --color-status-warning: #9a6b1e; --color-status-warning-bg: #f2e9d6; --color-status-warning-border: #e3d2ad; --color-status-danger: #9d3b34; --color-status-danger-bg: #f1e2e0; --color-status-danger-border: #e0c5c1; --color-status-info: #2f5688; --color-status-info-bg: #e4eaf2; --color-status-info-border: #c9d6e6; --color-nav-active: #172338; --color-nav-active-border: #9a7a44; --label-gradient: none; --card-backdrop: none; --glow-color: transparent; } /* ============================================================ ATHLETE — electric, condensed, high-energy, DARK ============================================================ */ [data-theme="athlete"] { color-scheme: dark; --font-display: 'Anton', sans-serif; --font-body: 'Archivo', sans-serif; --disp-weight: 400; --disp-spacing: 0.005em; --disp-transform: uppercase; --disp-line: 0.94; --radius-sm: 4px; --radius-md: 5px; --radius-lg: 9px; --radius-xl: 10px; --color-bg-base: #0c0e0f; --color-bg-nav: #0a0c0d; --color-bg-card: #15191b; --color-bg-card-hover: #1b2123; --color-bg-sidebar: #121617; --color-bg-input: #1b2123; --color-bg-dropdown: #15191b; --color-bg-tooltip: #1b2123; --color-bg-elevated: #1f2527; --color-text-primary: #f3f7f5; --color-text-secondary: #9aa6a3; --color-text-muted: #616d6a; --color-text-disabled: #3f4a47; --color-text-accent: #c8f135; --color-text-accent-hover: #d6f95a; --color-border-subtle: #21282a; --color-border-default: #272e31; --color-border-strong: #333c40; --color-border-nav: #21282a; --color-accent-indigo: #c8f135; --color-accent-cyan: #ff5230; --color-accent-gradient: linear-gradient(135deg, #c8f135, #a6d11f); --color-accent-indigo-bg: rgba(200, 241, 53, 0.12); --color-accent-indigo-border: rgba(200, 241, 53, 0.28); --color-accent-cyan-bg: rgba(255, 82, 48, 0.14); --color-accent-cyan-border: rgba(255, 82, 48, 0.30); --color-accent-cyan-text: #ff7a5c; --color-status-success: #3ddc84; --color-status-success-bg: rgba(61, 220, 132, 0.13); --color-status-success-border: rgba(61, 220, 132, 0.28); --color-status-warning: #ffb020; --color-status-warning-bg: rgba(255, 176, 32, 0.14); --color-status-warning-border: rgba(255, 176, 32, 0.30); --color-status-danger: #ff5230; --color-status-danger-bg: rgba(255, 82, 48, 0.14); --color-status-danger-border: rgba(255, 82, 48, 0.30); --color-status-info: #4aa8ff; --color-status-info-bg: rgba(74, 168, 255, 0.13); --color-status-info-border: rgba(74, 168, 255, 0.28); --color-nav-active: #c8f135; --color-nav-active-border: #c8f135; --label-gradient: linear-gradient(90deg, #c8f135, #ff5230); --card-backdrop: none; --glow-color: rgba(200, 241, 53, 0.16); } /* ============================================================ SMB — clean, friendly, organized, trustworthy ============================================================ */ [data-theme="smb"] { color-scheme: light; --font-display: 'Plus Jakarta Sans', sans-serif; --font-body: 'Plus Jakarta Sans', sans-serif; --disp-weight: 800; --disp-spacing: -0.02em; --disp-transform: none; --disp-line: 1.05; --radius-sm: 7px; --radius-md: 11px; --radius-lg: 16px; --radius-xl: 18px; --color-bg-base: #eef4f2; --color-bg-nav: #ffffff; --color-bg-card: #ffffff; --color-bg-card-hover: #f2f8f6; --color-bg-sidebar: #ffffff; --color-bg-input: #f2f8f6; --color-bg-dropdown: #ffffff; --color-bg-tooltip: #11281f; --color-bg-elevated: #e1ece8; --color-text-primary: #11281f; --color-text-secondary: #5a6f67; --color-text-muted: #97aaa3; --color-text-disabled: #bfccc7; --color-text-accent: #0ea372; --color-text-accent-hover: #0b8a60; --color-border-subtle: #e3efea; --color-border-default: #d6e4df; --color-border-strong: #11281f; --color-border-nav: #d6e4df; --color-accent-indigo: #0ea372; --color-accent-cyan: #2b7fff; --color-accent-gradient: linear-gradient(135deg, #0ea372, #13b884); --color-accent-indigo-bg: #d6f2e6; --color-accent-indigo-border: #b6e6d2; --color-accent-cyan-bg: #dceaff; --color-accent-cyan-border: #bcd8ff; --color-accent-cyan-text: #2b7fff; --color-status-success: #0ea372; --color-status-success-bg: #d6f2e6; --color-status-success-border: #b6e6d2; --color-status-warning: #e08a1e; --color-status-warning-bg: #fbeed7; --color-status-warning-border: #f2dcb2; --color-status-danger: #dc4b3e; --color-status-danger-bg: #fbe5e2; --color-status-danger-border: #f3c7c1; --color-status-info: #2b7fff; --color-status-info-bg: #dceaff; --color-status-info-border: #bcd8ff; --color-nav-active: #11281f; --color-nav-active-border: #0ea372; --label-gradient: none; --card-backdrop: none; --glow-color: transparent; } /* ── Base Styles ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-family: var(--font-body); font-size: var(--text-body); font-weight: var(--weight-regular); line-height: 1.6; background-color: var(--color-bg-base); color: var(--color-text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Decorative absolutely-positioned elements (radial glows, off-canvas accents, etc.) intentionally extend past their wrapper. Without a clip on they trigger a horizontal scrollbar that widens the layout and makes the centred `.page-shell` appear to shift between pages. `overflow-x: hidden` prevents the scrollbar; the navbar uses `position: fixed` (anchored to the viewport, not the body scroll container) so this does not affect its stickiness. We also flag `clip` as the modern preference where supported. */ html, body { overflow-x: hidden; overflow-x: clip; } /* ── Global form element theming ───────────────────────────────────── Safety net for bare Django-rendered widgets ({{ field }}) that don't carry a design-system class (.input / .select / .textarea). The explicit classes remain the preferred path; these rules cover anything that falls through without one. color-scheme: inherit on interactive elements is the critical bit: it propagates the page-level dark/light declaration all the way into the native OS popup layer (the dropdown list, date pickers, etc.) so option text and backgrounds honour the active theme even when the browser doesn't inherit CSS background/color properties into that layer. */ input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]), select, textarea { color-scheme: inherit; background-color: var(--color-bg-input); color: var(--color-text-primary); } /* Native elements render inside the OS popup layer and don't reliably inherit from their parent