/* TSSG Design Tokens — full system
Font: Inter (Google Fonts). Load in every page's :
SVG logos preferred over PNG for crispness at all sizes — swap when available.
*/
:root {
/* ── Font ──────────────────────────────────────────────────────── */
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
/* ── Type scale ────────────────────────────────────────────────── */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
/* Named type roles */
--type-metric-size: var(--text-4xl);
--type-metric-weight: 700;
--type-h1-size: var(--text-2xl);
--type-h1-weight: 700;
--type-h2-size: var(--text-xl);
--type-h2-weight: 600;
--type-h3-size: var(--text-lg);
--type-h3-weight: 600;
--type-label-size: var(--text-xs);
--type-label-weight: 600;
--type-label-spacing: 0.07em;
/* ── Spacing (base-4) ──────────────────────────────────────────── */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
/* ── Radius ────────────────────────────────────────────────────── */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 20px;
--radius-card: 12px;
--radius-pill: 9999px;
/* ── Shadows ───────────────────────────────────────────────────── */
--shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
--shadow-card: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.05);
--shadow-hover: 0 4px 8px rgba(0,0,0,0.08), 0 8px 28px rgba(0,0,0,0.07);
--shadow-dropdown: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
/* ── Transitions ───────────────────────────────────────────────── */
--transition-fast: 120ms ease;
--transition-base: 200ms ease;
--transition-slow: 300ms ease;
/* ── Layout ────────────────────────────────────────────────────── */
--sidebar-width: 240px;
--topbar-height: 60px;
/* ── Brand accent ──────────────────────────────────────────────── */
/* Yellow = accent ONLY. Use sparingly: primary CTA, active nav, key highlight. */
--color-accent: #F5C518;
--color-accent-fg: #0d0d0d; /* text ON yellow: always near-black */
--color-accent-soft: rgba(245,197,24,0.12);
/* ── Content area (light) ──────────────────────────────────────── */
--color-content-bg: #f4f5f7;
--color-card-bg: #ffffff;
--color-text-primary: #111111;
--color-text-secondary: #6b7280;
--color-text-muted: #9ca3af;
--color-border: #e5e7eb;
--color-divider: #f3f4f6;
/* ── Sidebar (dark) ────────────────────────────────────────────── */
--color-sidebar-bg: #0d0d0d;
--color-sidebar-border: rgba(255,255,255,0.07);
--color-sidebar-text: #d1d5db;
--color-sidebar-text-muted: #6b7280;
--color-sidebar-active-bg: rgba(245,197,24,0.12);
--color-sidebar-active-text: #F5C518;
--color-sidebar-hover-bg: rgba(255,255,255,0.05);
/* ── Section colours ───────────────────────────────────────────── */
--color-section-cubs: #F59E0B;
--color-section-scouts: #10B981;
--color-section-rovers: #3B82F6;
--color-section-leaders: #8B5CF6;
--color-section-cubs-soft: rgba(245,158,11,0.12);
--color-section-scouts-soft: rgba(16,185,129,0.12);
--color-section-rovers-soft: rgba(59,130,246,0.12);
--color-section-leaders-soft: rgba(139,92,246,0.12);
/* ── Status colours ────────────────────────────────────────────── */
--color-status-active: #16A34A;
--color-status-active-soft: rgba(22,163,74,0.12);
--color-status-pending: #CA8A04;
--color-status-pending-soft: rgba(202,138,4,0.12);
--color-status-paused: #2563EB;
--color-status-paused-soft: rgba(37,99,235,0.12);
--color-status-inactive: #EA580C;
--color-status-inactive-soft: rgba(234,88,12,0.12);
--color-status-removed: #DC2626;
--color-status-removed-soft: rgba(220,38,38,0.12);
/* ── Feedback ──────────────────────────────────────────────────── */
--color-error: #DC2626;
--color-success: #16A34A;
--color-warning: #CA8A04;
/* ── Legacy aliases (used in session 1 pages) ──────────────────── */
--color-bg: var(--color-card-bg);
--color-surface: var(--color-content-bg);
--color-brand-yellow: var(--color-accent);
--color-brand-black: var(--color-accent-fg);
--shadow-sm: var(--shadow-xs);
--shadow-md: var(--shadow-card);
--font-size-sm: var(--text-sm);
--font-size-base: var(--text-base);
--font-size-lg: var(--text-lg);
--font-size-xl: var(--text-xl);
--font-size-2xl: var(--text-2xl);
}
/* ── Base reset ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: 1.5;
color: var(--color-text-primary);
background: var(--color-content-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ── Type utility classes ──────────────────────────────────────────── */
.label-upper {
font-size: var(--type-label-size);
font-weight: var(--type-label-weight);
letter-spacing: var(--type-label-spacing);
text-transform: uppercase;
color: var(--color-text-muted);
}
.metric-number {
font-size: var(--type-metric-size);
font-weight: var(--type-metric-weight);
line-height: 1.1;
color: var(--color-text-primary);
letter-spacing: -0.02em;
}
.delta-positive { color: var(--color-status-active); font-size: var(--text-xs); font-weight: 500; }
.delta-negative { color: var(--color-status-removed); font-size: var(--text-xs); font-weight: 500; }
.delta-neutral { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 500; }