/* Sovereign Architect — Universal Components Library v3 (token-based) * Brand colour controlled via --sa-brand-* CSS variables — overridden per-site. * Defaults match the WDM gold theme. * All component values use design tokens — no hardcoded colours/spacing. */ :root { /* Brand (default = WDM "Sovereign Architect" gold) */ --sa-brand-primary: #947f57; --sa-brand-primary-rgb: 148, 127, 87; --sa-brand-primary-hover: #a89569; --sa-brand-primary-soft: #f3eede; --sa-brand-primary-tint: #fafaf3; --sa-brand-primary-border: #e8e6dc; --sa-brand-primary-deep: #54480f; --sa-brand-primary-on-dark: #d4c89e; --sa-brand-secondary: #1f6f3d; --sa-brand-secondary-soft: #f0f9f4; --sa-brand-secondary-border: #c8e8d4; /* Surfaces */ --sa-surface: #fafafa; --sa-surface-card: #ffffff; --sa-surface-tinted: var(--sa-brand-primary-tint); --sa-surface-inverted: #1d1d1d; --sa-surface-deep: #0a0a0a; /* Text */ --sa-text-ink: #0a0a0a; --sa-text-body: #222222; --sa-text-muted: #666666; --sa-text-soft: #888888; --sa-text-on-dark: #cfcfcf; --sa-text-on-dark-muted: #999999; --sa-text-on-brand: #ffffff; /* Borders */ --sa-border: #e8e8e8; --sa-border-soft: #ececec; --sa-border-strong: #d4d4d4; --sa-border-brand: var(--sa-brand-primary-border); /* Semantic */ --sa-success: #1f6f3d; --sa-success-bg: #f0f9f4; --sa-success-border: #c8e8d4; --sa-warning: #c79100; --sa-warning-bg: #fff8e1; --sa-warning-border: #ffd966; --sa-danger: #a04040; --sa-danger-bg: #fdf2f2; --sa-danger-border: #f5c6c6; --sa-info: #5fa8ea; --sa-info-bg: #e8f4fd; --sa-info-border: #b6d8f0; /* Type families — override per-site */ --sa-font-display: 'Iowan Old Style', Iowan, Georgia, 'Times New Roman', serif; --sa-font-body: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --sa-font-mono: 'JetBrains Mono', Menlo, Consolas, monospace; /* Type scale */ --sa-text-xs: 0.75rem; --sa-text-sm: 0.8125rem; --sa-text-base: 0.9375rem; --sa-text-md: 1rem; --sa-text-lg: 1.0625rem; --sa-text-xl: 1.1875rem; --sa-text-2xl: 1.5rem; --sa-text-3xl: 1.875rem; --sa-text-4xl: 2.25rem; --sa-text-5xl: clamp(2rem, 5vw, 3.25rem); /* Weights */ --sa-weight-regular: 400; --sa-weight-medium: 500; --sa-weight-semibold: 600; --sa-weight-bold: 700; /* Line heights */ --sa-leading-tight: 1.1; --sa-leading-snug: 1.25; --sa-leading-normal: 1.55; --sa-leading-relaxed: 1.65; --sa-leading-loose: 1.7; /* Letter spacing */ --sa-tracking-tightest: -0.025em; --sa-tracking-tight: -0.015em; --sa-tracking-normal: 0; --sa-tracking-wide: 0.04em; --sa-tracking-wider: 0.1em; --sa-tracking-widest: 0.16em; /* Spacing scale (8px base) */ --sa-space-1: 4px; --sa-space-2: 8px; --sa-space-3: 12px; --sa-space-4: 16px; --sa-space-5: 20px; --sa-space-6: 24px; --sa-space-8: 32px; --sa-space-10: 40px; --sa-space-12: 48px; --sa-space-16: 64px; --sa-space-20: 80px; --sa-space-24: 96px; /* Radius */ --sa-radius-sm: 3px; --sa-radius-md: 5px; --sa-radius-lg: 6px; --sa-radius-xl: 8px; --sa-radius-full: 999px; /* Shadow */ --sa-shadow-1: 0 1px 2px rgba(0,0,0,.04); --sa-shadow-2: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06); --sa-shadow-3: 0 4px 16px rgba(0,0,0,.08); --sa-shadow-4: 0 8px 32px rgba(0,0,0,.12); --sa-shadow-5: 0 20px 80px rgba(0,0,0,.4); --sa-shadow-brand: 0 6px 18px rgba(var(--sa-brand-primary-rgb), 0.18); /* Motion */ --sa-duration-fast: 150ms; --sa-duration-normal: 250ms; --sa-duration-slow: 400ms; --sa-easing-standard: cubic-bezier(0.2, 0, 0, 1); --sa-easing-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1); } /* === Per-site theme overrides === * Each site can either inject a