/* ═══════════════════════════════════════════════════════════════════════════ Campus365 — design tokens ═══════════════════════════════════════════════════════════════════════════ THE ONLY FILE IN THIS REPOSITORY THAT MAY CONTAIN A COLOUR LITERAL. Everything else — .razor, other .css — references these variables. Campus365.Architecture.Tests.SourceRuleTests.No_colour_literals_outside_the_theme_token_file fails the build on a stray hex value, because ChurchWorks ended up with three conflicting definitions of its own brand colour and no way to tell which one was authoritative. Campus365 keeps the eLivecode design system — structure, spacing, typography, component conventions — but takes its own accent: indigo rather than the family emerald, so it reads as a distinct product while staying recognisably part of the family. ─────────────────────────────────────────────────────────────────────────── */ :root { /* ── Brand: indigo ── */ --c365-brand-25: #f5f6ff; --c365-brand-50: #eef1ff; --c365-brand-100: #e0e5ff; --c365-brand-200: #c6cfff; --c365-brand-300: #a3b0fd; --c365-brand-400: #7f8bf9; --c365-brand-500: #5b63f0; --c365-brand-600: #4a45e0; --c365-brand-700: #3f36c4; --c365-brand-800: #342e9e; --c365-brand-900: #2e2b7d; --c365-brand-950: #1d1b4b; --c365-brand: var(--c365-brand-600); --c365-brand-contrast: #ffffff; --c365-brand-soft: rgba(74, 69, 224, 0.10); /* ── Surfaces and text ── */ --c365-background: #f8f9fc; --c365-surface: #ffffff; --c365-surface-muted: #f2f4f8; --c365-foreground: #101828; --c365-muted-foreground: #667085; --c365-border: #e4e7ec; --c365-border-strong: #d0d5dd; --c365-hover-bg: #f2f4f7; /* ── Semantic states ── */ --c365-success: #067647; --c365-success-bg: #ecfdf3; --c365-warning: #b54708; --c365-warning-bg: #fffaeb; --c365-danger: #b42318; --c365-danger-bg: #fef3f2; --c365-info: #175cd3; --c365-info-bg: #eff8ff; /* ── Typography ── */ --c365-font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --c365-font-mono: "JetBrains Mono", Consolas, "Courier New", monospace; --c365-font-size-base: 14px; --c365-line-height: 1.6; /* ── Spacing and shape ── */ --c365-radius-sm: 4px; --c365-radius: 8px; --c365-radius-lg: 12px; --c365-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05); --c365-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.10); } /* Dark mode is a token swap, never a second stylesheet. Toggled by a class on set before first paint, so there is no flash of the light theme. */ html.dark { --c365-brand: var(--c365-brand-400); --c365-brand-contrast: #10132b; --c365-brand-soft: rgba(127, 139, 249, 0.14); --c365-background: #0c0e18; --c365-surface: #141726; --c365-surface-muted: #1b1f30; --c365-foreground: #e6e8ef; --c365-muted-foreground: #98a2b3; --c365-border: #262b3d; --c365-border-strong: #333a50; --c365-hover-bg: #1b1f30; --c365-success-bg: #052e1c; --c365-warning-bg: #2e1c05; --c365-danger-bg: #2e0f0c; --c365-info-bg: #06203f; }