/* ========================================================================== CNJ Dashboard — design tokens Direction: Dispatch. Graphite rail, safety-yellow accent, square geometry. Load order: cnj-tokens.css → cnj-components.css → dash.css (screen CSS). Theme: set data-theme="light" | "dark" on . Omit to follow the OS. Workspace: set data-workspace="handyman" | "network" on — shifts the rail hue only. The accent never changes; it always means "press this" or "this is waiting on you". ========================================================================== */ :root { /* ---- Type ------------------------------------------------------------- */ --font-display: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif; --font-text: 'Karla', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; --t-display: 800 30px/1 var(--font-display); --t-display-sm: 800 21px/1 var(--font-display); --t-h1: 800 22px/1 var(--font-display); --t-h2: 700 17px/1.2 var(--font-display); --t-btn: 700 13px/1 var(--font-display); --t-btn-sm: 700 12px/1 var(--font-display); --t-tab: 700 13px/1 var(--font-display); --t-row: 600 15px/1.25 var(--font-text); --t-row-sm: 600 14px/1.2 var(--font-text); --t-body: 400 14px/1.5 var(--font-text); --t-meta: 400 12px/1.45 var(--font-text); --t-micro: 400 11px/1.4 var(--font-text); --t-num: 500 16px/1 var(--font-mono); --t-num-sm: 500 14px/1 var(--font-mono); --t-num-micro: 400 11px/1 var(--font-mono); --t-label: 700 11px/1 var(--font-text); --t-label-sm: 700 10px/1 var(--font-text); --track-label: .14em; --track-tight: -.028em; /* ---- Space (4px base) ------------------------------------------------- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 56px; /* ---- Geometry --------------------------------------------------------- */ --r0: 0; --r1: 2px; --r-pill: 999px; --stripe: 3px; --rail-w: 216px; --tap: 44px; --border: 1px; /* ---- Elevation -------------------------------------------------------- */ --shadow-menu: 0 6px 18px rgba(20,23,26,.14); --shadow-drawer: -10px 0 34px rgba(20,23,26,.16); --shadow-sheet: 0 -10px 34px rgba(20,23,26,.20); --shadow-toast: 0 8px 24px rgba(20,23,26,.22); /* ---- Motion ----------------------------------------------------------- */ --ease: cubic-bezier(.2,.7,.3,1); --dur-1: 90ms; --dur-2: 180ms; --dur-3: 260ms; } /* ========================================================================== LIGHT — the field theme. ========================================================================== */ :root, [data-theme='light'] { color-scheme: light; --bg: #F1F2F4; --surface: #FFFFFF; --surface-2: #F8F9FA; --surface-3: #E9EBEE; --surface-inv: #14171A; --on-inv: #FFFFFF; --on-inv-dim: #9BA3AB; --on-inv-line: #4A5057; --line: #DFE2E6; --line-strong: #CFD4D9; --line-heavy: #14171A; --fg: #14171A; --fg-2: #454D54; --fg-3: #5F666D; --fg-4: #6C737A; --fg-data: #545C64; --rail: #1D2126; --rail-2: #2A2F36; --rail-chip: #3A3F46; --rail-fg: #E6E9EC; --rail-fg-dim: #9BA3AB; --rail-fg-mute:#828A92; --rail-line: #2F353C; --accent: #E8C21A; --accent-ink: #14171A; --accent-dim: #C9A70F; --accent-wash: #FBF3D0; --accent-line: #EBDFA8; --accent-row: #FEFBEC; --accent-text: #8A6D00; --accent-text-2: #6E5700; --info: #1D5FBF; --info-wash: #E7EFFB; --ok: #197A52; --ok-wash: #E3F1EB; --crit: #B3261E; --crit-wash: #FBE8E6; --crit-text: #7A211A; --mute: #545C64; --mute-wash: #EDEFF1; --scrim: rgba(20,23,26,.42); --skel: #E4E7EA; --skel-hi: #EFF1F3; --focus: #1D5FBF; } /* ========================================================================== DARK — the desk theme. Designed, not inverted. ========================================================================== */ [data-theme='dark'] { color-scheme: dark; --bg: #12151A; --surface: #171B21; --surface-2: #1C2128; --surface-3: #1C2128; --surface-inv: #E4E7EA; --on-inv: #12151A; --on-inv-dim: #5A6169; --on-inv-line: #C4CACF; --line: #23282F; --line-strong: #2F353D; --line-heavy: #E4E7EA; --fg: #E4E7EA; --fg-2: #B4BAC1; --fg-3: #8A929B; --fg-4: #838B94; --fg-data: #9AA1A9; --rail: #0C0F13; --rail-2: #23282F; --rail-chip: #2C323A; --rail-fg: #E6E9EC; --rail-fg-dim: #8B939B; --rail-fg-mute:#7C848C; --rail-line: #23282F; --accent: #E8C21A; --accent-ink: #14171A; --accent-dim: #C9A70F; --accent-wash: #2B2412; --accent-line: #3A3018; --accent-row: #221D10; --accent-text: #E0BE3C; --accent-text-2: #F0D66B; --info: #7FA9F0; --info-wash: #1B2A42; --ok: #7FD3A8; --ok-wash: #14301F; --crit: #F08C84; --crit-wash: #3A1B18; --crit-text: #F3A9A2; --mute: #8B939B; --mute-wash: #252B33; --scrim: rgba(4,6,9,.62); --skel: #23282F; --skel-hi: #2C323A; --focus: #7FA9F0; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; --bg:#12151A; --surface:#171B21; --surface-2:#1C2128; --surface-3:#1C2128; --surface-inv:#E4E7EA; --on-inv:#12151A; --on-inv-dim:#5A6169; --on-inv-line:#C4CACF; --line:#23282F; --line-strong:#2F353D; --line-heavy:#E4E7EA; --fg:#E4E7EA; --fg-2:#B4BAC1; --fg-3:#8A929B; --fg-4:#838B94; --fg-data:#9AA1A9; --rail:#0C0F13; --rail-2:#23282F; --rail-chip:#2C323A; --rail-fg:#E6E9EC; --rail-fg-dim:#8B939B; --rail-fg-mute:#7C848C; --rail-line:#23282F; --accent-wash:#2B2412; --accent-line:#3A3018; --accent-row:#221D10; --accent-text:#E0BE3C; --accent-text-2:#F0D66B; --info:#7FA9F0; --info-wash:#1B2A42; --ok:#7FD3A8; --ok-wash:#14301F; --crit:#F08C84; --crit-wash:#3A1B18; --crit-text:#F3A9A2; --mute:#8B939B; --mute-wash:#252B33; --scrim:rgba(4,6,9,.62); --skel:#23282F; --skel-hi:#2C323A; --focus:#7FA9F0; } } /* ========================================================================== WORKSPACE — same shell, different chrome. Only the rail hue moves. ========================================================================== */ [data-workspace='network'] { --rail: #16202B; --rail-2: #22303F; --rail-line: #263544; } [data-theme='dark'][data-workspace='network'] { --rail: #0A1017; --rail-2: #1B2733; --rail-line: #1B2733; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light'])[data-workspace='network'] { --rail:#0A1017; --rail-2:#1B2733; --rail-line:#1B2733; } } /* ========================================================================== CREW IDENTITY — one stable colour per person. ========================================================================== */ :root { --crew-1: #1D5FBF; --crew-2: #9A3412; --crew-3: #146B5C; --crew-4: #6D28A8; --crew-5: #8A6D00; --crew-6: #A81E52; --crew-7: #2F5E1C; --crew-8: #1E4E8A; } [data-theme='dark'] { --crew-1: #7FA9F0; --crew-2: #E39A72; --crew-3: #62C6B4; --crew-4: #BE9BEB; --crew-5: #DCBB4A; --crew-6: #F08CB0; --crew-7: #92C97A; --crew-8: #86B4E8; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --crew-1: #7FA9F0; --crew-2: #E39A72; --crew-3: #62C6B4; --crew-4: #BE9BEB; --crew-5: #DCBB4A; --crew-6: #F08CB0; --crew-7: #92C97A; --crew-8: #86B4E8; } } /* ========================================================================== BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font: var(--t-body); -webkit-font-smoothing: antialiased; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); } h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); letter-spacing: var(--track-tight); } p { margin: 0; text-wrap: pretty; } a { color: var(--info); text-decoration: none; } a:hover { text-decoration: underline; } button, input, select, textarea { font: inherit; color: inherit; } .num, td .num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }