/* ========================================================= Pliko — design tokens ========================================================= CSS custom properties for the app's own (non-Bootstrap) styling. Bootstrap components are themed at build time (bootstrap.theme.*.css); the tenant accent tokens (--accent*) are overridden per request by the template (inline style from the tenant swatch). Dark mode follows the OS, or [data-theme] on when the user picked Light or Dark in the user menu. Bootstrap surfaces (cards, dropdowns, inputs, modals) read these tokens, see _theme-base.scss. */ :root { --ink: #060606; --ink-soft: #4c4c4c; --ink-faint: #888888; --paper: #f9f9f9; --paper-raised: #ffffff; --paper-sunken: #eeeeee; --line: #cccccc; --line-soft: #e2e2e2; --accent: #e20060; --accent-strong: #b3004c; --accent-soft: #fdf0f6; --accent-tint: #f9cce0; --ok: #1f7a4c; --ok-tint: #e5f3ec; --danger: #a5402f; --danger-tint: #f8e8e4; --shadow-sm: 0 1px 2px rgba(6, 6, 6, 0.06), 0 8px 24px -12px rgba(6, 6, 6, 0.16); --shadow-lg: 0 0.25rem 0.5rem rgba(6, 6, 6, 0.05), 0 1.75rem 3.5rem -1.25rem rgba(6, 6, 6, 0.22); --font-display: "Bitter", Georgia, "Times New Roman", serif; --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Fixed type scale: reuse these steps, never a new near-identical size. */ --fs-micro: 0.6875rem; /* 11px */ --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.8125rem; /* 13px */ --fs-base: 0.875rem; /* 14px */ --fs-lg: 1.0625rem; /* 17px */ --fs-xl: 1.125rem; /* 18px */ --bs-body-bg: var(--paper); --bs-body-color: var(--ink); --bs-border-color: var(--line); --bs-border-color-translucent: var(--line-soft); --bs-emphasis-color: var(--ink); --bs-secondary-color: var(--ink-soft); --bs-tertiary-color: var(--ink-faint); --bs-secondary-bg: var(--paper-sunken); --bs-tertiary-bg: var(--paper-sunken); color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --ink: #f5f5f5; --ink-soft: #c7c7c7; --ink-faint: #969696; --paper: #0c0c0c; --paper-raised: #161616; --paper-sunken: #1f1f1f; --line: #333333; --line-soft: #262626; --ok: #4fd694; --ok-tint: #10261c; --danger: #d8806c; --danger-tint: #2a1712; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6); --shadow-lg: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4), 0 1.75rem 3.5rem -1.25rem rgba(0, 0, 0, 0.7); } } :root[data-theme="dark"] { color-scheme: dark; --ink: #f5f5f5; --ink-soft: #c7c7c7; --ink-faint: #969696; --paper: #0c0c0c; --paper-raised: #161616; --paper-sunken: #1f1f1f; --line: #333333; --line-soft: #262626; --ok: #4fd694; --ok-tint: #10261c; --danger: #d8806c; --danger-tint: #2a1712; } body { background: var(--bs-body-bg); color: var(--bs-body-color); } h1, h2, h3, h4, h5, h6, .navbar-brand { font-family: var(--font-display); font-weight: 600; } /* Utilities with no Bootstrap equivalent */ .text-ink-soft { color: var(--ink-soft) !important; } .text-ink-faint { color: var(--ink-faint) !important; } .text-accent-strong { color: var(--accent-strong) !important; } .bg-paper { background: var(--paper) !important; } .bg-paper-raised { background: var(--paper-raised) !important; } .bg-paper-sunken { background: var(--paper-sunken) !important; } .bg-accent-tint { background: var(--accent-tint) !important; } .fs-micro { font-size: var(--fs-micro) !important; } .fs-xs { font-size: var(--fs-xs) !important; } .fs-sm { font-size: var(--fs-sm) !important; } .fs-base { font-size: var(--fs-base) !important; } .min-w-0 { min-width: 0; }