/* ============================================================================ PTCARGO · shared/css/tokens.css (Design System · Layer 1 of 4) ---------------------------------------------------------------------------- The single source of truth for every design decision (color / space / radius / font / shadow). Contains CSS custom properties ONLY — no selectors other than :root. Ref: docs/reference/FILE_NAMING_STANDARD.md Load order (in the page , once migration begins — Phase 1 does NOT touch any .html yet): tokens.css → layout.css → components.css → utilities.css Values are DATA-DRIVEN from a CSS-usage scan of the real member/mobile mockups (116 pages), not invented. Design direction = coffee / orange / green (not blue). Each token below carries the legacy var name it came from + how many pages define it, so the mapping is auditable. The "LEGACY ALIASES" block re-points the old var names the mockups already use (--sun --cta --ink --leaf --fd …) at these tokens, so existing pages keep working while they migrate one batch at a time. Every alias is EXACT (same value as the mockup's dominant definition = zero visual shift) unless flagged. ========================================================================== */ :root { /* ---- COLOR · brand (orange) -------------------------------------------- * * The mockups use a matched orange PAIR: a bright --sun (#ff7a1a) with a * * deep --sun-deep (#ef5f06), each defined by 105 pages. Owner spec + memory * * designate the DEEP orange #ef5f06 as the primary; #ff7a1a is the lighter. */ --color-primary: #ef5f06; /* deep orange · legacy --sun-deep/--cta-deep (105) */ --color-primary-dark: #cf4f00; /* derived press/hover shade (no darker orange in data) */ --color-primary-light: #ff7a1a; /* bright orange · legacy --sun/--cta (105) */ --color-primary-soft: #ffece0; /* orange tint · focus ring / badge bg */ --color-on-primary: #ffffff; /* text on an orange fill */ /* ---- COLOR · text ------------------------------------------------------ */ --color-text: #2a2016; /* coffee ink · legacy --ink (108) */ --color-text-soft: #6e5c4c; /* soft coffee · legacy --ink-2 (106) */ --color-muted: #9a8b7c; /* muted coffee · legacy --muted (107) */ /* ---- COLOR · status ---------------------------------------------------- */ --color-success: #1e9e6a; /* green · legacy --leaf (104) */ --color-success-soft: #e6f6ee; /* green tint · legacy --leaf-soft (67) */ --color-warning: #ffb23e; /* gold · legacy --gold (104) */ --color-warning-soft: #fcf1dc; /* gold tint · legacy --gold-soft (5) */ --color-danger: #e5544b; /* red · legacy --red (42) — see note [D] */ --color-danger-soft: #fdecea; /* red tint · legacy --red-soft (7) */ --color-danger-deep: #b03a30; /* deep red · legacy --red-d (12) */ /* ---- COLOR · warm accents ---------------------------------------------- */ --color-clay: #c8692b; /* terracotta · legacy --clay (62) */ --color-clay-soft: #fbeee2; /* clay tint · legacy --clay-soft (59) */ --color-clay-deep: #a9531f; /* deep clay · legacy --clay-deep (58) */ --color-ember: #ff3d2e; /* vivid red-orange · legacy --ember (48) */ /* ---- COLOR · surfaces & lines ------------------------------------------ */ --color-bg: #faf3ea; /* cream page background */ --color-bg-2: #f2e6d8; /* deeper cream · alt sections */ --color-surface: #ffffff; /* card / paper · legacy --paper (104) */ --color-surface-2: #fff8f2; /* warm off-white card · legacy --cream (50) */ --color-cream-2: #ffefe2; /* peach tint · legacy --cream-2 (52) */ --color-line: #f2e6d8; /* hairline border · legacy --line (63) */ --color-line-strong: #eae4db; /* stronger border · legacy --line alt (37) */ /* ---- SPACING (base 4 · 16px is the most-used gap) --------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; /* most-used */ --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 48px; /* ---- RADIUS (14px most-used) ------------------------------------------ */ --radius-sm: 10px; --radius-md: 14px; /* most-used */ --radius-lg: 20px; --radius-pill: 999px; /* ---- TYPOGRAPHY · size (14px base) ------------------------------------ */ --font-xs: 11px; --font-sm: 13px; --font-md: 14px; /* most-used */ --font-lg: 16px; --font-xl: 20px; --font-2xl: 26px; /* ---- TYPOGRAPHY · family (real mobile fonts = Mitr + Prompt) ----------- */ --font-display: 'Mitr', sans-serif; /* legacy --fd (106) · headings */ --font-body: 'Prompt', sans-serif; /* legacy --fb (106) · body text */ --font-numeric: 'Space Grotesk', 'Mitr', sans-serif; /* legacy --fn (38) · numbers */ --font-mono: 'Prompt', monospace; /* legacy --fm (35) · codes */ --font-sans: 'Prompt', 'Mitr', system-ui, -apple-system, 'Segoe UI', sans-serif; /* default body stack (components) */ --line-tight: 1.25; --line-normal: 1.5; /* ---- SHADOW (coffee-tinted · legacy --sh) ----------------------------- */ --shadow-sm: 0 1px 2px rgba(42,32,22,.05), 0 8px 20px -16px rgba(120,70,20,.35); --shadow-md: 0 12px 34px -22px rgba(120,70,20,.5); /* dominant real --sh (56 pages) */ --shadow-lg: 0 22px 48px -24px rgba(120,70,20,.5); /* ---- Z-INDEX (for components.css overlays) ---------------------------- */ --z-dropdown: 100; --z-modal: 1000; --z-toast: 1100; /* ---- PAGE SPACING · SINGLE SOURCE (CLASS_MAP §B) ----------------------- * * The one place whole-system PAGE spacing is defined. The canonical layout * classes below (.page / .card gap / .row) consume these — edit a value here * and every page that loads the shared layer shifts together. Pages must NOT * set page-level margin/padding by hand; go through a canonical class. * (Mirrors the values previously in shared/theme/tokens.css — now canonical * here since shared/css/* is the single source of truth.) */ --sp-page: 16px; /* .page — outer page padding */ --sp-card: 14px; /* gap between stacked .card blocks */ --sp-card-pad: 16px; /* padding inside a .card */ --sp-row: 10px; /* gap between .row items */ --sp-gap: 8px; /* small inline gap (chips / buttons) */ /* ---- APPSHELL sidebar gradient (desktop chrome · legacy --pt-sb-*) ----- * * Consumed by shared/shell/appshell — kept here so shared/css/tokens.css is * a complete superset (was only in shared/theme/tokens.css). */ --pt-sb-from: #8A5A2B; --pt-sb-mid: #6E4620; --pt-sb-to: #523414; /* ====================================================================== LEGACY ALIASES — old var names the member/mobile mockups already define, re-pointed at the tokens above. Values verified via: grep -rhoE '\-\-[a-z0-9-]+:[^;]+' mockups/member/mobile/*.html Each alias below equals the mockup's DOMINANT definition (0 visual shift), except the two flagged [G] (converged single outlier) — see notes at end. ====================================================================== */ /* orange — exact */ --sun: var(--color-primary-light); /* #ff7a1a exact (107) */ --sun-deep: var(--color-primary); /* #ef5f06 exact (107) */ --cta: var(--color-primary-light); /* #ff7a1a exact (29) */ --cta-deep: var(--color-primary); /* #ef5f06 exact (29) */ /* text — exact (coffee) */ --ink: var(--color-text); /* #2a2016 exact (108) */ --ink-2: var(--color-text-soft); /* #6e5c4c exact (106) */ --muted: var(--color-muted); /* #9a8b7c exact (107) */ /* status — exact */ --leaf: var(--color-success); /* #1e9e6a exact (104) */ --leaf-soft: var(--color-success-soft); /* #e6f6ee exact (67) */ --leaf-d: #127a50; /* exact deep leaf (2) — literal (no token) */ --gold: var(--color-warning); /* #ffb23e exact (104) */ --gold-soft: var(--color-warning-soft); /* #fcf1dc exact (5) */ --red: var(--color-danger); /* #e5544b exact (42) — note [D] */ --red-soft: var(--color-danger-soft); /* #fdecea exact (7) */ --red-d: var(--color-danger-deep); /* #b03a30 exact (12) */ --green: var(--color-success); /* [G] converged from neon #45f4a6 (1 outlier) */ /* warm accents — exact */ --clay: var(--color-clay); /* #c8692b exact (62) */ --clay-soft: var(--color-clay-soft); /* #fbeee2 exact (59) */ --clay-deep: var(--color-clay-deep); /* #a9531f exact (58) */ --ember: var(--color-ember); /* #ff3d2e exact (48) */ --brew: #8a5a2b; /* exact member caramel (5) — literal */ --brew-deep: #6e4620; /* exact deep caramel (5) — literal */ /* surfaces — exact */ --paper: var(--color-surface); /* #fff exact (104) */ --cream: var(--color-surface-2); /* #fff8f2 exact (50) */ --cream-2: var(--color-cream-2); /* #ffefe2 exact (52) */ --line: var(--color-line); /* #f2e6d8 exact (63) */ /* shadow + fonts — exact */ --sh: var(--shadow-md); /* dominant coffee --sh (56) */ --fd: var(--font-display); /* 'Mitr' exact (106) */ --fb: var(--font-body); /* 'Prompt' exact (106)*/ --fn: var(--font-numeric); /* 'Space Grotesk' exact (38) */ --fm: var(--font-mono); /* 'Prompt' monospace exact (35) */ /* blue-world names — kept at their EXACT legacy value (NOT re-mapped to a coffee token, to avoid a wrong guess). These belong to admin/warehouse pages; only --sky/--sky-soft actually appear in a few mobile pages. */ --sky: #3b6fd4; /* blue accent · exact (9) */ --sky-soft: #eaf2ff; /* blue tint · exact (5) */ /* -------------------------------------------------------------------------- NOTES [D] Owner spec listed danger red as #dc2626, but that value appears in ZERO member/mobile pages; the real, dominant danger red is --red = #e5544b (42 pages). Per the task's data-driven / "don't guess" rule, the token keeps the observed #e5544b (so migrated .btn-danger matches every existing page). Flip to #dc2626 here if the Owner wants the brighter red. [G] --green is defined once as neon #45f4a6 (clearly an off-brand outlier); it is converged to --color-success so the name resolves to a real green. DROPPED (would have been a WRONG guess — no correct token exists): --txt (#eaf0ff, blue light text, 2) · --bg (#050b18, dark, 1) --surface/--card/--accent/--nav/--nav-2 (0 definitions in mobile) --bc/--blue/--violet/--pu (low-use, off-palette / blue-world) -------------------------------------------------------------------------- */ }