/* * X-ID Theme System * ================== * Base CSS custom properties for the entire platform. * Supports light/dark mode via data-theme attribute on . * Typography scaling via --xid-font-scale and --xid-font-size-base. * * Usage: * * * */ /* ================================================================= Dark Mode (default) ================================================================= */ :root, [data-theme="dark"] { /* Backgrounds */ --xid-bg-primary: #0a0a1a; --xid-bg-secondary: #111128; --xid-bg-card: #1a1a3e; --xid-bg-input: #0d0d24; /* Text */ --xid-text-primary: #e0e0ff; --xid-text-secondary: #8888aa; --xid-text-muted: #555577; /* Borders */ --xid-border: #2a2a4a; /* Accent / Brand */ --xid-accent: #6c5ce7; --xid-accent-hover: #7c6cf7; --xid-accent-rgb: 108, 92, 231; /* Semantic */ --xid-success: #00d68f; --xid-warning: #ffaa00; --xid-danger: #ff3d71; --xid-info: #0095ff; /* Links */ --xid-link: #818cf8; /* Shadows */ --xid-shadow: rgba(0, 0, 0, 0.4); --xid-shadow-accent: rgba(108, 92, 231, 0.3); /* Glass / Overlay */ --xid-glass: rgba(108, 92, 231, 0.05); --xid-glass-border: rgba(108, 92, 231, 0.2); --xid-overlay: rgba(0, 0, 0, 0.6); /* Gradients */ --xid-gradient-primary: linear-gradient(135deg, var(--xid-accent) 0%, #06B6D4 100%); --xid-gradient-bg: linear-gradient(180deg, var(--xid-bg-primary) 0%, var(--xid-bg-secondary) 100%); color-scheme: dark; } /* ================================================================= Light Mode ================================================================= */ [data-theme="light"] { --xid-bg-primary: #f5f5fa; --xid-bg-secondary: #ffffff; --xid-bg-card: #ffffff; --xid-bg-input: #f0f0f5; --xid-text-primary: #1a1a2e; --xid-text-secondary: #4a4a6a; --xid-text-muted: #8888aa; --xid-border: #d0d0e0; --xid-accent: #6c5ce7; --xid-accent-hover: #5a4bd6; --xid-accent-rgb: 108, 92, 231; --xid-success: #00b074; --xid-warning: #e69500; --xid-danger: #e63950; --xid-info: #0080dd; --xid-link: #6c5ce7; --xid-shadow: rgba(0, 0, 0, 0.08); --xid-shadow-accent: rgba(108, 92, 231, 0.15); --xid-glass: rgba(108, 92, 231, 0.04); --xid-glass-border: rgba(108, 92, 231, 0.12); --xid-overlay: rgba(255, 255, 255, 0.7); --xid-gradient-primary: linear-gradient(135deg, var(--xid-accent) 0%, #06B6D4 100%); --xid-gradient-bg: linear-gradient(180deg, var(--xid-bg-primary) 0%, var(--xid-bg-secondary) 100%); color-scheme: light; } /* ================================================================= Typography Variables ================================================================= */ :root { --xid-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --xid-font-size-base: 15px; --xid-font-scale: 1.0; /* Computed sizes (scale proportionally) */ --xid-font-size-xs: calc(var(--xid-font-size-base) * 0.75 * var(--xid-font-scale)); --xid-font-size-sm: calc(var(--xid-font-size-base) * 0.875 * var(--xid-font-scale)); --xid-font-size-md: calc(var(--xid-font-size-base) * var(--xid-font-scale)); --xid-font-size-lg: calc(var(--xid-font-size-base) * 1.25 * var(--xid-font-scale)); --xid-font-size-xl: calc(var(--xid-font-size-base) * 1.5 * var(--xid-font-scale)); --xid-font-size-2xl: calc(var(--xid-font-size-base) * 2.0 * var(--xid-font-scale)); --xid-font-size-3xl: calc(var(--xid-font-size-base) * 2.5 * var(--xid-font-scale)); /* Spacing (scales with font) */ --xid-space-xs: calc(4px * var(--xid-font-scale)); --xid-space-sm: calc(8px * var(--xid-font-scale)); --xid-space-md: calc(16px * var(--xid-font-scale)); --xid-space-lg: calc(24px * var(--xid-font-scale)); --xid-space-xl: calc(32px * var(--xid-font-scale)); /* Radii */ --xid-radius-sm: 8px; --xid-radius-md: 12px; --xid-radius-lg: 16px; --xid-radius-xl: 20px; } /* ================================================================= Smooth Transitions (theme switching) Respects prefers-reduced-motion. ================================================================= */ @media (prefers-reduced-motion: no-preference) { body, body * { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } } @media (prefers-reduced-motion: reduce) { body, body * { transition: none !important; } } /* ================================================================= Base Styles Using Variables ================================================================= */ body { font-family: var(--xid-font-family); font-size: var(--xid-font-size-md); background-color: var(--xid-bg-primary); color: var(--xid-text-primary); line-height: 1.6; } a { color: var(--xid-link); text-decoration: none; } a:hover { color: var(--xid-accent-hover); } h1, h2, h3, h4, h5, h6 { color: var(--xid-text-primary); } h1 { font-size: var(--xid-font-size-3xl); } h2 { font-size: var(--xid-font-size-2xl); } h3 { font-size: var(--xid-font-size-xl); } h4 { font-size: var(--xid-font-size-lg); } small, .text-sm { font-size: var(--xid-font-size-sm); } .text-xs { font-size: var(--xid-font-size-xs); } .text-muted { color: var(--xid-text-muted); } /* ================================================================= Utility: Theme-Aware Card ================================================================= */ .xid-card { background: var(--xid-bg-card); border: 1px solid var(--xid-border); border-radius: var(--xid-radius-lg); padding: var(--xid-space-lg); box-shadow: 0 4px 16px var(--xid-shadow); } .xid-input { background: var(--xid-bg-input); border: 1px solid var(--xid-border); border-radius: var(--xid-radius-md); padding: 10px 14px; color: var(--xid-text-primary); font-family: var(--xid-font-family); font-size: var(--xid-font-size-md); width: 100%; outline: none; } .xid-input:focus { border-color: var(--xid-accent); box-shadow: 0 0 0 3px rgba(var(--xid-accent-rgb), 0.2); } .xid-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: var(--xid-radius-md); font-weight: 600; font-size: var(--xid-font-size-md); font-family: var(--xid-font-family); cursor: pointer; border: none; transition: all 0.2s ease; } .xid-btn-primary { background: var(--xid-gradient-primary); color: #fff; } .xid-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px var(--xid-shadow-accent); } .xid-btn-secondary { background: var(--xid-glass); border: 1px solid var(--xid-border); color: var(--xid-text-primary); } .xid-btn-secondary:hover { background: rgba(var(--xid-accent-rgb), 0.1); border-color: var(--xid-accent); } .xid-btn-danger { background: var(--xid-danger); color: #fff; } .xid-btn-danger:hover { opacity: 0.9; transform: translateY(-1px); } /* ================================================================= Toast Notification ================================================================= */ .xid-toast { position: fixed; bottom: 24px; right: 24px; padding: 14px 24px; background: var(--xid-bg-card); border: 1px solid var(--xid-border); border-radius: var(--xid-radius-md); color: var(--xid-text-primary); font-size: var(--xid-font-size-sm); box-shadow: 0 8px 32px var(--xid-shadow); z-index: 10000; transform: translateY(120%); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; max-width: 400px; } .xid-toast.show { transform: translateY(0); opacity: 1; } .xid-toast.success { border-left: 4px solid var(--xid-success); } .xid-toast.warning { border-left: 4px solid var(--xid-warning); } .xid-toast.error { border-left: 4px solid var(--xid-danger); } .xid-toast.info { border-left: 4px solid var(--xid-info); }