/* ORX Tech — Semantic color tokens (DARK is the default; product is dark-only). Built on the Figma primitive palette in fig-tokens.css. Opt into the light/print theme with . */ :root { /* ── Brand / neon ─────────────────────────────────────────── */ --orx-primary: rgb(0, 212, 255); /* signature cyan */ --orx-primary-strong: rgb(0, 193, 232); --orx-primary-ink: rgb(5, 8, 16); /* text/icons ON primary */ --orx-accent-green: rgb(0, 255, 136); /* neon green */ --orx-accent-purple: rgb(168, 85, 247); --orx-accent-pink: rgb(255, 110, 180); /* ── Semantic status ──────────────────────────────────────── */ --orx-success: rgb(0, 255, 136); --orx-warning: rgb(255, 184, 0); --orx-danger: rgb(255, 45, 85); --orx-info: rgb(0, 212, 255); /* ── Surfaces (dark) ──────────────────────────────────────── */ --orx-bg: rgb(5, 8, 16); /* app background (n300) */ --orx-bg-sidebar: rgb(8, 16, 26); /* sidebar / nav rail */ --orx-surface: rgb(25, 28, 35); /* default card / input (n200) */ --orx-surface-2: rgb(35, 38, 45); /* raised / hover (n100) */ --orx-surface-raised: rgb(18, 26, 42); /* cool navy raised panel */ --orx-overlay: rgba(8, 14, 25, 0.72); /* modal scrim */ --orx-glass-fill: rgba(13, 19, 32, 0.6); --orx-glass-shine: rgba(100, 180, 255, 0.08); /* ── Borders ──────────────────────────────────────────────── */ --orx-border: rgba(255, 255, 255, 0.1); /* hairline on surfaces */ --orx-border-strong: rgba(255, 255, 255, 0.14); --orx-border-glass: rgba(255, 255, 255, 0.1); --orx-border-primary: rgba(0, 212, 255, 0.5); /* ── Text ─────────────────────────────────────────────────── */ --orx-text: rgb(218, 218, 219); /* primary body (n40) */ --orx-text-strong: rgb(255, 255, 255); /* headings / emphasis */ --orx-text-secondary: rgb(143, 144, 147); /* labels / captions (n60) */ --orx-text-muted: rgb(93, 94, 100); /* disabled / hints (n70) */ --orx-text-on-primary: rgb(5, 8, 16); /* ── Fills for tinted chips/badges/toasts ─────────────────── */ --orx-fill-primary: rgba(0, 212, 255, 0.08); --orx-fill-success: rgba(0, 255, 136, 0.08); --orx-fill-warning: rgba(255, 165, 0, 0.1); --orx-fill-danger: rgba(235, 87, 87, 0.1); --orx-fill-neutral: rgba(255, 255, 255, 0.06); /* ── Status dots ──────────────────────────────────────────── */ --orx-status-online: rgb(0, 255, 136); --orx-status-away: rgb(255, 184, 0); --orx-status-busy: rgb(255, 45, 85); --orx-status-offline: rgb(73, 75, 81); /* ── Chart series ─────────────────────────────────────────── */ --orx-chart-1: rgb(0, 212, 255); --orx-chart-2: rgb(168, 85, 247); --orx-chart-3: rgb(0, 255, 136); --orx-chart-4: rgb(255, 184, 0); --orx-chart-5: rgb(255, 45, 85); --orx-chart-6: rgb(255, 110, 180); /* ── Fixed-bg hero overlay (tints the dashboard bg photo) ──── */ --orx-bg-overlay-1: rgba(6, 10, 19, 0.75); --orx-bg-overlay-2: rgba(6, 10, 19, 0.9); /* ── KPI tile accents (bright on dark; darkened for light in override) ── */ --orx-kpi-1: rgb(0, 212, 255); --orx-kpi-2: rgb(102, 242, 128); --orx-kpi-3: rgb(178, 115, 255); --orx-kpi-4: rgb(255, 166, 51); } /* Light / print theme — Saudi-flag green system from the style guide. Opt-in only; the product ships dark. All text tokens below are tuned to hold WCAG AA (4.5:1) against --orx-bg / --orx-surface. */ :root[data-theme="light"] { --orx-primary: rgb(0, 122, 173); --orx-primary-strong: rgb(0, 98, 140); --orx-primary-ink: rgb(255, 255, 255); --orx-bg: #F2F2F4; --orx-bg-sidebar: rgb(253, 253, 253); --orx-surface: rgb(255, 255, 255); --orx-surface-2: rgb(246, 246, 246); --orx-surface-raised: rgb(255, 255, 255); --orx-glass-fill: rgba(255, 255, 255, 0.97); --orx-glass-shine: rgba(255, 255, 255, 0.6); --orx-border: rgba(5, 8, 16, 0.1); --orx-overlay: rgba(20, 24, 32, 0.5); --orx-border-strong: rgba(5, 8, 16, 0.14); --orx-border-glass: rgba(5, 8, 16, 0.1); --orx-border-primary: rgba(0, 122, 173, 0.5); --orx-text: rgb(35, 38, 45); --orx-text-strong: rgb(5, 8, 16); --orx-text-secondary: rgb(93, 94, 100); --orx-text-muted: rgb(110, 111, 116); --orx-text-on-primary: rgb(255, 255, 255); --orx-success: rgb(21, 128, 61); --orx-warning: rgb(180, 83, 9); --orx-danger: rgb(185, 28, 28); --orx-info: rgb(0, 98, 204); --orx-bg-overlay-1: rgba(250, 250, 250, 0.88); --orx-bg-overlay-2: rgba(250, 250, 250, 0.95); --orx-kpi-1: rgb(0, 122, 173); --orx-kpi-2: rgb(21, 128, 61); --orx-kpi-3: rgb(124, 58, 200); --orx-kpi-4: rgb(180, 83, 9); }