/* ============================================================ Ops Singularity - Design Tokens Single source of truth for color, type, spacing, motion. Loaded first on every page. ============================================================ */ :root { /* ── BRAND (primary identity) ─────────────────────────── */ --navy: #0F2557; --navy-deep: #081A3E; --navy-soft: #1A3171; --teal: #0ABAB5; --teal-bright: #5EEAD4; --teal-soft: #E0F7F6; /* ── SUPPORTING (UI accents) ──────────────────────────── */ --blue: #1848C8; --blue-light: #3B6FE8; --blue-tint: #EEF3FF; /* ── PILLAR ACCENTS (icons + badges only - NOT brand) ── */ --pillar-service: var(--blue); /* ServiceOps */ --pillar-cluster: var(--teal); /* ClusterOps */ --pillar-sherlock: #7C3AED; /* Sherlock */ --pillar-security: #DC2626; /* SecurityOps */ --pillar-data: #E87722; /* DataOps */ --pillar-finops: #16A34A; /* FinOps */ --pillar-procbot: var(--navy); /* ProcBot */ --pillar-business: #D97706; /* BusinessOps */ /* Tinted backgrounds for pillar badges */ --pillar-service-tint: rgba(24,72,200,0.10); --pillar-cluster-tint: rgba(10,186,181,0.10); --pillar-sherlock-tint: rgba(124,58,237,0.10); --pillar-security-tint: rgba(220,38,38,0.10); --pillar-data-tint: rgba(232,119,34,0.10); --pillar-finops-tint: rgba(22,163,74,0.10); --pillar-procbot-tint: rgba(15,37,87,0.10); --pillar-business-tint: rgba(217,119,6,0.10); /* Status colors */ --success: #16A34A; --warning: #D97706; --danger: #DC2626; /* ── NEUTRALS ─────────────────────────────────────────── */ --white: #FFFFFF; --gray-50: #F8FAFC; --gray-100: #F1F5F9; --gray-200: #E2E8F0; --gray-300: #CBD5E1; --gray-400: #94A3B8; --gray-500: #64748B; --gray-600: #475569; --gray-700: #334155; --gray-800: #1E293B; --gray-900: #0F172A; /* Semantic text */ --text: #1E293B; --text-muted: #475569; --text-light: #64748B; --text-faint: #94A3B8; --text-onDark: rgba(255,255,255,0.92); --text-onDark-muted: rgba(255,255,255,0.62); --text-onDark-faint: rgba(255,255,255,0.42); /* Surfaces */ --surface: #FFFFFF; --surface-subtle: #F8FAFC; --surface-sunken: #F1F5F9; --surface-dark: var(--navy); --surface-darker: var(--navy-deep); --border: #E2E8F0; --border-strong: #CBD5E1; --border-onDark: rgba(255,255,255,0.10); /* ── TYPOGRAPHY ───────────────────────────────────────── */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Fluid type scale (min, preferred, max) */ --fs-eyebrow: 12px; --fs-caption: 13px; --fs-body-sm: 14px; --fs-body: 16px; --fs-body-lg: 18px; --fs-h6: clamp(15px, 1vw + 0.5rem, 17px); --fs-h5: clamp(17px, 1.2vw + 0.6rem, 20px); --fs-h4: clamp(20px, 1.4vw + 0.7rem, 24px); --fs-h3: clamp(24px, 1.8vw + 0.8rem, 32px); --fs-h2: clamp(32px, 3vw + 1rem, 48px); --fs-h1: clamp(36px, 4.5vw + 1rem, 64px); --fs-display: clamp(40px, 5.5vw + 1rem, 80px); --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.7; --tracking-tight: -0.02em; --tracking-tighter:-0.035em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-wider: 0.08em; --tracking-eyebrow:0.12em; --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; --weight-black: 800; /* ── SPACING SCALE (4px base) ─────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 96px; --space-13: 128px; --space-14: 160px; /* Section rhythm - vary to create cadence */ --section-y-sm: clamp(56px, 8vw, 80px); --section-y: clamp(72px, 10vw, 120px); --section-y-lg: clamp(96px, 12vw, 160px); /* ── RADII ────────────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 9999px; /* ── ELEVATION (warmer, navy-tinted shadows) ──────────── */ --shadow-xs: 0 1px 2px rgba(15,37,87,0.05); --shadow-sm: 0 1px 3px rgba(15,37,87,0.08), 0 1px 2px rgba(15,37,87,0.04); --shadow-md: 0 4px 12px rgba(15,37,87,0.10), 0 2px 4px rgba(15,37,87,0.06); --shadow-lg: 0 12px 32px rgba(15,37,87,0.12), 0 4px 8px rgba(15,37,87,0.06); --shadow-xl: 0 24px 48px rgba(15,37,87,0.15), 0 8px 16px rgba(15,37,87,0.08); --shadow-2xl: 0 32px 80px rgba(15,37,87,0.18), 0 12px 24px rgba(15,37,87,0.10); /* Glow effects for "refined evolution" cards/CTAs */ --glow-blue: 0 0 0 1px rgba(24,72,200,0.20), 0 12px 32px -8px rgba(24,72,200,0.35); --glow-teal: 0 0 0 1px rgba(10,186,181,0.20), 0 12px 32px -8px rgba(10,186,181,0.35); /* ── LAYOUT ───────────────────────────────────────────── */ --container: 1200px; --container-wide: 1320px; --container-text: 720px; --gutter: clamp(20px, 4vw, 40px); --nav-h: 72px; /* Breakpoints (use in @media via Mxxx vars not supported in CSS - keep here for docs) */ /* sm: 640px md: 768px lg: 1024px xl: 1280px */ /* ── MOTION ───────────────────────────────────────────── */ --dur-instant: 80ms; --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 400ms; --dur-slower: 600ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ── Z-INDEX ──────────────────────────────────────────── */ --z-base: 1; --z-sticky: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 400; } /* Honor user's reduced-motion preference globally */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }