/* ============================================================================ editorial.css — shared design system for Editorial Luxury treatment ============================================================================ Promotes the SKU-modal-scoped tokens (.modal-card-detail) up to :root so any page can opt into the same aesthetic. New + retrofitted pages should prefer these tokens over the legacy /css/tokens.css palette. Usage: • Set tokens at :root level (no need to scope to a wrapper class) • Use Double-Bezel utility classes (.ed-bezel + .ed-bezel-inner) for cards • Use .ed-eyebrow for monospace eyebrows + .ed-section-title for serif H2/H3 • Status pills via .ed-pill .ed-pill--positive/warning/critical ============================================================================ */ :root { /* ========================================================================== MERGED PALETTE — 2026-07-27. Not a wholesale copy in either direction. Source A: ZS Inventory (Amazon FBA app), whose :root was --ivory var(--ed-cream) --pink var(--ed-blush) --emerald var(--ed-emerald) --deep var(--ed-emerald-deep) --berry var(--ed-berry) --tx var(--ed-ink) --mu #7a7067 --lt #a39890 --bdr var(--ed-rule) --bdrl var(--ed-paper) --white #fff --warn var(--ed-oak) --blue #3b82f6 --purple #8b5cf6 Source B: this app's Emerald Atelier palette. ADOPTED FROM FBA — surfaces (ivory/white, cleaner than the old off-whites), ink var(--ed-ink), --deep var(--ed-emerald-deep) for sidebar + table headers, --warn var(--ed-oak) (3.08:1 vs the old oak's 2.58:1), --pink as --ed-blush, solid-hex hairlines, berry as a fill-only red, and the tighter geometry (see tokens.css). KEPT FROM THIS APP — the two mid inks and the two accent hues. Each is annotated inline with the measured reason. In short: FBA's --mu/--lt are too light for 9-12px chrome on cream, and its --blue/--purple are Tailwind defaults that sit outside the brand. Where a variant has no counterpart in either source (the -deep / -tint steps), it is DERIVED from its own base by darkening or alpha. Contrast figures quoted here are against --ed-cream, WCAG 2.1 ratios. ========================================================================== */ /* Surfaces */ --ed-cream: #FCF8F3; /* was #FBF8F3 → FBA --ivory */ --ed-paper: #EDE6DF; /* was #F5F0E6 → FBA --bdrl (sunken tier) */ --ed-paper-soft: #FAF7F2; /* was #FAF6EE → FBA soft fill */ --ed-surface-pure: #FFFFFF; /* was #FFFEFB → FBA --white */ /* Ink — top step from FBA, the two mid steps kept (see notes) */ --ed-ink: #1A1A1A; /* was #1A2422 → FBA --tx */ --ed-ink-soft: #4A5550; /* KEPT from zs-retail — FBA --mu #7a7067 is 4.58:1 on cream vs 7.34:1 here; this drives 11-12px secondary text */ /* Darkened 2026-07-27 from #8A8276 (3.59:1 — failed AA for small text) to 4.56:1. This token colours .ed-eyebrow at 9-10px and every em-dash empty state, so it has to clear 4.5:1, not the 3:1 large-text bar. Same hue, scaled to 87%. The ramp stays legible: 16.46 / 7.34 / 4.56. (FBA's --lt #a39890 was 2.67:1 — worse than what we already had.) */ --ed-ink-mute: #787167; /* Hairlines — solid hex in the FBA app, not alpha */ --ed-rule: #E2D9D0; /* was rgba(40,50,47,.10) → FBA --bdr */ --ed-rule-soft: #EDE6DF; /* was rgba(40,50,47,.05) → FBA --bdrl */ /* Brand palette */ --ed-emerald: #2A4B3C; /* unchanged — the one value both apps shared */ --ed-emerald-deep: #193834; /* was #1F3A2D → FBA --deep (sidebar, table head) */ --ed-emerald-tint: rgba(42, 75, 60, 0.06); --ed-oak: #B8860B; /* was #B6995D → FBA --warn (darkgoldenrod) */ --ed-oak-deep: #8A6408; /* derived: --ed-oak darkened for text-on-tint */ --ed-oak-tint: rgba(184, 134, 11, 0.10); /* derived from --ed-oak */ --ed-aubergine: #9B5060; /* KEPT from zs-retail — FBA --purple #8b5cf6 is a Tailwind default, off-palette */ --ed-aubergine-tint: rgba(155, 80, 96, 0.08); /* Red is SPLIT — the two apps disagreed and both were right about something. Measured on --ed-cream: berry 12.90:1, crimson 5.44:1. Berry wins contrast but is so dark it stops reading as RED at small sizes, which costs the alarm signal. So: --ed-crimson → text, numbers, borders, icons. Must read as alarm at 11px. --ed-berry → large FILLED surfaces (pills, badges, banner bars) where the depth is an asset and white sits on top of it. Do not use berry for small text, and do not use crimson for large fills. */ --ed-crimson: #B43C3C; /* kept from zs-retail — the alarm red */ --ed-crimson-tint: rgba(180, 60, 60, 0.06); --ed-berry: #600520; /* adopted from FBA --berry — fills only */ --ed-berry-tint: rgba(96, 5, 32, 0.06); /* FBA's blush — table-header text on the deep emerald bar. No prior equivalent; added so table chrome can match the source app. */ --ed-blush: #E5D5C7; /* FBA --pink */ /* Typography — MERGED: DM Sans body from FBA, Geist Mono data kept (narrower than FBA's JetBrains Mono → more table columns), Cormorant shared. */ --ed-serif: 'Cormorant Garamond', 'PP Editorial New', 'EB Garamond', Georgia, serif; --ed-grotesk: 'DM Sans', system-ui, -apple-system, sans-serif; --ed-mono: 'Geist Mono', ui-monospace, monospace; /* Motion */ --ed-ease: cubic-bezier(0.32, 0.72, 0, 1); --ed-fast: 200ms; --ed-base: 320ms; --ed-slow: 480ms; /* Shadows */ /* Shadow rgba recoloured off the new --ed-ink (var(--ed-ink)) — the old values were tinted with the retired green-black #28322F. */ --ed-shadow-rest: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 1px 2px rgba(26, 26, 26, 0.04); --ed-shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 12px 28px -8px rgba(26, 26, 26, 0.10); --ed-shadow-deep: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 32px 80px -20px rgba(26, 26, 26, 0.18), 0 8px 24px -8px rgba(26, 26, 26, 0.08); } /* ---------------------------------------------------------------------------- DOUBLE-BEZEL UTILITIES Wrap any card in .ed-bezel > .ed-bezel-inner for the nested-architecture look (paper-tinted shell + pure-surface core with concentric radii). ---------------------------------------------------------------------------- */ .ed-bezel { /* gradient stops = --ed-paper → --ed-cream at 55% (recoloured with the palette; these were rgba(245,240,230) / rgba(251,248,243)) */ background: linear-gradient(180deg, rgba(237, 230, 223, 0.55), rgba(252, 248, 243, 0.55)); border: 1px solid var(--ed-rule); border-radius: 12px; /* was 22px — density pass 2026-07-27 */ padding: 5px; /* was 8px */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 0 rgba(255, 255, 255, 0.3); } .ed-bezel-inner { background: var(--ed-surface-pure); border: 1px solid var(--ed-rule-soft); border-radius: 8px; /* was 16px — stays concentric with the 12px shell */ overflow: hidden; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(26, 26, 26, 0.04); } /* Variant: smaller bezel for inline cards */ .ed-bezel-sm { border-radius: 10px; padding: 4px; } .ed-bezel-sm > .ed-bezel-inner { border-radius: 7px; } /* ---------------------------------------------------------------------------- TYPOGRAPHY UTILITIES ---------------------------------------------------------------------------- */ .ed-eyebrow { font-family: var(--ed-mono); font-size: 10px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--ed-ink-mute); font-weight: 500; } .ed-eyebrow-sm { font-family: var(--ed-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ed-ink-mute); font-weight: 500; } .ed-section-title { font-family: var(--ed-serif); font-weight: 500; font-size: 20px; /* was 26px — density pass */ letter-spacing: -0.018em; color: var(--ed-ink); line-height: 1.15; margin: 0; } .ed-page-title { font-family: var(--ed-serif); font-weight: 500; font-size: 30px; /* was 48px — density pass */ letter-spacing: -0.025em; color: var(--ed-ink); line-height: 1.05; margin: 0; } .ed-numeric { font-family: var(--ed-serif); font-weight: 500; letter-spacing: -0.022em; color: var(--ed-ink); font-feature-settings: 'lnum'; } .ed-mono { font-family: var(--ed-mono); font-feature-settings: 'tnum'; } /* ---------------------------------------------------------------------------- STATUS PILLS — filled, with depth ---------------------------------------------------------------------------- */ .ed-pill { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; font-family: var(--ed-mono); font-size: 9px; letter-spacing: 0.16em; font-weight: 600; text-transform: uppercase; border: 1px solid; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 1px 2px rgba(0, 0, 0, 0.05); } .ed-pill--positive { background: var(--ed-emerald); color: #fff; border-color: var(--ed-emerald); } .ed-pill--warning { background: var(--ed-oak-deep); color: #fff; border-color: var(--ed-oak-deep); } .ed-pill--critical { background: var(--ed-berry); color: #fff; border-color: var(--ed-berry); } .ed-pill--neutral { background: var(--ed-paper); color: var(--ed-ink-soft); border-color: var(--ed-rule); } /* Soft pill — tinted, less attention-grabbing */ .ed-pill-soft { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-family: var(--ed-mono); font-size: 10px; letter-spacing: 0.10em; font-weight: 600; text-transform: uppercase; border: 1px solid transparent; } .ed-pill-soft--positive { background: var(--ed-emerald-tint); color: var(--ed-emerald); } .ed-pill-soft--warning { background: var(--ed-oak-tint); color: var(--ed-oak-deep); } .ed-pill-soft--critical { background: var(--ed-crimson-tint); color: var(--ed-crimson); } /* ---------------------------------------------------------------------------- BUTTON SYSTEM — pill, motion, button-in-button ---------------------------------------------------------------------------- */ .ed-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ed-grotesk); font-size: 13px; font-weight: 500; letter-spacing: 0.005em; border-radius: 999px; padding: 10px 18px; cursor: pointer; transition: transform var(--ed-base) var(--ed-ease), background var(--ed-base) var(--ed-ease), border-color var(--ed-base) var(--ed-ease); border: 1px solid transparent; } .ed-btn:active { transform: scale(0.985); } .ed-btn--primary { background: var(--ed-emerald); color: #fff; border-color: var(--ed-emerald); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 1px 2px rgba(26, 26, 26, 0.10); } .ed-btn--primary:hover { background: var(--ed-emerald-deep); border-color: var(--ed-emerald-deep); } .ed-btn--secondary { background: var(--ed-surface-pure); color: var(--ed-ink); border-color: var(--ed-rule); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); } .ed-btn--secondary:hover { border-color: var(--ed-emerald); color: var(--ed-emerald); } /* ---------------------------------------------------------------------------- PAPER GRAIN OVERLAY — apply to the body or a fixed wrapper for tactile warmth ---------------------------------------------------------------------------- */ .ed-paper-grain { position: relative; } .ed-paper-grain::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.025; z-index: 1; background-image: url("data:image/svg+xml;utf8,"); background-size: 200px 200px; mix-blend-mode: multiply; } .ed-paper-grain > * { position: relative; z-index: 2; } /* ---------------------------------------------------------------------------- BUTTON SIZE + VARIANT MODIFIERS — extend the .ed-btn system Default (no modifier) = medium primary-emerald button. ---------------------------------------------------------------------------- */ .ed-btn--sm { font-size: 12px; padding: 6px 12px; gap: 6px; } .ed-btn--md { font-size: 13px; padding: 10px 18px; gap: 8px; } /* explicit alias for default */ .ed-btn--lg { font-size: 15px; padding: 12px 22px; gap: 10px; } /* Inline text link inside prose — the "→ go do this" links in section descriptions. Was only styled inside .empty-state-quiet, so the same class used anywhere else (Inventory Performance, Sell-Through, Dead Capital) fell back to the browser's default blue underline. Global now. */ .link-inline { color: var(--ed-emerald); text-decoration: none; border-bottom: 1px solid transparent; font-weight: 500; } .link-inline:hover { border-bottom-color: var(--ed-emerald); } .ed-btn--ghost { background: transparent; color: var(--ed-ink-soft); border-color: transparent; } .ed-btn--ghost:hover { background: var(--ed-rule-soft); color: var(--ed-ink); } .ed-btn--danger { background: var(--ed-crimson); color: #fff; border-color: var(--ed-crimson); } .ed-btn--danger:hover { background: #962E2E; border-color: #962E2E; } .ed-btn:disabled, .ed-btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* Focus ring — visible only via keyboard (focus-visible) */ .ed-btn:focus-visible { outline: 2px solid var(--ed-emerald); outline-offset: 2px; } /* ---------------------------------------------------------------------------- ELEVATION SCALE — three shadow levels for cards/modals .ed-elev-1 = subtle (default cards) .ed-elev-2 = lifted (hovered cards, dropdowns) .ed-elev-3 = floating (modals, popovers) ---------------------------------------------------------------------------- */ .ed-elev-1 { box-shadow: var(--ed-shadow-rest); } .ed-elev-2 { box-shadow: var(--ed-shadow-lift); } .ed-elev-3 { box-shadow: var(--ed-shadow-deep); } /* Standard hover transition for elevated cards */ .ed-hoverable { transition: box-shadow var(--ed-base) var(--ed-ease), transform var(--ed-base) var(--ed-ease); } .ed-hoverable:hover { box-shadow: var(--ed-shadow-lift); transform: translateY(-1px); }