/* ===================================================================================== RJ Laravel Admin (brand-006) · F1 component kit · tokens.css · phase 1 (2026-10-18) ONE token file, five sections, in load order: 1 brand-005 kit v4 tokens.css, verbatim (command-center 79f307db5, sha256 a323c347…). The shared base of @rj/admin-kit. 2 phase-0/tokens-delta.css, verbatim: the Laravel admin theme (4b·R). Grey ground, steel selection, 2b ultra density as the compact default + [data-density="comfortable"], the HQ corner + 76px labelled rail, tape motif, CJK stack, and section 3 of the delta PINS the Satin Lapel navy #0E1729 literally, so kit v4's Midnight green never reaches here. 3 (inside 2) the comfortable density mode. 4 B6 kit layer: names the F1 specimens need + real domain colours (statuses, phases) as tokens. 5 [data-theme="dtc"]: the same components in the DTC admin's Midnight green #08120E (proof: one kit, two apps). Change nothing here inside a family page. See CONTRACT.md § Tokens. ===================================================================================== */ /* ===== 1 · brand-005 kit v4 (verbatim) ===== */ /* ===================================================================================== RJ DTC Admin · Round 2 component kit · tokens.css (FROZEN 2026-10-11 · integration pass 2026-10-11 · v3 named literals 2026-10-12 · v4 Midnight green recolour 2026-10-18, see KIT-CHANGELOG.md) Direction: Round 1c board 3 "Fine Worsted · Satin Lapel", picked by Frank 2026-10-11, with his one amendment: Archivo at its NORMAL width (no font-stretch, wdth 100, no widening letter-spacing) on titles, buttons and the menu. Source of every value: phase-1/r3/src/directions_r3.py (SATIN_LAPEL) on top of phase-1/src/base.css + phase-1/r2/src/directions_r2.py (Fine Worsted skin). Colour roles are shadcn-style bare HSL triples ("H S% L%"), so they map 1:1 to a shadcn/ui globals.css and are used as hsl(var(--x)) or hsl(var(--x) / .12). v4 (2026-10-18): the Satin Lapel navy is recoloured to C "Midnight green" #08120E (Frank, 2026-10-18), so the DTC admin and the Laravel admin (navy) never read as the same panel. Source: recolour-2026-10-18/r2/data/recolour-C.css. Status greens (--success #21654C), body ink, neutrals, info/warning and --chart-1..5 are unchanged. Hex in the trailing comment is the authored value. Change nothing here inside a family page: if a family needs a new token, raise it in CONTRACT.md § Raising a token. ===================================================================================== */ :root { color-scheme: light; /* ---------- shadcn core roles ---------- */ --background: 0 0% 100%; /* #FFFFFF page surface (clean white canvas) */ --foreground: 222 43% 10%; /* #0F1626 body text, headings */ --card: 0 0% 100%; /* #FFFFFF */ --card-foreground: 222 43% 10%; /* #0F1626 */ --popover: 0 0% 100%; /* #FFFFFF menus, sheets, dialogs, toasts */ --popover-foreground: 222 43% 10%; /* #0F1626 */ --primary: 156 38% 5%; /* #08120E RJ midnight green (--rj-ink): every primary action */ --primary-foreground: 60 17% 98%; /* #FAFAF8 */ --primary-hover: 156 32% 9%; /* #101F19 --rj-ink-hover */ --secondary: 0 0% 100%; /* #FFFFFF outlined secondary button ground */ --secondary-foreground: 156 38% 5%; /* #08120E */ --muted: 225 22% 96%; /* #F4F5F8 table header, wells, hover */ --muted-foreground: 221 17% 38%; /* #505A70 quiet text (>= 5.9:1 on white) */ --accent: 165 11% 93%; /* #EBEFEE selection, active filter */ --accent-foreground: 156 38% 5%; /* #08120E */ --destructive: 353 53% 42%; /* #A2323F */ --destructive-foreground: 0 0% 100%; /* #FFFFFF */ --border: 220 20% 91%; /* #E4E7ED hairlines */ --input: 219 14% 59%; /* #8892A5 control borders: 3.1:1 on white (WCAG 1.4.11); was #C6CCD7 at 1.6:1 */ --input-hover: 223 17% 45%; /* #5F6A86 field / checkbox / select border on hover */ --secondary-border: 219 14% 79%; /* #C2C7D1 outlined secondary button edge (board 3, text-labelled so exempt from 3:1) */ --secondary-border-hover: 220 10% 70%; /* #ABB0BA */ --ring: 157 23% 34%; /* #436C5C focus */ --radius: 0.375rem; /* 6px (shadcn --radius) */ /* ---------- status roles (each has a -foreground for text ON a solid fill) ---------- */ --success: 158 51% 26%; /* #21654C */ --success-foreground: 0 0% 100%; --warning: 36 79% 29%; /* #83550F also the STAGING badge */ --warning-foreground: 0 0% 100%; --info: 218 49% 39%; /* #335794 */ --info-foreground: 0 0% 100%; --neutral: 222 13% 39%; /* #575F72 */ --neutral-foreground: 0 0% 100%; /* catalogue lifecycle — always use these names, never the generic role, in product UI */ --draft: var(--info); /* Draft = info blue */ --available: var(--success); /* Available = green */ --retired: var(--neutral); /* Retired = slate */ --locked: var(--neutral); /* "locked" banner + lock chip */ --not-wired: var(--warning); /* "not wired" banner (feature exists, backend not connected) */ /* soft fills: status at 12% on white; text stays the status colour (all >= 4.5:1) */ --status-soft-alpha: .12; /* ---------- sidebar (shadcn sidebar block) ---------- */ --sidebar: 156 38% 5%; /* #08120E */ --sidebar-background: var(--sidebar); /* older shadcn name */ --sidebar-foreground: 154 7% 80%; /* #C9D0CD --rj-mist */ --sidebar-primary: 156 16% 68%; /* #A2BBB1 active-item rail + icon tint */ --sidebar-primary-foreground: 156 38% 5%; --sidebar-accent: 159 35% 10%; /* #10211B */ --sidebar-accent-foreground: 60 17% 98%; /* #FAFAF8 */ --sidebar-border: 159 22% 13%; /* #192722 */ --sidebar-ring: 156 16% 68%; /* the satin sheen: about a third of Silk Facing's glow, sidebar only, never on buttons */ --sidebar-sheen: linear-gradient(180deg, #0B1813 0%, #08120E 52%, #06100C 100%); --sidebar-sheen-light: radial-gradient(closest-side, rgba(135,169,155,0.11), transparent); /* ---------- charts (shadcn --chart-1..5) ---------- Categorical order, assigned in this order and never cycled. Validated with the dataviz validator on white: lightness band, chroma floor, adjacent CVD >= 10.6, normal-vision >= 15.9, all >= 3:1; slots 1-3 also pass --pairs all. None of them is a status colour. A single series uses --chart-1; a comparison / previous period uses --chart-muted (dotted). */ --chart-1: 219 61% 47%; /* #2F62C0 blue */ --chart-2: 166 76% 36%; /* #16A07F teal */ --chart-3: 20 70% 53%; /* #DB6B35 coral */ --chart-4: 229 62% 68%; /* #7C8FE0 periwinkle */ --chart-5: 334 58% 58%; /* #D2588C rose */ --chart-muted: 154 9% 53%; /* #7C9188 grey-green: previous period, reference lines, never a category */ /* ---------- presentation (kit pages only, not product UI) ---------- */ --canvas: 214 24% 94%; /* #EDF0F4 page behind specimen cards */ --studio: radial-gradient(120% 90% at 50% 18%, #f7f8fa 0%, #e3e7ee 80%); /* garment photo ground */ /* ---------- type ---------- */ --font-title: 'Archivo', system-ui, sans-serif; /* titles, buttons, menu, labels, table headers */ --font-voice: var(--font-title); --font-ui: 'IBM Plex Sans', system-ui, sans-serif; /* reading text, tables, prices */ --font-code: 'IBM Plex Mono', ui-monospace, monospace; /* cloth codes, handles, versions, ids */ --font-stretch-title: 100%; /* Frank 2026-10-11: Archivo is NEVER set wide */ --title-w: 600; /* scale: size / line-height / tracking (tracking is never positive on Archivo) */ --text-display: 40px; --lh-display: 1.05; --tr-display: -.02em; /* kit page H1 only */ --text-page: 26px; --lh-page: 1.15; --tr-page: -.015em; /* page title in the app */ --text-section: 16px; --lh-section: 1.25; --tr-section: -.005em; /* sheet / dialog / panel title */ --text-card: 13.5px; --lh-card: 1.3; /* card title, panel h3 */ --text-body: 13px; --lh-body: 1.45; /* default UI text (Plex) */ --text-read: 15px; --lh-read: 1.55; /* help drawer, long copy */ --text-label: 13px; /* form label (Archivo 600) */ --text-small: 12px; /* meta, table secondary */ --text-kpi: 28px; --text-hero: 30px; /* KPI value / chart headline figure (raised by data-display) */ --text-step-m: 17px; /* phone compact step title (raised by wizard-stepper) */ --text-input-m: 16px; /* phone text fields: iOS never zooms at >= 16px */ --text-micro: 11.5px; /* chips, counts, th */ --text-code: 12px; --text-btn: 13.5px; --text-btn-sm: 12.5px; --text-btn-lg: 15px; --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; /* ---------- spacing: 4px grid ---------- */ --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-18: 72px; /* ---------- sizes ---------- */ --control-h: 40px; /* button, input, select (desktop) */ --control-h-sm: 34px; /* small button, row actions */ --control-h-m: 44px; /* phone minimum tap target */ --control-h-m-lg: 48px; /* phone primary / sheet buttons */ --row: 44px; /* table row */ --row-th: 36px; /* table header */ --topbar-h: 56px; --sidebar-w: 232px; --sheet-w: 404px; --dialog-w: 480px; --help-w: 380px; --sheet-w-md: 532px; /* medium side sheet: detail views (raised by overlays) */ --sheet-w-lg: 856px; /* large side sheet: create key, long forms (raised by overlays) */ --row-compact: 36px; /* compact table density (raised by data-table) */ --control-h-xs: 28px; /* inline buttons inside photo slots, compact pills (raised by form-controls) */ --chip-h: 22px; --chip-h-lg: 26px; /* header-size chip (raised by status-feedback) */ --pbar-h: 52px; /* phone top bar (raised by specimens) */ --tabbar-h: 62px; /* phone tab bar incl. padding (raised by specimens) */ --content-max: 1280px; /* page content stops growing past this (raised by specimens; build lane) */ /* ---------- radius ---------- */ --r-chip: 4px; /* square chips */ --r-control: 6px; /* buttons, inputs, menu items, filter chips */ --r-card: 8px; /* cards, table wrap, popovers (= radius + 2) */ --r-frame: 15px; /* panels, app frame, specimen cards */ --r-pill: 999px; /* switch, avatar */ --r-media: 4px; /* photos inside cards */ --r-card-inner: calc(var(--r-card) - 1px); /* photo corners inside a 1px-bordered card (raised by cards-gallery) */ /* ---------- elevation ---------- */ --e-0: none; --e-1: 0 1px 2px rgba(8,18,14,.04); /* card */ --e-btn: 0 1px 2px rgba(8,18,14,.20); /* primary button */ --e-btn-2: 0 1px 1px rgba(8,18,14,.05); /* secondary button */ --e-frame: 0 0 0 1px rgba(8,18,14,.05), 0 16px 36px -24px rgba(8,18,14,.20); /* app frame */ --e-pop: 0 12px 32px -10px rgba(8,18,14,.25); /* dropdown, combobox */ --e-toast: 0 12px 28px -14px rgba(8,18,14,.35); --e-sheet: -24px 0 60px -20px rgba(8,18,14,.35); /* side sheet, help drawer */ --e-dialog: 0 24px 64px -20px rgba(8,18,14,.40); --e-phone-sheet: 0 -20px 50px -20px rgba(8,18,14,.50); /* phone bottom sheet */ --e-card-hover: 0 10px 24px -14px rgba(8,18,14,.28); /* lifted card / kanban card (raised by cards-gallery + data-display) */ --sticky-edge: hsl(var(--foreground) / .09); /* frozen-column edge shade (raised by data-table) */ --scrim: rgba(10,14,24,.38); --focus-ring: 0 0 0 1px hsl(var(--ring)), 0 0 0 4px hsl(var(--ring) / .14); /* ---------- motion: crisp set (Satin Lapel), approved as-is ---------- */ --ease-standard: cubic-bezier(.2,0,0,1); --ease-in: cubic-bezier(.22,1,.36,1); /* entering: soft landing */ --ease-out: cubic-bezier(.4,0,1,1); /* leaving */ --motion-hover: 120ms var(--ease-standard); --motion-press: 80ms var(--ease-standard); --motion-focus: 140ms var(--ease-standard); --motion-pop-in: 160ms var(--ease-in); --motion-pop-out: 110ms var(--ease-out); --motion-sheet-in: 260ms var(--ease-in); --motion-sheet-out: 180ms var(--ease-out); --motion-toast-in: 200ms var(--ease-in); --motion-toast-out: 140ms var(--ease-out); --toast-dwell: 2600ms; --toast-dwell-undo: 5200ms; /* an Undo toast stays twice as long (raised by status-feedback) */ --toast-gap: 8px; /* gap between stacked toasts (raised by status-feedback) */ --tooltip-delay: 400ms; /* hover delay before a tooltip; keyboard focus shows it at once (raised by overlays + page-help) */ --hovercard-delay: 500ms; /* (raised by overlays) */ --motion-skeleton: 1.6s var(--ease-standard) infinite alternate; /* skeleton pulse (raised by data-table + cards-gallery) */ --press-shift: 1px; /* button settles 1px on press */ --pop-shift: -4px; /* dropdown drops 4px */ --toast-shift: 8px; /* toast rises 8px */ --lift-shift: -2px; /* card hover lift (raised by cards-gallery) */ /* ---------- stacking (raised by overlays: a guard dialog sits above an open sheet) ---------- */ --z-sticky: 3; --z-pop: 20; --z-tip: 25; --z-scrim: 30; --z-sheet: 31; --z-guard-scrim: 40; --z-guard: 41; --z-toast: 50; /* ---------- kit v2 page primitives (Round 4 promotion, see KIT-CHANGELOG.md § v2) ---------- */ --tab-h: 40px; /* page / section tab strip (.tabs) */ --tab-h-m: 44px; /* phone tab strip, thumb height */ --kv-label: 120px; /* key/value aside label column (.k-kv) */ --kv-label-m: 104px; --li-min-h: 72px; /* phone list row without a thumbnail (.k-li) */ --actbar-blur: 8px; /* phone action bar / phone save bar glass */ /* ---------- kit v3 · icon sizes (Lucide on a 24px grid, 1.75 stroke; see KIT-CHANGELOG.md § v3) ---------- */ --icon-12: 12px; /* surface literal (svg width=12) */ --icon-13: 13px; /* surface literal (svg width=13) */ --icon-14: 14px; /* contract size inside chips, menus and small buttons */ --icon-15: 15px; /* surface literal (svg width=15), the most used off-contract size */ --icon-16: 16px; /* contract default */ --icon-18: 18px; /* surface literal (svg width=18) */ --icon-19: 19px; /* surface literal (svg width=19) */ --icon-20: 20px; /* contract size in empty states */ --icon-22: 22px; /* surface literal (svg width=22) */ --icon-28: 28px; /* surface literal (svg width=28) */ /* ---------- kit v3 · type literals (off the main scale; named so every use can be found) ---------- */ --text-8: 8px; /* initials in the empty garment placeholder (.dt-ph.none) */ --text-8-5: 8.5px; /* initials in the empty garment placeholder (.dt-ph.none) */ --text-9: 9px; /* initials in the large empty garment placeholder (.dt-ph.lg.none) */ --text-9-5: 9.5px; /* small mono badge */ --text-10: 10px; /* tab bar badge, tiny avatar */ --text-10-5: 10.5px; /* STAGING / environment badge, tab bar label, filter counts */ --text-11: 11px; /* kbd, chip count, step mark */ --text-14: 14px; /* phone lede, phone list title */ --text-18: 18px; /* phone sheet and ticket title */ --text-19: 19px; /* surface-only literal */ --text-20: 20px; /* ticket head, mini error page title */ --text-22: 22px; /* stacked KPI value, error page title */ --text-24: 24px; /* phone page title */ --text-44: 44px; /* surface-only literal */ --text-52: 52px; /* surface-only literal */ /* ---------- kit v3 · motion literals (animations and hand-off delays; reduced motion is handled per rule) ---------- */ --ease-enter: var(--ease-in); /* clearer name: the ENTERING curve (decelerates into place). --ease-in stays for compatibility */ --ease-exit: var(--ease-out); /* clearer name: the LEAVING curve (accelerates away). --ease-out stays for compatibility */ --ease-linear: linear; /* spinners and rotations only */ --ease-blink: steps(1); /* text caret blink */ --motion-spin: .8s; /* spinner turn */ --motion-spin-reduced: 2.4s; /* spinner turn under prefers-reduced-motion */ --motion-flash: 900ms; /* row / card "just changed" flash */ --motion-shake: 360ms; /* shake animation on the surfaces (pg-shake) */ --motion-rotate: 1.2s; /* rotation animation on the surfaces (wb-rot) */ --motion-indeterminate: 1.5s; /* indeterminate progress bar sweep */ --motion-loadbar: 1.4s; /* top load bar sweep */ --motion-caret: 1.1s; /* command palette caret blink */ --motion-handoff: .2s; /* visibility hand-off after a menu, tooltip or dialog closes */ --motion-handoff-sheet: .3s; /* visibility hand-off after a side sheet closes */ --skeleton-stagger: .12s; /* delay step between skeleton rows */ /* ---------- kit v3 · glass blur ---------- */ --blur-glass: 10px; /* desktop top bar glass */ --blur-soft: 6px; /* glass blur written on the surfaces */ /* ---------- kit v3 · selection rails and row focus (box-shadow) ---------- */ --e-rail: inset 2px 0 0 hsl(var(--primary)); /* 2px primary rail: selected row (.fc-cp-tbl) */ --e-rail-warning: inset 2px 0 0 hsl(var(--warning)); /* 2px warning rail (surfaces) */ --e-rail-strong: inset 3px 0 0 hsl(var(--primary)); /* 3px primary rail (surfaces) */ --e-rail-strong-info: inset 3px 0 0 hsl(var(--info)); --e-rail-strong-warning: inset 3px 0 0 hsl(var(--warning)); /* stale card */ --e-rail-strong-destructive: inset 3px 0 0 hsl(var(--destructive)); /* blocked card */ --e-row-focus: inset 0 1px 0 hsl(var(--ring)),inset 0 -1px 0 hsl(var(--ring)); /* keyboard-focused table row cell */ --e-row-focus-first: inset 2px 0 0 hsl(var(--ring)),inset 0 1px 0 hsl(var(--ring)),inset 0 -1px 0 hsl(var(--ring)); /* its first cell */ /* ---------- kit v3 · sidebar light and brand mark (exact board values, sidebar only, never on buttons) ---------- */ --e-sidebar-edge: inset -1px 0 0 rgba(201,208,205,0.07); /* the sidebar's inner right edge */ --sidebar-item-on: rgba(255,255,255,.07); /* active menu item ground */ --e-sidebar-item-on: inset 0 0 0 1px rgba(201,208,205,0.09),0 6px 18px -12px rgba(112,152,137,0.22); /* active menu item edge + soft glow */ --sidebar-item-on-icon: #B9CCC4; /* active menu item icon */ --brand-mark: linear-gradient(145deg,#EEF2F0,#CDD8D3); /* RJ brand mark tile */ --brand-mark-foreground: #08120E; /* RJ initials on the brand mark */ --e-brand-mark: 0 0 12px -4px rgba(155,182,171,0.22); /* brand mark glow */ /* ---------- viewports (dedicated compositions, never a responsive collapse) ---------- */ --vp-desktop: 1440px; --vp-phone: 390px; } /* Reduced motion: every move becomes instant. */ @media (prefers-reduced-motion: reduce) { :root { --motion-hover: 1ms linear; --motion-press: 1ms linear; --motion-focus: 1ms linear; --motion-pop-in: 1ms linear; --motion-pop-out: 1ms linear; --motion-sheet-in: 1ms linear; --motion-sheet-out: 1ms linear; --motion-toast-in: 1ms linear; --motion-toast-out: 1ms linear; --press-shift: 0px; --pop-shift: 0px; --toast-shift: 0px; --lift-shift: 0px; --tooltip-delay: 0ms; --hovercard-delay: 0ms; --motion-skeleton: none; } } /* ===== 2 · brand-006 tokens-delta.css (verbatim, phase-0) ===== */ /* ===================================================================================== RJ Laravel Admin (brand-006) · tokens-delta.css · final direction 4b·R (Frank, 2026-10-18) Load AFTER brand-005's phase-2/kit/tokens.css (as of 2026-10-18, pre-recolour). Only what differs is here; everything else is inherited by name. Source of truth: phase-1/final/src/tokens_delta.py (asserts against DTC). Section 3 PINS the navy family literally (equal to DTC today) so a later DTC recolour does not propagate. ===================================================================================== */ :root { /* ---------- 1 · Ground and selection ---------- */ --background: 214 24% 94%; /* #EDF0F4 */ /* was #FFFFFF · grey page ground; containers stay white (--card #FFFFFF inherited) */ --muted: 225 25% 97%; /* #F5F6F9 */ /* was #F4F5F8 · table head, wells, hover: one step off the grey ground */ --border: 216 21% 91%; /* #E2E6EC */ /* was #E4E7ED · hairlines tuned to the grey ground */ --accent: 220 52% 94%; /* #E9EEF8 */ /* was #EBEEF6 · selection / active filter: steel tint (2b) */ --ring: 219 51% 35%; /* #2C4B86 */ /* was #3F5FA6 · focus = steel (2b); no conflict with the exact DTC navy, which stays on sidebar + primary */ --steel: #2C4B86; /* new · NEW. Selection rail, focus, tape ticks, sorted column. Never the sidebar, never a primary action */ --selected-row: #E9EEF8; /* new · NEW. Selected table row ground */ /* ---------- 1 · Density · compact (default, 2b ultra) ---------- */ --text-body: 12.5px; /* was 13px · 2b ultra body */ --text-small: 11.5px; /* was 12px · meta, table secondary */ --text-page: 20px; /* was 26px · page title at density */ --text-btn: 13px; /* was 13.5px · button label */ --text-nav: 13px; /* new · NEW name. Menu item (DTC draws its menu at 13.5px) */ --row: 30px; /* was 44px · table row: compact is the default */ --row-th: 30px; /* was 36px · table header row */ --row-compact: 30px; /* was 36px · kept equal to --row so DTC components that ask for compact get 30px */ --control-h: 30px; /* was 40px · button, input, select (desktop) */ --control-h-sm: 26px; /* was 34px · small button, row actions */ --page-pad: 20px; /* new · NEW name. Page gutter (DTC uses a 24px literal) */ /* ---------- 1 · Shell ---------- */ --topbar-h: 48px; /* was 56px · white header; the HQ corner is the same height */ --rail-w: 76px; /* new · NEW. Collapsed rail, labelled (2b HQ Rail b form). Expanded stays --sidebar-w 232px (inherited) */ --rail-item-w: 66px; /* new · NEW. Rail item: icon over label */ --rail-item-min-h: 48px; /* new · NEW. Grows if a label wraps to its second line; never truncates */ --text-rail: 10px; /* new · NEW. Rail label (Archivo 500; 600 when active), up to 2 lines */ --hq-corner-bg: #FFFFFF; /* new · NEW. The white 'RJ HQ · Master admin' corner joining the header */ --hq-corner-fg: #0E1729; /* new · NEW. 'HQ' wordmark ink (= DTC navy, pinned) */ --hq-corner-sub: #505A70; /* new · NEW. 'Master admin' line (= --muted-foreground) */ --brand-mark: #0E1729; /* was linear-gradient(145deg,#EEF1F8,#CBD5EA) · the RJ tile sits on the WHITE corner, so it inverts to a navy tile */ --brand-mark-foreground: #FAFAF8; /* was #0E1729 · RJ initials on the navy tile */ --e-brand-mark: none; /* was 0 0 12px -4px rgba(150,175,225,.22) · no glow on the white corner */ /* ---------- 1 · Tape measure (light touch) ---------- */ --tape-color: var(--steel); /* new · NEW. Ticks under the header + HQ corner, on the sorted column, on progress */ --tape-minor: 8px; /* new · NEW. Minor tick pitch */ --tape-major: 80px; /* new · NEW. Major tick pitch */ --tape-h: 6px; /* new · NEW. Major tick height (minor = 3px) */ --tape-opacity: .55; /* new · NEW. Kept quiet */ /* ---------- 1 · Icons ---------- */ --icon-stroke: 1.5; /* new · NEW name. DTC's contract is 1.75 (comment only); lighter at density */ /* ---------- 1 · Type · CJK ---------- */ --font-cjk: 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei'; /* new · NEW. mainland staff; zh-Hans */ --font-title: 'Archivo', var(--font-cjk), system-ui, sans-serif; /* was 'Archivo', system-ui, sans-serif · Archivo first, CJK falls through to the CJK stack */ --font-ui: 'IBM Plex Sans', var(--font-cjk), system-ui, sans-serif; /* was 'IBM Plex Sans', system-ui, sans-serif · same for reading text */ /* ---------- 3 · PINNED navy family: equal to DTC kit v3 today, restated so a DTC recolour cannot reach here ---------- */ --primary: 220 49% 11%; /* #0E1729 */ /* every primary action */ --primary-foreground: 60 17% 98%; /* #FAFAF8 */ --primary-hover: 223 42% 18%; /* #1A2540 */ --secondary-foreground: 220 49% 11%; /* #0E1729 */ /* outlined button text */ --accent-foreground: 220 49% 11%; /* #0E1729 */ /* text on selection */ --foreground: 222 43% 10%; /* #0F1626 */ /* navy-ink body text */ --card-foreground: 222 43% 10%; /* #0F1626 */ --popover-foreground: 222 43% 10%; /* #0F1626 */ --sidebar: 220 49% 11%; /* #0E1729 */ /* the expanded menu + rail */ --sidebar-foreground: 222 19% 82%; /* #C9CEDA */ /* menu text (--rj-mist) */ --sidebar-primary: 221 54% 75%; /* #9FB4E2 */ /* active rail + icon tint (2b's steel #8EA8DC is NOT used) */ --sidebar-primary-foreground: 220 49% 11%; /* #0E1729 */ --sidebar-accent: 222 43% 19%; /* #1B2744 */ --sidebar-accent-foreground: 60 17% 98%; /* #FAFAF8 */ --sidebar-border: 222 33% 22%; /* #253049 */ --sidebar-ring: 221 54% 75%; /* #9FB4E2 */ --sidebar-sheen: linear-gradient(180deg, #131D33 0%, #0E1729 52%, #0C1425 100%); /* the satin */ --sidebar-sheen-light: radial-gradient(closest-side, rgba(130,160,220,.11), transparent); /* the bloom */ --e-sidebar-edge: inset -1px 0 0 rgba(201,206,218,.07); --sidebar-item-on: rgba(255,255,255,.07); /* active item ground */ --e-sidebar-item-on: inset 0 0 0 1px rgba(201,206,218,.09),0 6px 18px -12px rgba(110,140,210,.22); --sidebar-item-on-icon: #B7C7EA; /* active icon (2b's #C4D2EE is NOT used) */ --sidebar-background: var(--sidebar); } /* ---------- 2 · Density mode: comfortable (opt-in per person; compact is the default above) ---------- */ :root[data-density="comfortable"], [data-density="comfortable"] { --text-body: 13px; --text-small: 12px; --text-page: 20px; --row: 34px; --row-th: 32px; --row-compact: 34px; --control-h: 32px; --control-h-sm: 28px; } /* ===================================================================================== 4 · B6 KIT LAYER (phase 1, 2026-10-18). New names the F1 specimens need, plus the real domain colours (statuses, phases) as tokens so the build lane never hard-codes a hex. Nothing here repaints an inherited DTC token except --tab-h (36px at compact, the flagship tab strip). ===================================================================================== */ :root { --tab-h: 36px; /* was 40px (DTC) · status / record tabs at compact (flagship O01, D01) */ --btn-px: 13px; /* button side padding at compact (flagship .btn) */ --label-col: 180px; /* inline form label column (A03 compact) */ --fly-w: 240px; /* T-b flyout width; T-d mega flyout = n × --fly-w */ --dropdown-w-sm: 360px; /* kit v2 · small header menu (rare) */ --dropdown-w-md: 520px; /* kit v2 · notification centre (TRUTH-JOBS §7) */ --dropdown-w-lg: 600px; /* kit v2 · Jobs list: 3-line rows with target, counts, error (TRUTH-JOBS §7) */ --dropdown-max-h: min(78vh, 720px); /* kit v2 · header dropdowns scroll inside, header + footer fixed */ --sheet-w-lg: 760px; /* kit v2 · "Open all notifications" side sheet */ --sheet-w-xl: 960px; /* kit v2 · "Open all jobs" side sheet (list + detail + JSON) */ --hmenu-jobs-w: var(--dropdown-w-lg); /* header Jobs list · was 340px (v1) */ --hmenu-notif-w: var(--dropdown-w-md); /* notification centre menu · was 360px (v1) */ --hmenu-tz-w: 260px; /* clock → timezone menu */ --verdict-h: 40px; /* Pass / Fail buttons (FEEDBACK-B-r1 fix: 12px inner padding, key hint inline) */ --verdict-h-big: 52px; /* lightbox + phone */ --verdict-pad: 12px; --cell-w: 92px; /* matrix / price grid cell */ --meas-col: 96px; /* measurement grid garment column */ --gantt-day: 22px; /* gantt day column */ --split-min: 320px; /* split pane minimum list width */ --retailer-pill: #1B2438; /* retailer pill ground (flagship O01) */ --retailer-pill-fg: #F2F4F8; --tag-proposal: #6B3FA0; /* annotation only: purple dashed "proposal" */ --tag-needs-backend: var(--warning); --tag-api: var(--info); --diff-add: 158 51% 26%; /* = --success; inserted text */ --diff-del: 353 53% 42%; /* = --destructive; removed text */ --changed: 36 79% 29%; /* = --warning; "changed from carried-over value" (measurement gold) */ --save-bar: var(--primary); /* dark pending-changes bar (Access console, Frank) */ /* real order statuses · OrderStatus::getStatusList() (TRUTH-ORDERS §2). Used as --tone on .sc */ --os-draft: #D9D9D9; --os-confirmed: #D30D0D; --os-dtc_awaiting_fit: #F59E0B; --os-paid: #24701F; --os-build: #E07B00; --os-manufacturing: #006EF5; --os-outbound: #F5CC00; --os-completed: #16A085; --os-delivered: #0b5345; --os-on-hold: #930808; --os-voided: #B11BB1; /* real piece phases · gantt colours (TRUTH-ORDERS §5). Used as --ph on .pp */ --ph-rff: #24701F; --ph-ob: #FFB65C; --ph-fp: #FFA333; --ph-as: #479AFF; --ph-ip: #0A78FF; --ph-out: #F5CC00; --ph-done: #16A085; --ph-dlv: #0b5345; --ph-hold: #930808; /* real ticket statuses · tickets_statuses (TRUTH-TICKETS §8) */ --tk-open: #1291f3; --tk-prr: #fba037; --tk-psr: #d719f0; --tk-resolved: #168e06; --tk-closed: #de2121; --tk-reopen: #050336; } /* explicit compact: restates the :root compact values so a compact island survives inside a comfortable page */ [data-density="compact"] { --text-body: 12.5px; --text-small: 11.5px; --text-btn: 13px; --row: 30px; --row-th: 30px; --row-compact: 30px; --control-h: 30px; --control-h-sm: 26px; --tab-h: 36px; --btn-px: 13px; --label-col: 180px; --cell-w: 92px; } :root[data-density="comfortable"], [data-density="comfortable"] { --tab-h: 40px; --btn-px: 14px; --label-col: 200px; --cell-w: 100px; } /* ===================================================================================== 5 · THEME PROOF · [data-theme="dtc"]. The SAME components in the DTC admin's kit v4 colours (Midnight green #08120E, recolour candidate C, brand-005 KIT-CHANGELOG v4). One kit, two themes: the Laravel admin is the :root above (navy pinned); the DTC admin sets data-theme="dtc" at its root (and data-density="comfortable", its default). Values are brand-005 tokens.css @ 79f307db5. ===================================================================================== */ [data-theme="dtc"] { --background: 0 0% 100%; --muted: 225 22% 96%; --border: 220 20% 91%; --primary: 156 38% 5%; --primary-hover: 156 32% 9%; --secondary-foreground: 156 38% 5%; --accent: 165 11% 93%; --accent-foreground: 156 38% 5%; --ring: 157 23% 34%; --steel: #436C5C; --selected-row: #EBEFEE; --sidebar: 156 38% 5%; --sidebar-foreground: 154 7% 80%; --sidebar-primary: 156 16% 68%; --sidebar-primary-foreground: 156 38% 5%; --sidebar-accent: 159 35% 10%; --sidebar-border: 159 22% 13%; --sidebar-ring: 156 16% 68%; --sidebar-sheen: linear-gradient(180deg, #0B1813 0%, #08120E 52%, #06100C 100%); --sidebar-sheen-light: radial-gradient(closest-side, rgba(135,169,155,0.11), transparent); --e-sidebar-edge: inset -1px 0 0 rgba(201,208,205,0.07); --e-sidebar-item-on: inset 0 0 0 1px rgba(201,208,205,0.09),0 6px 18px -12px rgba(112,152,137,0.22); --sidebar-item-on-icon: #B9CCC4; --brand-mark: linear-gradient(145deg,#EEF2F0,#CDD8D3); --brand-mark-foreground: #08120E; --e-brand-mark: 0 0 12px -4px rgba(155,182,171,0.22); --hq-corner-bg: #08120E; --hq-corner-fg: #FAFAF8; --hq-corner-sub: #C9D0CD; --chart-muted: 154 9% 53%; --save-bar: var(--primary); --retailer-pill: #10211B; --tape-opacity: 0; /* the tape is a Laravel-admin motif; DTC has none */ --e-1: 0 1px 2px rgba(8,18,14,.04); --e-btn: 0 1px 2px rgba(8,18,14,.20); --e-btn-2: 0 1px 1px rgba(8,18,14,.05); --e-pop: 0 12px 32px -10px rgba(8,18,14,.25); --e-dialog: 0 24px 64px -20px rgba(8,18,14,.40); }