/* * AXES HUB — Centralized Theme v1.0 * * Single source of truth for all AXES services. * Change variables here → all services update. * * Usage: * * * Dark theme activates when or has class: * .dark-theme OR .dark OR .hub-mode */ /* ── Google Fonts ────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* ── Light Theme (default) ───────────────────────────── */ :root { /* Brand */ --ax-primary: #D52B1E; --ax-primary-hover: #B8231A; --ax-primary-light: rgba(213, 43, 30, 0.1); --ax-secondary: #667eea; --ax-secondary-hover: #5a6fd6; --ax-secondary-light: rgba(102, 126, 234, 0.1); /* Surfaces */ --ax-bg: #fafafa; --ax-bg-card: #ffffff; --ax-bg-elevated: #ffffff; --ax-bg-muted: #f1f5f9; --ax-bg-input: #ffffff; --ax-bg-hover: #f8fafc; /* Text */ --ax-text: #0f172a; --ax-text-secondary: #475569; --ax-text-muted: #64748b; --ax-text-on-primary: #ffffff; /* Borders & Lines */ --ax-border: #e2e8f0; --ax-border-strong: #cbd5e1; --ax-divider: #f1f5f9; /* Status */ --ax-success: #10b981; --ax-success-light: rgba(16, 185, 129, 0.1); --ax-warning: #f59e0b; --ax-warning-light: rgba(245, 158, 11, 0.1); --ax-error: #ef4444; --ax-error-light: rgba(239, 68, 68, 0.1); --ax-info: #3b82f6; --ax-info-light: rgba(59, 130, 246, 0.1); /* Shadows */ --ax-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --ax-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); --ax-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06); --ax-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); --ax-shadow-primary: 0 4px 14px rgba(213, 43, 30, 0.25); /* Shape */ --ax-radius-sm: 6px; --ax-radius: 10px; --ax-radius-lg: 14px; --ax-radius-xl: 20px; --ax-radius-full: 9999px; /* Typography */ --ax-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --ax-font-mono: 'Consolas', 'Monaco', 'Fira Code', monospace; --ax-leading: 1.6; /* Transitions */ --ax-transition: 150ms ease; --ax-transition-slow: 300ms ease; } /* ── Dark Theme ──────────────────────────────────────── */ .dark-theme, .dark, .hub-mode:not(.light-theme) { --ax-primary: #ef4444; --ax-primary-hover: #dc2626; --ax-primary-light: rgba(239, 68, 68, 0.12); --ax-secondary: #818cf8; --ax-secondary-hover: #6366f1; --ax-secondary-light: rgba(129, 140, 248, 0.12); --ax-bg: #111111; --ax-bg-card: #1e1e1e; --ax-bg-elevated: #222222; --ax-bg-muted: #222222; --ax-bg-input: #222222; --ax-bg-hover: #2a2a2a; --ax-text: #f1f5f9; --ax-text-secondary: #cbd5e1; --ax-text-muted: #94a3b8; --ax-text-on-primary: #ffffff; --ax-border: #2e2e2e; --ax-border-strong: #3a3a3a; --ax-divider: #222222; --ax-success: #34d399; --ax-success-light: rgba(52, 211, 153, 0.12); --ax-warning: #fbbf24; --ax-warning-light: rgba(251, 191, 36, 0.12); --ax-error: #f87171; --ax-error-light: rgba(248, 113, 113, 0.12); --ax-info: #60a5fa; --ax-info-light: rgba(96, 165, 250, 0.12); --ax-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --ax-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); --ax-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3); --ax-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.3); --ax-shadow-primary: 0 4px 14px rgba(239, 68, 68, 0.3); } /* ── Light Theme (explicit, overrides hub-mode dark) ── */ html.light-theme { --ax-primary: #D52B1E; --ax-primary-hover: #B8231A; --ax-primary-light: rgba(213, 43, 30, 0.1); --ax-secondary: #667eea; --ax-secondary-hover: #5a6fd6; --ax-secondary-light: rgba(102, 126, 234, 0.1); --ax-bg: #fafafa; --ax-bg-card: #ffffff; --ax-bg-elevated: #ffffff; --ax-bg-muted: #f1f5f9; --ax-bg-input: #ffffff; --ax-bg-hover: #f8fafc; --ax-text: #0f172a; --ax-text-secondary: #475569; --ax-text-muted: #64748b; --ax-text-on-primary: #ffffff; --ax-border: #e2e8f0; --ax-border-strong: #cbd5e1; --ax-divider: #f1f5f9; --ax-success: #10b981; --ax-warning: #f59e0b; --ax-error: #ef4444; --ax-info: #3b82f6; --ax-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --ax-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); --ax-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06); --ax-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); --ax-shadow-primary: 0 4px 14px rgba(213, 43, 30, 0.25); } /* ── Base Reset ──────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-family: var(--ax-font); line-height: var(--ax-leading); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background: var(--ax-bg); color: var(--ax-text); transition: background-color var(--ax-transition), color var(--ax-transition); } /* ── Typography ──────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { color: var(--ax-text); font-weight: 600; line-height: 1.3; } h1 { font-size: 1.875rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } h4 { font-size: 1.1rem; } p { color: var(--ax-text-secondary); } a { color: var(--ax-primary); text-decoration: none; transition: color var(--ax-transition); } a:hover { color: var(--ax-primary-hover); } small, .text-muted { color: var(--ax-text-muted); } code, pre { font-family: var(--ax-font-mono); } /* ── Scrollbar ───────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--ax-text-muted); border-radius: 3px; opacity: 0.4; } ::-webkit-scrollbar-thumb:hover { opacity: 0.6; } /* ── Focus Ring ──────────────────────────────────────── */ *:focus-visible { outline: 2px solid var(--ax-primary); outline-offset: 2px; } /* ── Selection ───────────────────────────────────────── */ ::selection { background: var(--ax-primary-light); color: var(--ax-text); }