/* QI Token Foundation — single source of truth Layer 0: only values. No HTML. No components. Theme modes are applied via . Tenant colors are injected at runtime via QI.theme.apply(). */ /* Default + dark mode */ :root, [data-mode="dark"] { /* Core identity */ --qi-bg: #050B09; --qi-surface: #1f2833; --qi-surface-2: #2a3545; --qi-surface-3: #3a4556; --qi-text: #F5F7F8; --qi-text-muted: #9AA5A8; --qi-text-inverse: #0b0c10; /* Energy & accent palette */ --qi-accent: #66fcf1; --qi-accent-dim: rgba(102, 252, 241, 0.15); --qi-energy: #35c99a; --qi-energy-dim: #2b9d7a; --qi-trust: #d4af37; --qi-trust-light: #f3e6a7; --qi-trust-dark: #8f6e0b; /* Glass */ --qi-glass: rgba(255, 255, 255, .08); --qi-glass-light: rgba(255, 255, 255, .12); --qi-glass-border: rgba(255, 255, 255, .18); /* Semantic */ --qi-error: #ff6b6b; --qi-success: #6bffb8; --qi-info: #6b9fff; /* Legacy brand aliases */ --qi-gold: var(--qi-trust); --qi-gold-light: var(--qi-trust-light); --qi-gold-dark: var(--qi-trust-dark); --qi-green: var(--qi-energy); --qi-glow: rgba(53, 201, 154, .35); /* Spacing */ --qi-space-1: 4px; --qi-space-2: 8px; --qi-space-3: 16px; --qi-space-4: 24px; --qi-space-5: 40px; --qi-space-6: 64px; /* Radius */ --qi-radius-sm: 8px; --qi-radius-md: 12px; --qi-radius-lg: 16px; --qi-radius-xl: 24px; --qi-radius-2xl: 36px; --qi-radius-3xl: 40px; /* Shadow */ --qi-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.2); --qi-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.35); --qi-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45); /* Typography */ --qi-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --qi-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; --qi-text-xs: 11px; --qi-text-sm: 13px; --qi-text-md: 16px; --qi-text-lg: 20px; --qi-text-xl: 28px; --qi-text-2xl: 32px; /* Motion */ --qi-transition-fast: 120ms ease; --qi-transition-base: 240ms ease; --qi-transition-slow: 500ms ease; /* Ambient durations */ --qi-motion-flow: 30s; --qi-motion-float: 30s; --qi-motion-pulse: 8s; --qi-motion-border: 15s; } /* Light mode */ [data-mode="light"] { --qi-bg: #F5F4EF; --qi-surface: #ffffff; --qi-surface-2: #f2f2f0; --qi-surface-3: #e6e6e2; --qi-text: #101820; --qi-text-muted: #667085; --qi-text-inverse: #F5F4EF; --qi-glass: rgba(255, 255, 255, .55); --qi-glass-light: rgba(255, 255, 255, .75); --qi-glass-border: rgba(0, 0, 0, .08); --qi-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.06); --qi-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.08); --qi-shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.12); }