/* ============================================================================ OMNISOLVER MODELS · Design Tokens — dark premium "3D foundry / model lab". Near-black layered graphite, glassmorphism, teal/cyan aurora glow, copper as the warm Skills-family tie. Depth-first: layered surfaces, soft glows, real shadows. Same family as Skills (dark + copper) — kin, not clone (Models leads with teal). ============================================================================ */ :root { /* ---- Surfaces (dark depth stack, void → raised) ---- */ --bg-0: #06070A; /* page void */ --bg-1: #090B0F; /* base scene */ --bg-2: #0D1014; /* raised scene */ --surface-1: #12151C; /* card */ --surface-2: #171B24; /* card hover / nested */ --surface-3: #1F2530; /* inset / track */ --surface-4: #28303D; /* tooltip / active row */ --surface-ink: #05070A; /* deepest viewport */ /* ---- Glass ---- */ --glass-bg: rgba(255,255,255,0.045); --glass-bg-2: rgba(255,255,255,0.07); --glass-border: rgba(255,255,255,0.10); --glass-hi: rgba(255,255,255,0.14); /* top inner highlight */ --glass-blur: 16px; /* ---- Borders ---- */ --line: rgba(255,255,255,0.09); --line-soft: rgba(255,255,255,0.055); --line-strong: rgba(255,255,255,0.16); --line-teal: rgba(34,199,182,0.40); /* ---- Text ---- */ --text: #ECF1F3; /* primary */ --text-2: #AAB6C0; /* secondary */ --text-muted: #6E7A87; /* muted */ --text-faint: #49535E; /* faint / disabled */ --text-ink: #06070A; /* text on bright/teal fills */ --text-inv: #06070A; /* ---- Accents (teal-led, copper as kin) ---- */ --teal: #22C7B6; --teal-hi: #46E3D2; --teal-lo: #109A8C; --cyan: #2FC4E0; --copper: #D6A06A; --copper-hi: #EBBE86; --amber: #E6B566; --teal-glow: rgba(34,199,182,0.55); --cyan-glow: rgba(47,196,224,0.45); /* ---- Status (visible on dark, never neon) ---- */ --ok: #45C98A; --ok-soft: rgba(69,201,138,0.16); --warn: #E0B25C; --warn-soft: rgba(224,178,92,0.16); --danger: #E0705E; --danger-soft: rgba(224,112,94,0.16); --info: #8A98A6; /* ---- Brand gradients / aurora scene ---- */ --grad-teal: linear-gradient(135deg, #46E3D2 0%, #22C7B6 45%, #109A8C 100%); --grad-cyan: linear-gradient(135deg, #46E3D2 0%, #2FC4E0 100%); --grad-copper: linear-gradient(135deg, #EBBE86 0%, #D6A06A 100%); --grad-text: linear-gradient(180deg, #FFFFFF 0%, #B9C4CC 120%); /* layered aurora used on for depth */ --aurora: radial-gradient(900px 620px at 78% -8%, rgba(34,199,182,0.16), transparent 60%), radial-gradient(760px 560px at 12% 6%, rgba(47,196,224,0.10), transparent 58%), radial-gradient(820px 640px at 50% 115%, rgba(214,160,106,0.09), transparent 60%); --grad-hero: radial-gradient(120% 120% at 50% 0%, #11161E 0%, #07090C 70%); /* ---- Typography ---- */ --font-sans: "Inter","Geist","Manrope","Segoe UI Variable Display","Segoe UI", system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; --font-mono: "JetBrains Mono","Geist Mono","Cascadia Code","IBM Plex Mono", ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --fs-xs:11px; --fs-sm:13px; --fs-base:15px; --fs-md:17px; --fs-lg:20px; --fs-xl:24px; --fs-2xl:32px; --fs-3xl:44px; --fs-hero:clamp(34px,4.4vw,56px); --lh-tight:1.05; --lh-snug:1.28; --lh-body:1.62; --tracking-tight:-0.025em; --tracking-caps:0.2em; /* ---- Radii ---- */ --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-2xl:36px; --r-pill:999px; /* ---- Spacing ---- */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px; --s-9:56px; --s-10:72px; --s-11:96px; --s-12:128px; /* ---- Elevation (deep dark + teal glow) ---- */ --sh-1: 0 1px 2px rgba(0,0,0,0.5); --sh-2: 0 8px 28px rgba(0,0,0,0.5); --sh-3: 0 22px 60px rgba(0,0,0,0.6); --sh-4: 0 44px 100px rgba(0,0,0,0.7); --sh-inset: inset 0 1px 0 var(--glass-hi); --glow-teal: 0 0 0 1px var(--line-teal), 0 14px 50px rgba(34,199,182,0.22); --glow-soft: 0 0 40px rgba(34,199,182,0.16); --ring: 0 0 0 3px rgba(34,199,182,0.32); /* ---- Motion ---- */ --ease: cubic-bezier(0.22,0.61,0.36,1); --ease-out: cubic-bezier(0.16,1,0.3,1); --ease-spring: cubic-bezier(0.34,1.56,0.64,1); --t-fast:140ms; --t-mid:280ms; --t-slow:560ms; /* ---- Layout ---- */ --maxw:1180px; --maxw-wide:1400px; --nav-h:66px; --rail-w:236px; --z-bg:0; --z-nav:100; --z-pop:200; --z-modal:300; --z-toast:400; color-scheme: dark; } @media (prefers-reduced-motion: reduce) { * { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } }