/* Design tokens, ported from aiReports. * * aiReports is a Vue app running PrimeVue 4 on the Aura preset, with one * override: the primary ramp is replaced by its own green (#277e32 at 500). * PrimeVue generates those tokens at runtime from JavaScript, so there is no * stylesheet to copy — this file restates the same token set by hand, under the * same `--p-*` names, so that anything learned from that app's CSS transfers * here unchanged. * * This parser has no build step and is not getting one for a dashboard, so the * port stops at the tokens and the component look: no Vue, no Tailwind, no * npm. `components.css` builds the PrimeVue component shapes on top of these * variables, and `views.css` holds what is specific to a load board. * * Light is the default and dark is a class on , exactly as aiReports does * it (`.dark-mode`, remembered in localStorage). The old dashboard was dark * only; that look survives one click away. */ :root { /* ── primary ───────────────────────────────────────────────────────────── aiReports' own ramp, not Aura's emerald. Copied stop for stop from its definePreset() call so the two apps read as one product. */ --p-primary-50: #f0f9f1; --p-primary-100: #dcf2de; --p-primary-200: #bce5c0; --p-primary-300: #8dd396; --p-primary-400: #57bb64; --p-primary-500: #277e32; --p-primary-600: #1f5f28; --p-primary-700: #174620; --p-primary-800: #0f2d18; --p-primary-900: #071410; --p-primary-950: #030a05; --p-primary-color: var(--p-primary-500); --p-primary-hover-color: var(--p-primary-600); --p-primary-active-color: var(--p-primary-700); --p-primary-contrast-color: #ffffff; /* For focus rings and tints, where a colour needs an alpha channel. */ --p-primary-rgb: 39, 126, 50; /* ── neutrals (Aura's slate) ─────────────────────────────────────────── */ --p-surface-0: #ffffff; --p-surface-50: #f8fafc; --p-surface-100: #f1f5f9; --p-surface-200: #e2e8f0; --p-surface-300: #cbd5e1; --p-surface-400: #94a3b8; --p-surface-500: #64748b; --p-surface-600: #475569; --p-surface-700: #334155; --p-surface-800: #1e293b; --p-surface-900: #0f172a; --p-surface-950: #020617; /* ── semantic surfaces ───────────────────────────────────────────────── */ --p-content-background: var(--p-surface-0); /* aiReports' .card-background */ --p-content-border-color: #dee2e6; --p-content-hover-background: rgba(0, 0, 0, 0.04); --p-ground-background: #fafafa; --p-overlay-background: var(--p-surface-0); --p-text-color: #495057; /* Two levels of secondary text, both a stop darker than aiReports' (which writes them as Tailwind gray-500 and gray-400). Measured against white: gray-400 is 2.5:1, which is below WCAG AA for body text and is the shade this board uses for table headings, units, timestamps and every stat label — the small print you have to read to trade on. These are 7.8:1 and 5.0:1, and keep the same two-level hierarchy. */ --p-text-muted-color: #4b5563; --p-text-dim-color: #6b7280; /* ── severity ramps ────────────────────────────────────────────────────── Only the stops actually used by Tag, Message and Button: a tint for the background, a mid for borders and dots, a dark for text on the tint. */ --p-green-100: #dcfce7; --p-green-500: #22c55e; --p-green-700: #15803d; --p-blue-100: #dbeafe; --p-blue-500: #3b82f6; --p-blue-700: #1d4ed8; --p-amber-100: #fef3c7; --p-amber-500: #f59e0b; --p-amber-700: #b45309; --p-red-100: #fee2e2; --p-red-500: #ef4444; --p-red-700: #b91c1c; --p-success-color: var(--p-green-700); --p-info-color: var(--p-blue-700); --p-warn-color: var(--p-amber-700); --p-danger-color: var(--p-red-700); /* Prices move up and down; those two directions are the only place this dashboard uses colour to mean something the label does not already say. */ --p-up-color: var(--p-green-700); --p-down-color: var(--p-red-700); /* ── shape ───────────────────────────────────────────────────────────── */ --p-border-radius-sm: 4px; --p-border-radius: 6px; /* PrimeVue's own default */ --p-border-radius-lg: 12px; /* Tailwind rounded-xl — every aiReports card */ --p-focus-ring: 0 0 0 0.2rem rgba(var(--p-primary-rgb), 0.25); --p-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.04); --p-card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.06); --p-overlay-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08); /* ── type ────────────────────────────────────────────────────────────── */ --p-font-family: Avenir, "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --p-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --p-font-size: 14px; /* ── layout ──────────────────────────────────────────────────────────── */ --rail-width: 70px; /* collapsed sidebar, as in aiReports */ --rail-width-open: 250px; /* on hover, or always on mobile */ --topbar-height: 56px; --content-max-width: 1572px; /* ── component knobs ───────────────────────────────────────────────────── Named the way PrimeVue names them, and overridden the way aiReports overrides them. A load board is denser than a document list, so the cell padding here is 6px/10px where aiReports sets 10px/18px. */ --p-datatable-header-cell-padding: 7px 10px; --p-datatable-body-cell-padding: 6px 10px; --p-datatable-row-hover-background: var(--p-surface-100); --p-inputtext-padding: 6px 10px; --p-button-padding: 6px 12px; } /* Dark mode. aiReports runs its dark surfaces at zinc — #000 ground, #18181b * card, a 10% white border — rather than inverting the slate ramp, and the * green stays put in both themes. */ .dark-mode { --p-content-background: #18181b; --p-content-border-color: rgba(255, 255, 255, 0.1); --p-content-hover-background: rgba(255, 255, 255, 0.04); --p-ground-background: #000000; --p-overlay-background: #18181b; --p-text-color: #e9ecef; --p-text-muted-color: #a1a1aa; --p-text-dim-color: #8b8b93; /* On a dark card, a 100-stop tint is a flashlight. The tags switch to a translucent wash of the mid stop and take their text from it instead. */ --p-green-100: rgba(34, 197, 94, 0.16); --p-blue-100: rgba(59, 130, 246, 0.16); --p-amber-100: rgba(245, 158, 11, 0.16); --p-red-100: rgba(239, 68, 68, 0.16); --p-success-color: #4ade80; --p-info-color: #60a5fa; --p-warn-color: #fbbf24; --p-danger-color: #f87171; --p-up-color: #4ade80; --p-down-color: #f87171; --p-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); --p-card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.5); --p-overlay-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 8px 10px -6px rgba(0, 0, 0, 0.6); --p-datatable-row-hover-background: rgba(255, 255, 255, 0.04); color-scheme: dark; }