/* ============================================================ THE KAC FLOCK — tokens.css THE single source of truth for design tokens. ------------------------------------------------------------ Replaces and supersedes: · design-tokens.css · design-tokens-v2.css · the token/:root blocks in app-consolidated.css & crm-v2.css Keep ONLY this file's :root definitions. Migrate any unique values from the above into here, then delete them and their tags from base.html. Font is referenced via variables everywhere, so the whole app reflows by changing the two --font-* lines below + one . ============================================================ */ /* --- Font loading (put this single line in base.html ) --- Then DELETE the old Plus Jakarta Sans / Outfit links. */ :root { /* ===== TYPOGRAPHY — defined ONCE ===== */ --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace; /* Display weight (Space Grotesk reads strongest at 700) */ --font-weight-display: 700; --font-weight-bold: 600; --font-weight-medium: 500; --font-weight-regular: 400; /* Type scale — base lifted 14 → 16px for the multi-generational audience. Smallest UI text floored at 13px. */ --text-2xs: 0.6875rem; /* 11px — micro labels only */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px — smallest body/UI text */ --text-base:1rem; /* 16px — DEFAULT body (was 0.875rem) */ --text-md: 1.0625rem; /* 17px */ --text-lg: 1.1875rem; /* 19px — card titles */ --text-xl: 1.375rem; /* 22px */ --text-2xl: 1.5rem; /* 24px — section headings */ --text-3xl: 2rem; /* 32px — page titles */ --text-4xl: 2.5rem; /* 40px */ --leading-tight: 1.15; --leading-snug: 1.35; --leading-base: 1.6; --tracking-tight:-0.02em; /* ===== BRAND COLOUR — resolves the 3-way purple conflict ===== */ /* CANONICAL: variables.css values win. #8b5cf6 and the COLOR_PALETTE #7c3aed-as-primary are deprecated — do not reintroduce. */ --purple-50: #faf5ff; --purple-100: #f3e8ff; --purple-200: #e9d5ff; --purple-300: #d8b4fe; --purple-400: #c084fc; --purple-500: #a855f7; --purple-600: #9333ea; /* ◆ PRIMARY */ --purple-700: #7c3aed; /* primary-dark / hover */ --purple-800: #6b21a8; --purple-900: #581c87; --primary: var(--purple-600); --primary-dark: var(--purple-700); --primary-light: var(--purple-500); --primary-soft: rgba(147, 51, 234, 0.10); --accent: #3b82f6; /* electric blue */ --accent-dark: #2563eb; --accent-soft: rgba(59, 130, 246, 0.10); /* ===== SEMANTIC — one green, not two ===== */ /* CANONICAL: #22c55e. The docs' #10b981 is deprecated. */ --success: #22c55e; --success-dark: #16a34a; --success-soft: rgba(34, 197, 94, 0.10); --warning: #f59e0b; --warning-dark: #d97706; --warning-soft: rgba(245, 158, 11, 0.10); --danger: #ef4444; --danger-dark: #dc2626; --danger-soft: rgba(239, 68, 68, 0.10); --info: #06b6d4; --info-dark: #0891b2; --info-soft: rgba(6, 182, 212, 0.10); /* ===== ORGANISATION WAYFINDING ===== */ --org-head: var(--purple-600); /* Head Church */ --org-kan: var(--accent); /* KAN locations */ --org-kac: var(--success); /* KAC organisations */ --org-branch: var(--warning); /* Branch churches */ /* ===== GRADIENTS ===== */ --gradient-primary: linear-gradient(135deg, #9333ea 0%, #3b82f6 100%); --gradient-primary-hover: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%); --gradient-success: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); --gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); /* ===== NEUTRALS ===== */ --gray-25: #fcfcfd; --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-150: #eaecf0; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; --gray-950: #030712; /* ===== SURFACES & TEXT ===== */ --background: #ffffff; --background-secondary: #f8fafc; --background-tertiary: #f1f5f9; --surface: #ffffff; --surface-hover: #f8fafc; --border: rgba(0, 0, 0, 0.08); --border-subtle: rgba(0, 0, 0, 0.04); --border-strong: rgba(0, 0, 0, 0.12); --text-primary: #0f172a; --text-secondary: #374151; --text-tertiary: #4b5563; --text-muted: #64748b; /* min for body-on-white at AA */ --text-inverse: #ffffff; /* ===== RADIUS ===== */ --radius-sm: 4px; --radius: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-full: 9999px; /* ===== SHADOWS ===== */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04); --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.08), 0 4px 8px -2px rgba(0, 0, 0, 0.04); --shadow-xl: 0 20px 40px -8px rgba(0, 0, 0, 0.10), 0 8px 16px -4px rgba(0, 0, 0, 0.06); --shadow-primary: 0 4px 14px rgba(147, 51, 234, 0.25); /* ===== SPACING (unchanged — variables.css scale is good) ===== */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* ===== MOTION ===== */ --duration-fast: 100ms; --duration-normal: 200ms; --duration-slow: 300ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); /* ===== LAYOUT ===== */ --sidebar-width: 280px; --header-height: 64px; --container-max-width: 1280px; } /* ===== BASE TYPE APPLICATION ===== Apply these so components inherit the new font + 16px base without per-component overrides or !important. */ html { font-size: 100%; } /* respect user zoom */ body { font-family: var(--font-sans); font-size: var(--text-base); /* 16px */ line-height: var(--leading-base); color: var(--text-secondary); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .page-title, .widget-value, .card-title { font-family: var(--font-display); font-weight: var(--font-weight-display); letter-spacing: var(--tracking-tight); color: var(--text-primary); } /* ===== ACCESSIBILITY (carried over from variables.css) ===== */ :focus-visible { outline: none; box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--primary); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media (prefers-contrast: high) { :root { --border: var(--gray-900); --text-muted: var(--gray-700); } }