/* ============================================================ CONNEXA — Design tokens (single source of truth) Every `--*` the platform uses is declared HERE and nowhere else. style.css and v2.css previously each carried their own :root block, so a token's real value depended on load order and two files had to be edited in step to change one colour. They now define components only; this file defines the vocabulary those components resolve against. Load FIRST, before style.css and v2.css. Direction B (Workspace Bar): dark two-tier command bar, vibrant gradient KPI tiles, attention-led dashboard. Density is a token pair so one attribute on retunes every table in the build. ============================================================ */ :root { /* ── Brand ───────────────────────────────────────────────── Indigo primary with cyan / violet / teal / coral supports. Cyan carries connectivity and third-party supply; violet carries promotions and vendor supply; coral carries revenue and attention. */ --primary: #4f46e5; --primary-dark: #4338ca; --primary-light: #eef2ff; --primary-50: #eef2ff; --primary-100: #e0e7ff; --primary-200: #c7d2fe; --primary-400: #818cf8; --primary-600: #4f46e5; --primary-700: #4338ca; --v2-cyan: #0891b2; --v2-cyan-100: #cffafe; --v2-violet: #7c3aed; --v2-violet-100: #ede9fe; --v2-coral: #f97362; --v2-coral-100: #ffe4e0; /* ── Semantic ────────────────────────────────────────────── Status must never be carried by colour alone; these pair with an icon and a text label in every component that uses them. */ --success: #16a34a; --success-50: #f0fdf4; --success-100: #dcfce7; --success-300: #86efac; --success-500: #22c55e; --success-600: #16a34a; --warning: #d97706; --warning-50: #fffbeb; --warning-100: #fef3c7; --warning-300: #fcd34d; --warning-400: #fbbf24; --warning-500: #f59e0b; --warning-600: #d97706; --danger: #dc2626; --danger-50: #fef2f2; --danger-100: #fee2e2; --danger-300: #fca5a5; --danger-500: #ef4444; --danger-600: #dc2626; --teal: #0d9488; --teal-100: #ccfbf1; --teal-400: #2dd4bf; --teal-600: #0d9488; --indigo: #4f46e5; --indigo-100: #e0e7ff; --indigo-500: #6366f1; --orange: #ea580c; --orange-100: #ffedd5; /* ── Neutrals — cool graphite ────────────────────────────── Sequential, so a component can step one stop for hover without picking a new hue. */ --gray-50: #f7f8fb; --gray-100: #eef1f6; --gray-200: #e3e7ef; --gray-300: #cbd2e0; --gray-400: #98a2b8; --gray-500: #66708a; --gray-600: #4a5470; --gray-700: #333c56; --gray-800: #1d2440; --gray-900: #10152b; /* ── Surfaces ────────────────────────────────────────────── body-bg sits below surface so cards read as raised without a heavy shadow; sunken is for toolbars and table headers. */ --body-bg: #f4f6fb; --surface: #ffffff; --surface-sunken: #f7f8fb; --border-color: #e3e7ef; /* The command bar's own ink — dark in both themes. */ --shell-ink: #0b1020; --shell-ink-2: #151b33; /* ── Geometry ────────────────────────────────────────────── Moderate radii: inputs and buttons 7–8, cards 11, popovers 15. Enterprise, not pill-shaped. */ --border-radius-sm: 7px; --border-radius: 11px; --border-radius-lg: 15px; /* ── Elevation — four steps, no more ─────────────────────── */ --shadow-sm: 0 1px 2px rgba(16,21,43,.05), 0 1px 1px rgba(16,21,43,.03); --shadow: 0 2px 6px rgba(16,21,43,.07); --shadow-md: 0 6px 20px -6px rgba(16,21,43,.16); --shadow-lg: 0 20px 48px -14px rgba(16,21,43,.28); /* ── Shell metrics ────────────────────────────────────────── */ --sidebar-width: 240px; --sidebar-collapsed: 64px; --topbar-height: 60px; --content-padding-x: 28px; --cmdbar-h1: 58px; --cmdbar-h2: 46px; --cmdbar-h: 104px; /* One rail for the whole shell: the command bar rows and the page body below them share this width + gutter, so their edges line up on any screen instead of the body running full-bleed on wide monitors. */ --v2-shell-max: 1780px; --v2-shell-pad: 22px; /* ── Spacing scale ────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* ── Motion ───────────────────────────────────────────────── */ --v2-ease: cubic-bezier(.32,.72,0,1); --dur-fast: 140ms; --dur: 180ms; --dur-slow: 220ms; /* ── Z-index scale ──────────────────────────────────────── Authoritative: the shell's literals were reconciled to these, so a new popover can be placed by band instead of by guessing a number that beats the bar. The command bar is fixed app chrome and sits ABOVE page content but BELOW anything it opens. */ --z-sticky: 20; --z-header: 40; --z-scrim: 119; --z-cmdbar: 120; --z-drop: 130; --z-drawer: 140; --z-modal: 150; --z-toast: 160; /* ── Density ─────────────────────────────────────────────── Compact is the default: contracting teams sit in these tables all day and want more rows per screen. `data-density="comfortable"` on retunes every table at once — no per-table CSS. */ --row-pad-y: 7px; --row-pad-x: 12px; --row-fs: 12.5px; --cell-h: 34px; } body[data-density="comfortable"], :root[data-density="comfortable"] { --row-pad-y: 12px; --row-pad-x: 14px; --row-fs: 13.5px; --cell-h: 46px; } /* ── Dark theme ───────────────────────────────────────────── A designed dark palette, not an inversion: the neutral ramp is rebuilt with its own hues so surfaces stay slightly blue and borders stay visible, and the semantic tints become translucent so badges read as tinted chips rather than bright patches. */ :root[data-theme="dark"] { --gray-50: #0b0f1f; --gray-100: #161c33; --gray-200: #232b47; --gray-300: #33405f; --gray-400: #6c799a; --gray-500: #93a0bd; --gray-600: #b9c3d8; --gray-700: #d6ddea; --gray-800: #eaeff7; --gray-900: #f7f9fc; --body-bg: #080b17; --surface: #121828; --surface-sunken: #0d1220; --border-color: #232b47; --primary: #7c78f0; --primary-dark: #635ee8; --primary-50: #1b1f3d; --primary-100: #232a52; --primary-700: #a5a1f7; --primary-light: rgba(79,70,229,.24); --success-50: rgba(22,163,74,.16); --success-100: rgba(22,163,74,.28); --warning-50: rgba(217,119,6,.18); --warning-100: rgba(217,119,6,.30); --danger-50: rgba(220,38,38,.18); --danger-100: rgba(220,38,38,.30); --teal-100: rgba(13,148,136,.28); --indigo-100: rgba(79,70,229,.28); --orange-100: rgba(234,88,12,.28); --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow: 0 2px 8px rgba(0,0,0,.45); --shadow-md: 0 4px 16px rgba(0,0,0,.5); --shadow-lg: 0 8px 32px rgba(0,0,0,.55); } /* The density APPLICATION lives in v2.css, which loads last: style.css also sets .data-table td padding at the same specificity, so a rule here would lose the cascade. Tokens here, application there. */ /* Numerals: tabular wherever a figure carries meaning, so columns of rates and counts align on the digit. */ .kpi-value, .kpi-num, .data-table td, .pagination-info, .v2-hero-value, .v2-metric-value, .cnx-num { font-variant-numeric: tabular-nums; } /* Motion respects the OS setting — enterprise users often have it on. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* Focus is always visible — never removed without a replacement. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--border-radius-sm); }