/* ========================================================================= mil-lib design tokens — THE single source of colour, spacing, typography. No other stylesheet or view may contain a raw hex value; everything consumes these custom properties. Two themes: dark (default) and light, switched via . The brand accent is overridden at runtime from the branding.accent_colour setting (injected inline in the layout head), so one setting recolours the whole app. ========================================================================= */ :root { /* ---- Brand accent (overridden inline from settings) ---- */ --mil-accent: #c0392b; --mil-accent-contrast: #ffffff; --mil-accent-strong: color-mix(in srgb, var(--mil-accent), #000000 18%); --mil-accent-soft: color-mix(in srgb, var(--mil-accent) 14%, transparent); --mil-focus-ring: color-mix(in srgb, var(--mil-accent) 35%, transparent); /* Lighter accent — the login button's hover, mirroring mil-vms's secondary. */ --mil-accent-bright: color-mix(in srgb, var(--mil-accent), #ffffff 14%); /* Always-white paper surface — QR quiet zone, printed cards. Theme-independent. */ --mil-paper: #ffffff; --mil-ink: #1a1a1a; /* print black */ --mil-print-rule: #999999; /* register grid lines */ --mil-print-head: #e9e9e9; /* register header fill */ /* Decorative process-step stages on the splash (not brand/theme colours). */ --mil-step-1: #31d158; --mil-step-2: #19c3b1; --mil-step-3: #54a8ff; --mil-step-4: #f6c445; --mil-step-5: #ff8b38; --mil-step-6: #ff4d4f; /* ---- Chrome (topbar + menubar): dark in BOTH themes ---- */ --mil-chrome-bg: #0d0d0d; --mil-chrome-2: #14161a; --mil-chrome-text: #f2f2f2; --mil-chrome-muted: rgba(255, 255, 255, 0.58); --mil-chrome-hover: rgba(255, 255, 255, 0.08); --mil-chrome-border: rgba(255, 255, 255, 0.10); /* ---- Status ---- */ --mil-success: #2e7d32; --mil-danger: #c62828; --mil-warning: #f9a825; --mil-info: #1565c0; /* ---- Shadows / overlays ---- */ --mil-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); --mil-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35); --mil-backdrop: rgba(0, 0, 0, 0.55); /* ---- Spacing scale ---- */ --mil-space-1: 4px; --mil-space-2: 8px; --mil-space-3: 12px; --mil-space-4: 16px; --mil-space-5: 24px; --mil-radius: 4px; --mil-radius-sm: 3px; /* ---- Typography ---- */ --mil-font-sans: 'Open Sans', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --mil-font-mono: 'Consolas', 'SFMono-Regular', Menlo, monospace; --mil-fs-base: 15px; --mil-fs-sm: 12px; --mil-fs-xs: 10px; --mil-fs-lg: 18px; --mil-tracking: 0.12em; --mil-tracking-wide: 0.22em; } /* ---- Dark theme (default) ---- */ :root, :root[data-bs-theme="dark"] { --mil-bg: #0b0b0c; --mil-surface: #16171a; --mil-surface-2: #1e2024; --mil-border: #2b2d32; --mil-text: #e6e6e6; --mil-muted: #9aa0a6; /* Semantic FIGURE colours — tuned for legible text on the card surface in this theme, and kept clear of the crimson brand accent. On dark they run a touch brighter than the filled --mil-status tokens so numbers pop. */ --mil-fg-success: #4caf50; --mil-fg-warning: #ffb300; --mil-fg-danger: #ef5350; --mil-bg-image: radial-gradient(1200px 600px at 50% -10%, var(--mil-accent-soft), transparent 60%), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.012) 0 2px, transparent 2px 4px); /* Auth (splash + login) palette — dark. */ --mil-auth-bg: linear-gradient(165deg, #0a0a0a 0%, #1a1a1a 40%, #111111 100%); --mil-auth-panel: rgba(255, 255, 255, 0.02); --mil-auth-panel-2: rgba(255, 255, 255, 0.03); --mil-auth-hairline: rgba(255, 255, 255, 0.06); --mil-auth-input-bg: rgba(255, 255, 255, 0.05); --mil-auth-input-border: rgba(255, 255, 255, 0.10); --mil-auth-text: #ffffff; --mil-auth-heading-2: rgba(255, 255, 255, 0.85); --mil-auth-muted: rgba(255, 255, 255, 0.42); --mil-auth-faint: rgba(255, 255, 255, 0.25); --mil-auth-ghost: rgba(255, 255, 255, 0.12); } /* ---- Light theme ---- */ :root[data-bs-theme="light"] { /* Background is the warm "Claude" off-white (cream ivory), not stark white or cool grey — surfaces stay a touch lighter/warmer so cards lift off the page, and borders are warmed to match so nothing reads cool against the cream. */ --mil-bg: #f5f4ee; --mil-surface: #fcfbf7; --mil-surface-2: #eeede4; --mil-border: #e2ded2; --mil-text: #1e293b; --mil-muted: #64748b; /* Darker on white for legible text contrast — amber especially must not be the pale #f9a825, which washes out on a white card. */ --mil-fg-success: #2e7d32; --mil-fg-warning: #b26a00; --mil-fg-danger: #c62828; --mil-bg-image: radial-gradient(1200px 600px at 50% -10%, var(--mil-accent-soft), transparent 60%); --mil-shadow: 0 12px 34px rgba(15, 23, 42, 0.14); --mil-shadow-sm: 0 3px 10px rgba(15, 23, 42, 0.10); /* Auth (splash + login) palette — light. Warm cream, matching --mil-bg so the guest screens carry the same off-white as the rest of the app. */ --mil-auth-bg: linear-gradient(165deg, #efede3 0%, #f7f6f0 45%, #f5f4ee 100%); --mil-auth-panel: rgba(60, 50, 30, 0.02); --mil-auth-panel-2: #fcfbf7; --mil-auth-hairline: rgba(60, 50, 30, 0.12); --mil-auth-input-bg: #ffffff; --mil-auth-input-border: rgba(15, 23, 42, 0.16); --mil-auth-text: #17233a; --mil-auth-heading-2: rgba(23, 35, 58, 0.72); --mil-auth-muted: #64748b; --mil-auth-faint: #94a3b8; --mil-auth-ghost: rgba(15, 23, 42, 0.18); }