@layer host { /* ============================================ ScoutBadger Public — Theme Token Overrides Token-only overrides. No component selectors. Zero !important declarations. Loaded AFTER scoutbadger-ui.css. Place BEFORE public-radzen-overrides.css. ============================================ */ :root { /* ── Typography ────────────────────────────────────────────── Poppins is friendly, geometric & modern — perfect for a younger audience. Already loaded via Google Fonts. ──────────────────────────────────────────────────────── */ --app-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --app-font-family-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Slightly bumped for mobile readability */ --app-font-size-base: 0.9375rem; /* 15px */ --app-font-size-caption: 0.8125rem; /* 13px */ --app-font-size-meta: 0.875rem; /* 14px */ --app-font-size-body: 0.9375rem; /* 15px */ --app-font-size-title: 1.0625rem; /* 17px */ --app-font-weight-bold: 600; /* ── Primary color — Vivid scout orange ──────────────────── */ --app-color-primary: #f97316; --app-color-primary-dark: #ea580c; --app-color-primary-light: #fff7ed; --app-color-primary-text: #ffffff; /* Override shared token default (green) so all components using --sb-public-primary inherit the orange palette */ --sb-public-primary: var(--app-color-primary); /* ── Surfaces — Clean & slightly warm ────────────────────── */ --app-color-surface: #ffffff; --app-color-surface-alt: #f8fafb; --app-color-surface-muted: #f1f5f9; /* ── Text — Slate palette (readable, not harsh) ──────────── */ --app-color-text: #1e293b; /* Slate-900 */ --app-color-text-muted: #64748b; /* Slate-500 */ --app-color-text-secondary: #94a3b8; /* Slate-400 */ /* ── Borders — Light & subtle ────────────────────────────── */ --app-color-border: #e2e8f0; /* Slate-200 */ /* ── Warm amber/orange accent — complements primary ──────── */ --app-color-teal: #ea580c; --app-color-teal-light: #ffedd5; --app-color-teal-hover: #fed7aa; --app-color-teal-border: #fdba74; --app-color-teal-muted: rgba(234, 88, 12, 0.10); /* ── Amber accent — Warmer & friendlier ──────────────────── */ --app-color-amber: #f59e0b; --app-color-amber-light: #fef3c7; --app-color-amber-muted: rgba(245, 158, 11, 0.10); /* ── Corners — Rounder = more playful ────────────────────── */ --app-radius-s: 0.625rem; /* 10px */ --app-radius-m: 1rem; /* 16px */ --app-radius-l: 1.25rem; /* 20px */ --sb-radius-card: 1rem; /* Friendly card corners */ /* ── Shadows — Soft, tinted depth ────────────────────────── */ --app-shadow-s: 0 2px 8px rgba(var(--app-primary-rgb), 0.06), 0 1px 3px rgba(0, 0, 0, 0.04); --app-shadow-m: 0 4px 16px rgba(var(--app-primary-rgb), 0.08), 0 2px 6px rgba(0, 0, 0, 0.04); --app-shadow-focus: 0 0 0 3px rgba(var(--app-primary-rgb), 0.30); /* ── Chips — Orange-tinted active states ──────────────────── */ --app-chip-bg: #f1f5f9; --app-chip-bg-hover: #e2e8f0; --app-chip-border: #cbd5e1; --app-chip-color: #475569; --app-chip-color-hover: #1e293b; --app-chip-active-bg: #ffedd5; --app-chip-active-border: #fdba74; --app-chip-active-color: #9a3412; --app-chip-active-bg-hover: #fed7aa; /* ── Stats — Vibrant data colours ────────────────────────── */ --app-stat-color-default: #1e293b; --app-stat-color-warning: var(--app-color-amber); --app-stat-color-success: #059669; /* Emerald-600 */ --app-stat-color-muted: #94a3b8; /* ── Transitions — Snappy, responsive feel ───────────────── */ --sb-transition-fast: 120ms cubic-bezier(0.2, 0, 0.2, 1); --sb-transition-base: 200ms cubic-bezier(0.2, 0, 0.2, 1); /* ── Spacing — Generous touch targets ────────────────────── */ --app-spacing-xs: 0.375rem; /* 6px */ --app-spacing-s: 0.625rem; /* 10px */ /* ── RGB channels — enables rgba(var(--app-primary-rgb), 0.xx) ─── */ --app-primary-rgb: 249, 115, 22; --app-primary-dark-rgb: 234, 88, 12; --app-surface-alt-rgb: 248, 250, 252; --app-dark-rgb: 2, 6, 23; /* ── Status colors ────────────────────────────────────────────── */ --app-color-success: #059669; --app-color-success-muted: rgba(5, 150, 105, 0.10); --app-color-error: #dc2626; --app-color-info: #0284c7; --app-color-info-muted: rgba(2, 132, 199, 0.12); /* ── Status badge tokens (align with public palette) ─────────── */ --sb-status-approved: #059669; /* Emerald-600 */ --sb-status-approved-bg: rgba(5, 150, 105, 0.10); --sb-status-rejected: #dc2626; /* Red-600 */ --sb-status-rejected-bg: rgba(220, 38, 38, 0.10); --sb-status-in-progress: #0284c7; /* Sky-600 */ --sb-status-in-progress-bg: rgba(2, 132, 199, 0.10); /* ── Overlay / glass ─────────────────────────────────────────── */ --app-color-overlay: rgba(2, 6, 23, 0.35); --app-color-overlay-soft: rgba(2, 6, 23, 0.25); /* ── Text on colored/dark backgrounds ────────────────────────── */ /* ── Stat card icon colors ───────────────────────────────────── */ --app-stat-icon-1-bg: rgba(var(--app-primary-rgb), 0.14); --app-stat-icon-1-color: var(--app-color-primary-dark); /* ── Review card triage accents ─────────────────────────────── */ --app-review-accent-approved: #059669; --app-review-accent-rejected: #dc2626; /* ── Hero / gradient ─────────────────────────────────────────── */ --app-gradient-shimmer: linear-gradient(90deg, rgba(var(--app-primary-rgb), 0.05), rgba(var(--app-primary-rgb), 0.55), rgba(var(--app-primary-dark-rgb), 0.45), rgba(var(--app-primary-dark-rgb), 0.05)); /* ── Body background ─────────────────────────────────────────── */ --app-color-body-bg: #fff7ed; /* ── RGB channels (match public status palette) ─────────────── */ --app-color-danger-rgb: 220, 38, 38; /* matches #dc2626 */ --app-color-success-rgb: 5, 150, 105; /* matches #059669 */ --app-color-amber-rgb: 245, 158, 11; /* matches #f59e0b */ --app-color-info-rgb: 2, 132, 199; /* matches #0284c7 */ /* ── Extended success (Emerald, matching --app-color-success) ── */ --app-color-success-dark: #047857; /* Emerald-700 */ --app-color-success-bg: #d1fae5; /* Emerald-100 */ --app-color-success-bg-light: #ecfdf5; /* Emerald-50 */ --app-color-success-border: #6ee7b7; /* Emerald-300 */ /* ── Extended error (matching --app-color-error: #dc2626) ────── */ --app-color-error-muted: rgba(220, 38, 38, 0.10); --app-color-danger-light: #ef4444; /* Red-500 */ /* ── Amber accent (warmer for public) ───────────────────────── */ --app-color-amber-accent: #fb923c; /* Orange-400 */ /* ── Primary muted (orange instead of green) ────────────────── */ --app-color-primary-muted: #c2410c; /* Orange-700 */ /* ── Gradient tokens (orange-based) ─────────────────────────── */ --app-gradient-hero-dark: linear-gradient(135deg, #7c2d12 0%, #9a3412 100%); --app-gradient-success: linear-gradient(90deg, #34d399, #059669); /* ── Semantic Text Colors ───────────────────────────────────── Aliases for heading/body text used by feature components. ──────────────────────────────────────────────────────── */ --app-color-text-heading: var(--app-color-text-deep); --app-color-text-body: var(--app-color-text); /* ── Shell Tokens ───────────────────────────────────────────── Fallback values for shell.css token system. The primary overrides are applied on-selector in public-radzen-overrides.css because shell.css sets defaults at selector scope. ──────────────────────────────────────────────────────── */ --shell-radius: 1.75rem; --topbar-radius: 1.15rem; --nav-radius: 1.2rem; /* ── Stat Card Icon Tokens ──────────────────────────────────── Per-position icon colors for the dashboard stat cards. ──────────────────────────────────────────────────────── */ --app-stat-icon-2-bg: rgba(2, 132, 199, 0.14); --app-stat-icon-2-color: #0284c7; --app-stat-icon-3-bg: rgba(100, 116, 139, 0.14); --app-stat-icon-3-color: #475569; /* View transition */ --vt-default-new-animation: sb-fade-in; /* Card hover */ --app-card-hover-transform: translateY(-2px); --app-card-hover-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 10px -5px rgba(0, 0, 0, 0.04); /* Notification overrides */ --notification-divider-color: var(--app-color-primary); --notification-divider-line: rgba(var(--app-primary-rgb), 0.18); --notification-unread-border: 3px solid var(--app-color-primary); --notification-unread-padding-left: calc(0.75rem - 3px); --notification-action-radius: 50%; --notification-action-hover-transform: scale(1.08); /* ── Radzen Theme Mapping ───────────────────────────────────── Map Radzen's built-in CSS variables to our token system so Radzen components inherit the Public orange palette. ──────────────────────────────────────────────────────── */ --rz-primary: var(--app-color-primary); --rz-primary-lighter: var(--app-color-primary-light); --rz-primary-dark: var(--app-color-primary-dark); } } /* end @layer host */