/* ============================================================================= design-tokens.css — iBinderbook design system, single source of truth. Three layers: 1. BRAND MAP [data-brand="..."] -> the ONLY place to change colors / white-label per tenant. 2. SEMANTIC --ibb-* -> what component CSS consumes. 3. ALIASES --pas-* -> back-compat for older selectors; retire once everything uses --ibb-*. The active brand is selected by a data-brand attribute on (set in Site.Master). Brand-fed tokens carry a fallback to the iBinderbook defaults, so colors still resolve even if no data-brand attribute is present. To recolor iBinderbook or add a customer brand, edit ONLY the brand map below. ========================================================================== */ /* ---- Layer 1/3: brand maps (edit here to recolor or white-label) ---------- */ [data-brand="ibb"] { /* iBinderbook (default) */ --brand-primary: #039be5; --brand-primary-hover: #0288d1; --brand-primary-active: #0277bd; --brand-primary-soft: #e1f5fe; } [data-brand="neutral"] { /* white-label neutral (navy) */ --brand-primary: #1b2a4a; --brand-primary-hover: #13203a; --brand-primary-active: #0f1a30; --brand-primary-soft: #eef2f7; } /* ---- Layer 2: semantic tokens (consumed by component CSS) ----------------- */ :root { /* brand-fed (fallbacks = iBinderbook defaults, so nothing breaks unset) */ --ibb-primary: var(--brand-primary, #039be5); --ibb-primary-hover: var(--brand-primary-hover, #0288d1); --ibb-primary-active: var(--brand-primary-active, #0277bd); --ibb-primary-soft: var(--brand-primary-soft, #e1f5fe); /* text */ --ibb-text: #263238; --ibb-text-secondary: #546e7a; --ibb-text-muted: #90a4ae; /* borders */ --ibb-border: #e0e6eb; --ibb-border-strong: #ccd6dd; /* surfaces */ --ibb-bg: #f7f9fb; --ibb-surface: #ffffff; --ibb-surface-alt: #f1f4f6; --ibb-surface-zebra: #fbfdfe; /* faint alt-row zebra for data grids */ /* status */ --ibb-success: #2e7d32; --ibb-success-soft: rgba(46, 125, 50, 0.12); --ibb-warning: #f9a825; --ibb-warning-soft: rgba(249, 168, 37, 0.14); --ibb-warning-text: #865600; /* readable text on warning-soft (handoff guide) */ --ibb-warning-border: #f0cf7d; --ibb-danger: #c62828; --ibb-danger-soft: rgba(198, 40, 40, 0.12); /* info is brand-tied: derive from primary so white-label follows */ --ibb-info-soft: color-mix(in srgb, var(--ibb-primary) 12%, transparent); /* neutral dark - "Back"/return actions (handoff guide button contract) */ --ibb-dark: #37474f; /* elevation */ --ibb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --ibb-shadow-md: 0 8px 24px rgba(38, 50, 56, 0.08); --ibb-shadow-lg: 0 18px 40px rgba(38, 50, 56, 0.10); /* radius */ --ibb-radius-sm: 8px; --ibb-radius-md: 12px; --ibb-radius-lg: 16px; /* spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; /* ---- Layer 3 aliases: --pas-* -> --ibb-* (retire after migration) ----- */ --pas-primary: var(--ibb-primary); --pas-primary-hover: var(--ibb-primary-hover); --pas-primary-active: var(--ibb-primary-active); --pas-primary-soft: var(--ibb-primary-soft); --pas-text: var(--ibb-text); --pas-text-secondary: var(--ibb-text-secondary); --pas-text-muted: var(--ibb-text-muted); --pas-border: var(--ibb-border); --pas-border-strong: var(--ibb-border-strong); --pas-bg: var(--ibb-bg); --pas-surface: var(--ibb-surface); --pas-surface-alt: var(--ibb-surface-alt); --pas-success: var(--ibb-success); --pas-warning: var(--ibb-warning); --pas-warning-soft: var(--ibb-warning-soft); --pas-danger: var(--ibb-danger); --pas-shadow-sm: var(--ibb-shadow-sm); --pas-shadow-md: var(--ibb-shadow-md); --pas-radius-sm: var(--ibb-radius-sm); --pas-radius-md: var(--ibb-radius-md); --pas-radius-lg: var(--ibb-radius-lg); }