/* ========================================================================= Omni-Omix Design Tokens — v2.0 (Bio USA Demo MVP) Precision Deep Navy theme · Solid Blue & Clinical Slate. Gradients are intentionally eliminated; brand tokens resolve to solids. Names map 1:1 to Figma / CSS variables. ========================================================================= */ :root { /* ---- Brand (Solid Blue — no gradient) ---- */ --brand-primary: #2563eb; /* core accent: primary buttons, active state */ --brand-accent: #3b82f6; /* header highlights, key text links */ /* legacy aliases kept so existing markup resolves to SOLID color */ --brand-1: #2563eb; --brand-2: #3b82f6; --brand-3: #2563eb; --brand-4: #3b82f6; --brand-gradient: linear-gradient(0deg, #2563eb, #2563eb); /* solid */ --brand-gradient-soft: rgba(37,99,235,.16); /* solid tint */ /* ---- Surfaces (Deep Navy) ---- */ --bg-app: #0b1120; /* application background */ --bg-app-2: #0d1426; /* secondary canvas */ --surface-1: #161f30; /* card / table / panel base */ --surface-2: #1e293b; /* control / hover active */ --surface-3: #0f172a; /* input / nested area */ --surface-glass: rgba(22,31,48,.74); /* ---- Borders / dividers ---- */ --border-1: rgba(255,255,255,.08); --border-2: rgba(255,255,255,.16); --border-focus: rgba(59,130,246,.7); /* ---- Text ---- */ --text-1: #f8fafc; /* primary text & data values */ --text-2: #cbd5e1; /* metadata, descriptions, labels */ --text-3: #64748b; /* disabled, units, placeholder */ --text-on-accent: #ffffff; /* ---- Functional (QC signal colors) ---- */ --success: #2dd4bf; --success-bg: rgba(45,212,191,.14); /* emerald teal — Passed */ --warning: #fbbf24; --warning-bg: rgba(251,191,36,.16); /* amber — PPI check */ --danger: #ef4444; --danger-bg: rgba(239,68,68,.16); /* solid red — error */ --info: #3b82f6; --info-bg: rgba(59,130,246,.14); /* ---- Data viz palette (fluorescent — high contrast on dark) ---- */ --viz-1: #38bdf8; /* sky */ --viz-2: #818cf8; /* indigo */ --viz-3: #2dd4bf; /* teal */ --viz-4: #fbbf24; /* amber */ --viz-5: #f87171; /* red */ --viz-6: #a78bfa; /* violet */ --viz-7: #60a5fa; /* blue */ --viz-8: #f472b6; /* pink */ /* sequential ramp anchors (cool -> warm) */ --seq-0: #0e7490; --seq-1: #22d3ee; --seq-2: #a7f3d0; --seq-3: #fde68a; --seq-4: #fb7185; /* ---- Typography ---- */ --font-sans: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* booth scale: each token name == its px value. Body/label sizes start at 12px (no 11px) for distance legibility; full ramp 12 → 48. */ --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-30: 30px; --fs-38: 38px; --fs-48: 48px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* ---- Spacing (8pt grid; booth scale-up) ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* ---- Radius ---- */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px; /* ---- Elevation ---- */ --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 8px 24px rgba(0,0,0,.35); --shadow-3: 0 24px 60px rgba(0,0,0,.5); --glow: 0 0 0 1px rgba(37,99,235,.35), 0 8px 30px rgba(37,99,235,.25); /* ---- Layout ---- */ --rail-w: 64px; --nav-h: 60px; --content-max: 1320px; --z-nav: 50; --z-dropdown: 80; --z-modal: 100; } /* ========================================================================= LIGHT VARIANT — toggled via . Clinical Slate on white; brand stays solid blue (no gradient). ========================================================================= */ :root[data-theme="light"] { --brand-gradient: linear-gradient(0deg, #2563eb, #2563eb); --brand-gradient-soft: rgba(37,99,235,.12); --bg-app: #f4f7fb; --bg-app-2: #eef2f8; --surface-1: #ffffff; --surface-2: #eef2f8; --surface-3: #f1f5fa; --surface-glass: rgba(255,255,255,.8); --border-1: rgba(15,23,42,.08); --border-2: rgba(15,23,42,.16); --border-focus: rgba(37,99,235,.5); --text-1: #0f1b33; --text-2: #475569; --text-3: #7b8aa0; --text-on-accent: #ffffff; --success: #0d9488; --success-bg: rgba(13,148,136,.12); --warning: #d97706; --warning-bg: rgba(217,119,6,.14); --danger: #dc2626; --danger-bg: rgba(220,38,38,.10); --info: #2563eb; --info-bg: rgba(37,99,235,.10); --viz-1: #0284c7; --viz-2: #6366f1; --viz-3: #0d9488; --viz-4: #d97706; --viz-5: #ef4444; --viz-6: #8b5cf6; --viz-7: #2563eb; --viz-8: #db2777; --shadow-1: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04); --shadow-2: 0 8px 24px rgba(15,23,42,.10); --shadow-3: 0 24px 60px rgba(15,23,42,.18); --glow: 0 0 0 1px rgba(37,99,235,.22), 0 8px 26px rgba(37,99,235,.16); }