/* ============================================================================= IQ Design Tokens — IntelliconnectQ Analytics Version 1.0 · 2026-05-30 Load this as the FIRST stylesheet in every IQ project . All component CSS must reference these tokens exclusively. ============================================================================= */ :root { /* --------------------------------------------------------------------------- 1. PALETTE — Brand color scales (raw hex values only at this layer) --------------------------------------------------------------------------- */ /* Primary — Deep Navy */ --iq-primary-900: #0A0F1E; --iq-primary-800: #0D1527; --iq-primary-700: #111D35; --iq-primary-600: #162342; --iq-primary-500: #1C2D54; --iq-primary-400: #2A4070; --iq-primary-300: #3D5A96; --iq-primary-200: #6B8DC4; --iq-primary-100: #B0C4E3; --iq-primary-50: #E8EFF9; /* Accent — Electric Teal */ --iq-accent-900: #002B2E; --iq-accent-800: #003D42; --iq-accent-700: #005059; --iq-accent-600: #006470; --iq-accent-500: #007A88; --iq-accent-400: #009BB0; --iq-accent-300: #00BDD6; --iq-accent-200: #5DD6EA; --iq-accent-100: #A8EAF3; --iq-accent-50: #E0F7FA; /* Signal — Amber */ --iq-signal-900: #3D1C00; --iq-signal-800: #6B3000; --iq-signal-700: #954500; --iq-signal-600: #C05C00; --iq-signal-500: #E87722; --iq-signal-400: #F0903D; --iq-signal-300: #F5A862; --iq-signal-200: #FAC89A; --iq-signal-100: #FDE3C5; --iq-signal-50: #FEF5EC; /* Neutral — Slate */ --iq-neutral-950: #080B12; --iq-neutral-900: #0F1520; --iq-neutral-800: #1A2235; --iq-neutral-700: #2C3A52; --iq-neutral-600: #415270; --iq-neutral-500: #5C6E8A; --iq-neutral-400: #7C90AB; --iq-neutral-300: #A3B3C7; --iq-neutral-200: #C8D3E0; --iq-neutral-100: #E4E9F0; --iq-neutral-50: #F2F5F8; --iq-neutral-0: #FFFFFF; /* --------------------------------------------------------------------------- 2. SEMANTIC — Status colors (raw hex at this layer only) --------------------------------------------------------------------------- */ --iq-color-success: #1A8A5A; --iq-color-success-light: #D4F0E4; --iq-color-warning: #E87722; --iq-color-warning-light: #FDE3C5; --iq-color-danger: #C42B2B; --iq-color-danger-light: #FADADD; --iq-color-info: #1C6CAF; --iq-color-info-light: #D6E8F7; /* --------------------------------------------------------------------------- 3. SEMANTIC — Backgrounds, Text, Borders (reference palette via var()) --------------------------------------------------------------------------- */ /* Backgrounds */ --iq-bg-base: var(--iq-neutral-0); --iq-bg-subtle: var(--iq-neutral-50); --iq-bg-muted: var(--iq-neutral-100); --iq-bg-dark: var(--iq-primary-800); --iq-bg-darker: var(--iq-primary-900); --iq-bg-overlay: rgba(10, 15, 30, 0.72); /* Text */ --iq-text-primary: var(--iq-neutral-900); --iq-text-secondary: var(--iq-neutral-600); --iq-text-muted: var(--iq-neutral-500); --iq-text-disabled: var(--iq-neutral-300); --iq-text-inverse: var(--iq-neutral-0); --iq-text-accent: var(--iq-accent-500); /* Borders */ --iq-border-light: var(--iq-neutral-100); --iq-border-default: var(--iq-neutral-200); --iq-border-strong: var(--iq-neutral-400); --iq-border-focus: var(--iq-accent-300); --iq-border-brand: var(--iq-primary-500); /* --------------------------------------------------------------------------- 4. TYPOGRAPHY --------------------------------------------------------------------------- */ --iq-font-display: 'Sora', 'Segoe UI', system-ui, sans-serif; --iq-font-body: 'DM Sans', 'Segoe UI', system-ui, sans-serif; --iq-font-mono: 'JetBrains Mono', 'Fira Code', monospace; --iq-text-xs: 0.75rem; --iq-text-sm: 0.875rem; --iq-text-base: 1rem; --iq-text-md: 1.125rem; --iq-text-lg: 1.25rem; --iq-text-xl: 1.5rem; --iq-text-2xl: 1.875rem; --iq-text-3xl: 2.25rem; --iq-text-4xl: 3rem; --iq-text-5xl: 3.75rem; --iq-text-6xl: 4.5rem; --iq-weight-regular: 400; --iq-weight-medium: 500; --iq-weight-semibold: 600; --iq-weight-bold: 700; --iq-weight-black: 800; --iq-leading-none: 1; --iq-leading-tight: 1.2; --iq-leading-snug: 1.35; --iq-leading-normal: 1.5; --iq-leading-relaxed: 1.65; --iq-leading-loose: 1.8; --iq-tracking-tight: -0.03em; --iq-tracking-snug: -0.01em; --iq-tracking-normal: 0em; --iq-tracking-wide: 0.04em; --iq-tracking-wider: 0.08em; --iq-tracking-widest: 0.14em; /* --------------------------------------------------------------------------- 5. SPACING — 4px base grid --------------------------------------------------------------------------- */ --iq-space-0: 0; --iq-space-px: 1px; --iq-space-0-5: 0.125rem; --iq-space-1: 0.25rem; --iq-space-2: 0.5rem; --iq-space-3: 0.75rem; --iq-space-4: 1rem; --iq-space-5: 1.25rem; --iq-space-6: 1.5rem; --iq-space-7: 1.75rem; --iq-space-8: 2rem; --iq-space-10: 2.5rem; --iq-space-12: 3rem; --iq-space-14: 3.5rem; --iq-space-16: 4rem; --iq-space-20: 5rem; --iq-space-24: 6rem; --iq-space-32: 8rem; --iq-space-40: 10rem; --iq-space-48: 12rem; --iq-space-64: 16rem; --iq-width-sm: 640px; --iq-width-md: 768px; --iq-width-lg: 1024px; --iq-width-xl: 1280px; --iq-width-2xl: 1440px; /* --------------------------------------------------------------------------- 6. SHAPE — Border radius --------------------------------------------------------------------------- */ --iq-radius-none: 0; --iq-radius-sm: 4px; --iq-radius-md: 8px; --iq-radius-lg: 12px; --iq-radius-xl: 16px; --iq-radius-2xl: 24px; --iq-radius-full: 9999px; /* --------------------------------------------------------------------------- 7. ELEVATION — Shadows --------------------------------------------------------------------------- */ --iq-shadow-xs: 0 1px 2px 0 rgba(15, 21, 32, 0.05); --iq-shadow-sm: 0 1px 3px 0 rgba(15, 21, 32, 0.10), 0 1px 2px -1px rgba(15, 21, 32, 0.06); --iq-shadow-md: 0 4px 6px -1px rgba(15, 21, 32, 0.10), 0 2px 4px -2px rgba(15, 21, 32, 0.06); --iq-shadow-lg: 0 10px 15px -3px rgba(15, 21, 32, 0.10), 0 4px 6px -4px rgba(15, 21, 32, 0.05); --iq-shadow-xl: 0 20px 25px -5px rgba(15, 21, 32, 0.10), 0 8px 10px -6px rgba(15, 21, 32, 0.04); --iq-shadow-2xl: 0 25px 50px -12px rgba(15, 21, 32, 0.25); --iq-shadow-inner: inset 0 2px 4px 0 rgba(15, 21, 32, 0.06); --iq-shadow-accent: 0 0 0 3px rgba(0, 189, 214, 0.25); --iq-shadow-primary:0 0 0 3px rgba(28, 45, 84, 0.20); /* --------------------------------------------------------------------------- 8. MOTION --------------------------------------------------------------------------- */ --iq-duration-instant: 50ms; --iq-duration-fast: 100ms; --iq-duration-normal: 200ms; --iq-duration-slow: 350ms; --iq-duration-slower: 500ms; --iq-duration-page: 700ms; --iq-ease-linear: linear; --iq-ease-in: cubic-bezier(0.4, 0, 1, 1); --iq-ease-out: cubic-bezier(0, 0, 0.2, 1); --iq-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --iq-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --iq-ease-sharp: cubic-bezier(0.25, 0.46, 0.45, 0.94); --iq-transition-fast: all var(--iq-duration-fast) var(--iq-ease-out); --iq-transition-normal: all var(--iq-duration-normal) var(--iq-ease-in-out); --iq-transition-slow: all var(--iq-duration-slow) var(--iq-ease-out); --iq-transition-color: color var(--iq-duration-normal) var(--iq-ease-out), background-color var(--iq-duration-normal) var(--iq-ease-out), border-color var(--iq-duration-normal) var(--iq-ease-out); /* --------------------------------------------------------------------------- 9. Z-INDEX --------------------------------------------------------------------------- */ --iq-z-base: 0; --iq-z-raised: 10; --iq-z-dropdown: 100; --iq-z-sticky: 200; --iq-z-overlay: 300; --iq-z-modal: 400; --iq-z-toast: 500; --iq-z-tooltip: 600; --iq-z-max: 9999; /* --------------------------------------------------------------------------- 10. CTA COLOR — separate from the teal intelligence accent Warm terracotta outperforms cool teal for primary conversion CTAs. Teal (--iq-accent-*) is for links, focus, data viz, active states. --------------------------------------------------------------------------- */ --iq-cta-bg: #E8562A; --iq-cta-hover: #C94420; /* --------------------------------------------------------------------------- 11. COMPONENT TOKENS (all values reference semantic or palette tokens) --------------------------------------------------------------------------- */ /* Buttons */ --iq-btn-primary-bg: var(--iq-cta-bg); --iq-btn-primary-bg-hover: var(--iq-cta-hover); --iq-btn-primary-text: var(--iq-primary-900); --iq-btn-secondary-border: var(--iq-primary-500); --iq-btn-secondary-text: var(--iq-primary-500); --iq-btn-ghost-text: var(--iq-text-secondary); --iq-btn-destructive-bg: var(--iq-color-danger); --iq-btn-destructive-text: var(--iq-neutral-0); --iq-btn-radius: var(--iq-radius-md); --iq-btn-height-sm: 2rem; --iq-btn-height-md: 2.5rem; --iq-btn-height-lg: 3rem; --iq-btn-font-weight: var(--iq-weight-semibold); /* Form Inputs */ --iq-input-bg: var(--iq-neutral-0); --iq-input-border: var(--iq-border-default); --iq-input-border-hover: var(--iq-border-strong); --iq-input-border-focus: var(--iq-border-focus); --iq-input-border-error: var(--iq-color-danger); --iq-input-text: var(--iq-text-primary); --iq-input-placeholder: var(--iq-text-muted); --iq-input-radius: var(--iq-radius-sm); --iq-input-height: 2.5rem; --iq-input-focus-shadow: var(--iq-shadow-accent); /* Cards */ --iq-card-bg: var(--iq-neutral-0); --iq-card-bg-hover: var(--iq-bg-subtle); --iq-card-border: var(--iq-border-light); --iq-card-radius: var(--iq-radius-lg); --iq-card-shadow: var(--iq-shadow-sm); --iq-card-shadow-hover: var(--iq-shadow-md); --iq-card-padding-sm: var(--iq-space-4); --iq-card-padding-md: var(--iq-space-6); --iq-card-padding-lg: var(--iq-space-8); /* Navigation */ --iq-nav-bg: var(--iq-primary-900); --iq-nav-text: var(--iq-neutral-200); --iq-nav-text-active: var(--iq-neutral-0); --iq-nav-text-hover: var(--iq-neutral-0); --iq-nav-accent: var(--iq-accent-300); --iq-nav-height: 64px; --iq-nav-height-mobile: 56px; /* Tables */ --iq-table-header-bg: var(--iq-bg-subtle); --iq-table-header-text: var(--iq-text-secondary); --iq-table-row-bg: var(--iq-neutral-0); --iq-table-row-bg-alt: var(--iq-bg-subtle); --iq-table-row-bg-hover: var(--iq-primary-50); --iq-table-border: var(--iq-border-light); --iq-table-cell-padding: var(--iq-space-3) var(--iq-space-4); /* Modals */ --iq-modal-bg: var(--iq-neutral-0); --iq-modal-overlay: var(--iq-bg-overlay); --iq-modal-radius: var(--iq-radius-xl); --iq-modal-shadow: var(--iq-shadow-2xl); --iq-modal-padding: var(--iq-space-8); --iq-modal-width-sm: 480px; --iq-modal-width-md: 640px; --iq-modal-width-lg: 860px; /* Badges */ --iq-badge-radius: var(--iq-radius-full); --iq-badge-padding: 2px 8px; --iq-badge-font-size: var(--iq-text-xs); --iq-badge-font-weight: var(--iq-weight-semibold); /* Toasts */ --iq-toast-bg: var(--iq-bg-dark); --iq-toast-text: var(--iq-text-inverse); --iq-toast-radius: var(--iq-radius-md); --iq-toast-shadow: var(--iq-shadow-xl); --iq-toast-padding: var(--iq-space-4) var(--iq-space-5); /* Tooltips */ --iq-tooltip-bg: var(--iq-primary-900); --iq-tooltip-text: var(--iq-text-inverse); --iq-tooltip-font-size: var(--iq-text-xs); --iq-tooltip-radius: var(--iq-radius-sm); --iq-tooltip-padding: var(--iq-space-1) var(--iq-space-2); --iq-tooltip-max-width: 240px; } /* ============================================================================= 12. ACCESSIBILITY GLOBALS ============================================================================= */ :focus-visible { outline: 2px solid var(--iq-border-focus); outline-offset: 2px; border-radius: var(--iq-radius-sm); } .iq-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ============================================================================= 13. FORCED DARK SECTIONS Apply .iq-dark to any container to force dark-mode values inside it. Automatic dark mode (prefers-color-scheme: dark) is intentionally omitted — the current IQ sites do not have dark mode UI designed. Add back the @media (prefers-color-scheme: dark) block when dark mode is implemented. ============================================================================= */ .iq-dark { --iq-bg-base: var(--iq-primary-800); --iq-bg-subtle: var(--iq-primary-700); --iq-bg-muted: var(--iq-neutral-700); --iq-text-primary: var(--iq-neutral-100); --iq-text-secondary: var(--iq-neutral-300); --iq-border-light: var(--iq-neutral-700); --iq-border-default: var(--iq-neutral-600); --iq-card-bg: var(--iq-primary-700); --iq-card-border: var(--iq-neutral-700); --iq-input-bg: var(--iq-primary-600); --iq-input-border: var(--iq-neutral-700); --iq-table-header-bg: var(--iq-primary-600); --iq-table-row-bg: var(--iq-primary-700); } /* ============================================================================= 14. MOTION SAFETY ============================================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }