@layer host { /* ============================================ ScoutBadger Manager — Theme Token Overrides Token-only :root overrides for the Manager app. No component selectors. Zero !important. Only tokens whose value DIFFERS from tokens.css / component defaults are listed. ============================================ */ :root { /* ── Typography ─────────────────────────────────────────────── */ --app-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --app-font-family-heading: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --app-font-size-caption: 0.8125rem; --app-font-size-meta: 0.875rem; --app-font-size-body: 0.9375rem; --app-font-size-title: 1.0625rem; /* ── Corner radii — Generous, modern ─────────────────────── */ --sb-radius-card: 20px; --sb-radius-xl: 24px; --sb-radius-lg: 16px; --sb-radius-md: 12px; --sb-radius-sm: 8px; --app-radius-s: 10px; --app-radius-m: 16px; --app-radius-l: 20px; /* ── Shadow system — Clean, slate-tinted ──────────────────── */ --sb-elevation-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 4px rgba(15, 23, 42, 0.04); --sb-elevation-2: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.07); --sb-elevation-3: 0 2px 4px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.10); --sb-elevation-4: 0 4px 8px rgba(15, 23, 42, 0.06), 0 16px 40px rgba(15, 23, 42, 0.12); --sb-elevation-5: 0 8px 16px rgba(15, 23, 42, 0.08), 0 24px 56px rgba(15, 23, 42, 0.16); --app-shadow-s: var(--sb-elevation-1); --app-shadow-m: var(--sb-elevation-2); --app-shadow-focus: 0 0 0 2px var(--app-color-surface), 0 0 0 4.5px rgba(var(--app-primary-rgb), 0.35); /* ── Primary — Manager brand green ───────────────────────── */ --app-color-primary-dark: #008c44; --app-color-primary-light: #e6f9ef; --app-color-primary-muted: #78c9a0; --app-primary-dark-rgb: 0, 140, 68; /* ── Secondary — Blue accent ─────────────────────────────── */ --app-color-secondary: #2563eb; /* ── Ink & text — Slate neutrals ─────────────────────────── */ --sb-manager-ink: #0F172A; --app-color-text: #0F172A; --app-color-text-muted: #64748B; --app-color-text-secondary: #94A3B8; --app-color-text-deep: #020617; --app-color-text-strong: #1E293B; /* ── Surfaces — Clean, slate whites ──────────────────────── */ --sb-manager-bg: #E9EEF4; --app-color-body-bg: var(--sb-manager-bg); --app-color-surface-alt: #F8FAFC; --app-color-surface-muted: #EEF2F8; --app-color-surface-subtle: #FAFCFF; --app-surface-alt-rgb: 248, 250, 252; /* ── Borders — Slate neutrals ────────────────────────────── */ --app-color-border: #E2E8F0; --app-color-border-subtle: #EDF2F8; /* ── Status: Success — Brand green ───────────────────────── */ --app-color-success: #00a551; --app-color-success-dark: #008c44; --app-color-success-bg: #e6f9ef; --app-color-success-border: #6ee7b7; --app-color-success-light: #a7f3d0; --app-color-success-muted: rgba(0, 165, 81, 0.08); --app-color-success-rgb: 0, 165, 81; /* ── Status: Danger — Vivid red ──────────────────────────── */ --app-color-danger: #dc2626; --app-color-danger-rgb: 220, 38, 38; --app-color-error: #dc2626; --app-color-error-light: #fef2f2; --app-color-error-muted: rgba(220, 38, 38, 0.07); /* ── Status: Warning / Amber ─────────────────────────────── */ --app-color-warning: #d97706; --app-color-amber: #d97706; --app-color-amber-bg: #fffbeb; --app-color-amber-warm: #fef9c3; --app-color-amber-light: #fef3c7; --app-color-amber-muted: rgba(217, 119, 6, 0.07); --app-color-amber-accent: #f59e0b; --app-color-amber-rgb: 217, 119, 6; /* ── Status: Info — Sky blue ──────────────────────────────── */ --app-color-info: #0284c7; --app-color-info-border: #7dd3fc; --app-color-info-border-light: #bae6fd; --app-color-info-muted: rgba(2, 132, 199, 0.07); --app-color-info-rgb: 2, 132, 199; /* ── Manager accent colours ──────────────────────────────── */ --sb-manager-accent: var(--app-color-primary); --sb-manager-accent-soft: rgba(var(--app-primary-rgb), 0.08); --sb-status-urgent: #d97706; --sb-status-progress: #00a551; --sb-status-info: #0284c7; /* ── Teal interactive palette ────────────────────────────── */ --app-color-teal: #0d9488; --app-color-teal-light: #f0fdfa; --app-color-teal-hover: #ccfbf1; --app-color-teal-border: #14b8a6; --app-color-teal-muted: rgba(13, 148, 136, 0.08); /* ── Chip tokens ─────────────────────────────────────────── */ --app-chip-bg-hover: var(--app-color-surface-muted); --app-chip-border: var(--app-color-border); --app-chip-color: var(--app-color-text-muted); --app-chip-color-hover: var(--app-color-text); --app-chip-active-bg: rgba(var(--app-primary-rgb), 0.12); --app-chip-active-border: rgba(var(--app-primary-rgb), 0.40); --app-chip-active-color: var(--app-color-primary-dark); --app-chip-active-bg-hover: rgba(var(--app-primary-rgb), 0.18); --app-chip-border-hover: var(--app-color-border-medium); /* ── Stat / metric tokens ────────────────────────────────── */ --app-stat-color-default: var(--app-color-text); --app-stat-color-muted: var(--app-color-text-secondary); --app-stat-icon-1-bg: rgba(var(--app-primary-rgb), 0.12); --app-stat-icon-1-color: var(--app-color-primary); --app-stat-icon-2-bg: rgba(2, 132, 199, 0.12); --app-stat-icon-2-color: var(--app-color-info); --app-stat-icon-3-bg: rgba(100, 116, 139, 0.10); --app-stat-icon-3-color: var(--app-color-text-muted); /* ── Gradients ────────────────────────────────────────────── */ --app-gradient-hero: linear-gradient(135deg, #00a551 0%, #008c44 50%, #006e35 100%); --app-gradient-hero-dark: linear-gradient(135deg, #006e35 0%, #008c44 50%, #00a551 100%); --app-gradient-success: linear-gradient(90deg, #34d399, #00a551); /* ── Gold / utility colours ───────────────────────────────── */ --app-color-gold-warm: #f59e0b; --app-color-track-bg: #E2E8F0; --app-color-skeleton: #E8EDF4; --app-color-overdue: #dc2626; --app-color-overdue-light: #fef2f2; --app-color-warning-light: #fffbeb; /* ── Overlay / glass ─────────────────────────────────────── */ --app-color-overlay: rgba(6, 18, 10, 0.55); --app-color-overlay-soft: rgba(6, 18, 10, 0.25); --app-color-glass: rgba(255, 255, 255, 0.80); --app-color-glass-strong: rgba(255, 255, 255, 0.92); --app-color-glass-subtle: rgba(255, 255, 255, 0.50); /* ── Transitions — Spring easing ─────────────────────────── */ --sb-transition-fast: 150ms cubic-bezier(0.22, 1, 0.36, 1); --sb-transition-base: 260ms cubic-bezier(0.22, 1, 0.36, 1); /* ── Radzen theme variables ──────────────────────────────── */ --rz-border-radius: var(--sb-radius-md); --rz-card-border-radius: var(--sb-radius-card); --rz-card-box-shadow: var(--sb-elevation-2); --rz-grid-border-radius: var(--sb-radius-lg); --rz-grid-box-shadow: var(--sb-elevation-1); --rz-button-border-radius: 9999px; --rz-input-border-radius: var(--sb-radius-md); --rz-panel-border-radius: var(--sb-radius-card); --rz-dialog-border-radius: 24px; --rz-dialog-box-shadow: var(--sb-elevation-5); --rz-grid-header-text-transform: none; /* ── Navigation link colours ──────────────────────────────── */ --sb-manager-nav-link: #475569; --sb-manager-nav-hover: #0F172A; /* ── Blue accent palette ─────────────────────────────────── */ --app-color-blue-light: rgba(37, 99, 235, 0.08); /* ── Purple accent palette ───────────────────────────────── */ --app-color-purple: #7c3aed; --app-color-purple-dark: #6d28d9; --app-color-purple-muted: rgba(124, 58, 237, 0.08); /* ── Base overrides (differ from DesignSystem defaults) ─── */ --app-color-surface: #ffffff; /* ── Review triage accents ────────────────────────────────── */ --app-review-accent-pending: var(--app-color-amber); --app-review-accent-approved: var(--app-color-success); --app-review-accent-rejected: var(--app-color-danger); /* ── Shell component token overrides ─────────────────────── */ --shell-bg: var(--app-color-surface); --shell-radius: 16px; --shell-shadow: 0 0 0 1px rgba(15, 23, 42, 0.04), 0 4px 24px rgba(15, 23, 42, 0.06); --shell-padding: 8px; /* ── App card component token overrides ──────────────────── */ --app-card-shadow: 0 0 0 1px rgba(15, 23, 42, 0.03), 0 1px 3px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.06); } /* ── Mobile token overrides ──────────────────────────────────── */ @media (max-width: 767.98px) { :root { --manager-bottom-nav-float-offset: 10px; --sb-bottom-nav-total-height: calc( var(--sb-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + var(--manager-bottom-nav-float-offset) ); --sb-page-inline-padding: 0px; } } } /* end @layer host */