/* ===================================================================================== RJ DTC Admin · Round 2 component kit · tokens.css (FROZEN 2026-10-11 · integration pass 2026-10-11 · v3 named literals 2026-10-12, 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). 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: 220 49% 11%; /* #0E1729 RJ midnight navy (--rj-ink): every primary action */ --primary-foreground: 60 17% 98%; /* #FAFAF8 */ --primary-hover: 223 42% 18%; /* #1A2540 --rj-ink-hover */ --secondary: 0 0% 100%; /* #FFFFFF outlined secondary button ground */ --secondary-foreground: 220 49% 11%; /* #0E1729 */ --muted: 225 22% 96%; /* #F4F5F8 table header, wells, hover */ --muted-foreground: 221 17% 38%; /* #505A70 quiet text (>= 5.9:1 on white) */ --accent: 224 38% 94%; /* #EBEEF6 selection, active filter */ --accent-foreground: 220 49% 11%; /* #0E1729 */ --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: 221 45% 45%; /* #3F5FA6 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: 220 49% 11%; /* #0E1729 */ --sidebar-background: var(--sidebar); /* older shadcn name */ --sidebar-foreground: 222 19% 82%; /* #C9CEDA --rj-mist */ --sidebar-primary: 221 54% 75%; /* #9FB4E2 active-item rail + icon tint */ --sidebar-primary-foreground: 220 49% 11%; --sidebar-accent: 222 43% 19%; /* #1B2744 */ --sidebar-accent-foreground: 60 17% 98%; /* #FAFAF8 */ --sidebar-border: 222 33% 22%; /* #253049 */ --sidebar-ring: 221 54% 75%; /* the satin sheen: about a third of Silk Facing's glow, sidebar only, never on buttons */ --sidebar-sheen: linear-gradient(180deg, #131D33 0%, #0E1729 52%, #0C1425 100%); --sidebar-sheen-light: radial-gradient(closest-side, rgba(130,160,220,.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: 221 25% 58%; /* #7A8BB0 steel: 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(14,23,41,.04); /* card */ --e-btn: 0 1px 2px rgba(14,23,41,.20); /* primary button */ --e-btn-2: 0 1px 1px rgba(14,23,41,.05); /* secondary button */ --e-frame: 0 0 0 1px rgba(14,23,41,.05), 0 16px 36px -24px rgba(14,23,41,.20); /* app frame */ --e-pop: 0 12px 32px -10px rgba(14,23,41,.25); /* dropdown, combobox */ --e-toast: 0 12px 28px -14px rgba(14,23,41,.35); --e-sheet: -24px 0 60px -20px rgba(14,23,41,.35); /* side sheet, help drawer */ --e-dialog: 0 24px 64px -20px rgba(14,23,41,.40); --e-phone-sheet: 0 -20px 50px -20px rgba(14,23,41,.50); /* phone bottom sheet */ --e-card-hover: 0 10px 24px -14px rgba(14,23,41,.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,206,218,.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,206,218,.09),0 6px 18px -12px rgba(110,140,210,.22); /* active menu item edge + soft glow */ --sidebar-item-on-icon: #B7C7EA; /* active menu item icon */ --brand-mark: linear-gradient(145deg,#EEF1F8,#CBD5EA); /* RJ brand mark tile */ --brand-mark-foreground: #0E1729; /* RJ initials on the brand mark */ --e-brand-mark: 0 0 12px -4px rgba(150,175,225,.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; } }