/* ============================================================ ShiftOps Design Tokens · v1.0 Source of truth: shiftops.ai — app/globals.css + tailwind.config.ts Link this file, set [data-theme="dark"] on for dark. ============================================================ */ :root, [data-theme="light"] { /* surfaces */ --bg: #ffffff; --bg-elev: #ffffff; --bg-sunken: #fafafa; --line: #e9e9e9; --line-strong: #d8d8d8; /* ink */ --fg: #0a0a0a; --fg-secondary: #3a3a3a; --fg-muted: #6b6b6b; --fg-subtle: #9a9a9a; /* monochrome accent — primary actions are ink-black */ --accent: #0a0a0a; --accent-hover: #2a2a2a; --accent-soft: #f4f4f5; --accent-line: #e4e4e7; --accent-fg: #ffffff; /* AI surfaces keep a restrained violet */ --ai: #6b4fe0; --ai-soft: #f0ecfb; --ai-line: #ddd3f7; /* semantic status */ --warn: #b45309; --warn-soft: #fef3c7; --danger: #b42318; --danger-soft: #fee4e2; --ok: #067647; --ok-soft: #ecfdf3; } [data-theme="dark"] { --bg: #08090a; --bg-elev: #101113; --bg-sunken: #0c0d0e; --line: #1c1d20; --line-strong: #2a2b2f; --fg: #f5f5f5; --fg-secondary: #b8b8b8; --fg-muted: #8a8a8a; --fg-subtle: #5a5a5a; --accent: #f5f5f5; --accent-hover: #e4e4e4; --accent-soft: rgba(255, 255, 255, 0.1); --accent-line: rgba(255, 255, 255, 0.18); --accent-fg: #0a0a0a; --ai: #b3a4ff; --ai-soft: rgba(179, 164, 255, 0.14); --ai-line: rgba(179, 164, 255, 0.3); --warn: #f59e0b; --warn-soft: rgba(245, 158, 11, 0.12); --danger: #f87171; --danger-soft: rgba(248, 113, 113, 0.12); --ok: #4ade80; --ok-soft: rgba(74, 222, 128, 0.12); } /* ------------------------------------------------------------ Non-color tokens (theme-independent) Derived from tailwind.config.ts ------------------------------------------------------------ */ :root { /* type */ --font-sans: "Geist", "Geist Variable", ui-sans-serif, system-ui, sans-serif; --font-mono: "Geist Mono", "Geist Mono Variable", ui-monospace, monospace; /* radius */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 28px; --radius-full: 9999px; /* layout */ --container: 1280px; /* elevation */ --shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -8px rgba(0, 0, 0, 0.4); --shadow-cmd: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 48px -16px rgba(0, 0, 0, 0.8); /* motion */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 150ms; --dur-med: 300ms; --dur-reveal: 600ms; --dur-pulse: 2s; --dur-marquee: 40s; } /* ------------------------------------------------------------ Motion keyframes — the system's three core animations ------------------------------------------------------------ */ @keyframes fade-up { 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* hero background drift (aurora orbs) */ @keyframes drift-a { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(6%, 8%, 0) scale(1.12); } } @keyframes drift-b { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); } 50% { transform: translate3d(-8%, 5%, 0) scale(0.92); } } @keyframes drift-c { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(5%, -7%, 0) scale(1.1); } } /* ------------------------------------------------------------ Utility classes shipped with the tokens ------------------------------------------------------------ */ /* Eyebrow / mono label */ .eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg-muted); } /* Fine grain texture — kills banding on gradients */ .grain { position: relative; } .grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Edge fade mask for marquees */ .fade-x { -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); } /* Thin hairline glow for section dividers */ .divider-glow { height: 1px; background: linear-gradient( 90deg, transparent, var(--accent-line) 35%, var(--accent) 50%, var(--accent-line) 65%, transparent ); opacity: 0.5; } @media (prefers-reduced-motion: reduce) { .drift-a, .drift-b, .drift-c, [class*="animate-"] { animation: none !important; } }