/* * DarziOS — Design Tokens (visual contract, single source of truth) * * v2 — "Antique Cream" (owner-approved 2026-11-01 via the Theme Studio * preview). The Doc 7 v1 slate/brass palette is replaced by the owner's * selected antique-cream + antique-gold palette. ALL TOKEN NAMES are * unchanged from v1 (ADR-103 zero-hardcoding contract intact — component * stylesheets reference tokens only, so the whole PWA restyles from this * one file). A dark variant, "Midnight Tailor", is provided under * :root[data-theme="dark"] with the same token names; the shell-level * toggle (js/app.js) flips the attribute and persists it in localStorage. * * Source of truth: docs/Doc7_UI_UX_Flow_Bespoke_Tailoring_Design_System.md * Color tokens ......... Doc 7 §4 (v2 values per owner selection) * Spacing scale ........ Doc 7 §4.1 (locked — multiples of 4px) * Border radii ......... Doc 7 §4.1 (locked) * Elevation/shadows .... Doc 7 §4.1 (v2 warm-tinted values) * Font stacks .......... Doc 7 §4.2 (v2 — Manrope UI/brand, owner * readability directive 2026-11-01; Cinzel * retired — owner found it read as "foreign") * Tabular figures ...... Doc 7 §4.2 (locked — tabular-nums discipline) * Touch targets ........ Doc 7 §4.3 (locked — 48px counter, 56–64px workshop) * * ADR-103 (zero hardcoding) — owner rule, strict: * Every visual value in the PWA must resolve to a custom property * declared in THIS file. Component stylesheets may reference tokens * only; raw color/size literals in component CSS are a contract * violation. Derived tints are built from locked tokens via * color-mix() — never new raw hex. * * Contrast notes (WCAG 2.1 AA, primary text ≥ 4.5:1, large text ≥ 3:1): * Light — chalk-on-card 13.5:1, muted-on-card 5.6:1, brass-ink-on- * card-tint 5.4:1, on-brass 4.5:1, on-danger 5.4:1. * Dark — chalk-on-card 13.7:1, muted-on-card 6.9:1, on-brass 7.9:1, * on-danger 7.8:1. Tag-tint percentages differ per theme so coloured * tag text stays ≥ 4.5:1 on its own tinted background. */ :root { /* ------------------------------------------------------- color system * Antique Cream (light — default). Token names kept from v1; only the * values moved. `--canvas-dark` / `--chalk-white` names are v1 legacy * (they describe roles, not the v1 hex values). */ --canvas-dark: #EFE3CE; /* deep antique cream — master app canvas */ --surface-card: #F8F1E1; /* warm ivory — cards, panels, modals */ --surface-elevated: #F1E7D2; /* deeper cream — active inputs, steppers */ --border-subtle: #DCCBA6; /* tan — borders, row dividers */ --brand-brass: #A17F20; /* antique gold — primary CTA, borders */ --brand-brass-light: #C9A85C; /* bright antique gold — focus rings, */ /* hover surfaces, active indicators */ --brand-brass-ink: #74570E; /* text-role gold — AA on cream surfaces */ --chalk-white: #2E2415; /* dark espresso — high-contrast body text */ --chalk-muted: #6B5D42; /* warm taupe — form labels, metadata */ --status-success: #44693E; /* olive green — fully paid, QC passed */ --status-warning: #815809; /* deep amber — partial advance, trial */ --status-danger: #9C3A22; /* brick — balance due, QC rework */ --status-neutral: #74664A; /* warm stone — draft status, queued */ /* Derived text colors. on-brass is dark espresso (dark-on-gold reads as premium on cream; contrast-verified 4.5:1 on --brand-brass). */ --on-brass: #241B08; --on-danger: var(--canvas-dark); /* cream on brick ≈ 5.4:1 */ /* Derived tints — built from locked tokens only (no new raw hex). 14–18% on light surfaces keeps tinted tag text ≥ 4.5:1. */ --brass-faint: color-mix(in srgb, var(--brand-brass) 14%, transparent); --neutral-faint: color-mix(in srgb, var(--status-neutral) 18%, transparent); --success-faint: color-mix(in srgb, var(--status-success) 14%, transparent); --warning-faint: color-mix(in srgb, var(--status-warning) 14%, transparent); --danger-faint: color-mix(in srgb, var(--status-danger) 14%, transparent); /* ---------------------------------------------------------- typography * v2 — Manrope (geometric, high legibility, modern) replaces Inter + * Cinzel per the owner readability directive; Inter stays in the * fallback chain, then the system stack (offline-safe). */ --font-ui: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-brand: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Type scale — v2 readability bump (+1 step overall; owner found the v1 scale small for counter use at arm's length). */ --text-xs: 0.875rem; /* 14px — metadata, timestamps */ --text-sm: 0.9375rem; /* 15px — table cells, labels */ --text-md: 1.0625rem; /* 17px — body copy (base) */ --text-lg: 1.25rem; /* 20px — subheads */ --text-xl: 1.5rem; /* 24px — card titles */ --text-2xl: 1.875rem; /* 30px — screen headings */ --text-3xl: 2.375rem; /* 38px — display / receipt banner */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* ------------------------------------------------------------ spacing * Locked: Doc 7 §4.1 — multiples of 4px */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; /* -------------------------------------------------------------- radii * Locked: Doc 7 §4.1 */ --radius-sm: 4px; /* badges, tags */ --radius-md: 8px; /* inputs, buttons */ --radius-lg: 12px; /* cards, modals */ --radius-full: 9999px; /* pills, switches */ /* ------------------------------------------------------------ elevation * v2 — warm-tinted shadows (read as "paper and brass", not "slate"). */ --shadow-card: 0 4px 6px -1px rgba(46, 36, 21, 0.10), 0 2px 4px -2px rgba(46, 36, 21, 0.08); --shadow-modal: 0 20px 25px -5px rgba(46, 36, 21, 0.22), 0 8px 10px -6px rgba(46, 36, 21, 0.16); --shadow-btn: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 4px rgba(46, 36, 21, 0.18); /* -------------------------------------------------------- ergonomics * Locked: Doc 7 §4.3 */ --touch-min: 48px; /* counter & showroom minimum touch target */ --touch-workshop: 56px; /* workshop tablet stations (56–64px band) */ --touch-workshop-lg: 64px; /* workshop tablets — thimbles / dust hands */ /* ---------------------------------------------------------- motion * Fast, restrained, touch-first; every transition in the PWA must use * these tokens. */ --duration-fast: 120ms; --duration-base: 200ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); } /* ================================================================ MIDNIGHT TAILOR — dark variant of Antique Cream (v2). Same token names, dark values. Activated by the shell-level toggle (js/app.js sets document.documentElement.dataset.theme = "dark" and persists it in localStorage under the "darzios-theme" key). Tint percentages are lower than the light theme so coloured tag text keeps ≥ 4.5:1 on its own tinted background in dark mode. ================================================================ */ :root[data-theme='dark'] { --canvas-dark: #1C1712; /* near-black espresso — app canvas */ --surface-card: #262019; /* dark umber — cards, panels, modals */ --surface-elevated: #322A20; /* raised umber — active inputs, steppers */ --border-subtle: #3E3527; /* dark bronze — borders, row dividers */ --brand-brass: #C9A85C; /* bright antique gold — CTA, borders */ --brand-brass-light: #E0C178; /* pale gold — focus rings, hover */ --brand-brass-ink: #E0C178; /* text-role gold on dark surfaces */ --chalk-white: #F3ECDC; /* cream — high-contrast body text */ --chalk-muted: #B5A98D; /* warm sand — form labels, metadata */ --status-success: #8CC99E; /* soft jade — fully paid, QC passed */ --status-warning: #EDB85C; /* honey amber — partial advance, trial */ --status-danger: #F09A82; /* coral brick — balance due, QC rework */ --status-neutral: #A2957A; /* stone sand — draft status, queued */ --on-brass: #211703; /* espresso on bright gold ≈ 7.9:1 */ --on-danger: #2A1510; /* espresso on coral ≈ 7.8:1 */ --brass-faint: color-mix(in srgb, var(--brand-brass) 12%, transparent); --neutral-faint: color-mix(in srgb, var(--status-neutral) 14%, transparent); --success-faint: color-mix(in srgb, var(--status-success) 10%, transparent); --warning-faint: color-mix(in srgb, var(--status-warning) 10%, transparent); --danger-faint: color-mix(in srgb, var(--status-danger) 10%, transparent); --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.50), 0 2px 4px -2px rgba(0, 0, 0, 0.45); --shadow-modal: 0 20px 25px -5px rgba(0, 0, 0, 0.70), 0 8px 10px -6px rgba(0, 0, 0, 0.60); --shadow-btn: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 2px 6px rgba(0, 0, 0, 0.40); }