/* ============================================================================ public/css/tokens.css — Design system tokens. THIS FILE IS NOW AN ALIAS LAYER over editorial.css. editorial.css holds the canonical palette + typography + motion tokens (--ed-cream, --ed-ink, --ed-emerald, etc.). This file maps the legacy token names (--text-primary, --surface-base, --action-primary, etc.) to their ed-* equivalents so: 1. Existing code that uses var(--text-primary), var(--surface-base), var(--status-critical), etc. keeps working. 2. Both naming systems produce IDENTICAL pixel output. 3. New code should prefer var(--ed-*) directly (one canonical name per concept). Original tokens.css values (e.g. --text-primary: var(--ed-emerald-deep)) are documented alongside their canonical replacement so the migration intent is clear. ============================================================================ */ :root { /* ---------------------------------------------------------------------- COLOR — aliased to editorial.css's canonical palette. Original values shown in /* legacy: ... */ /*-------------------------------------------------------------------- */ /* Surfaces */ --surface-base: var(--ed-cream); /* legacy: var(--ed-cream) → #FBF8F3 (1px shift, imperceptible) */ --surface-raised: var(--ed-surface-pure); /* legacy: #FFFFFF → #FFFFFF (back to pure white) */ --surface-sunken: var(--ed-paper); /* legacy: #F4EEE5 → #F5F0E6 */ --surface-overlay: rgba(255, 254, 251, 0.92); /* slight transparency over surface-pure */ /* Text — ed-ink is now neutral var(--ed-ink) (FBA); the two mid steps are ours */ --text-primary: var(--ed-ink); /* legacy: var(--ed-emerald-deep) → var(--ed-ink) */ --text-secondary: var(--ed-ink-soft); /* legacy: #5A6B65 → var(--ed-ink-soft) */ --text-tertiary: var(--ed-ink-mute); /* legacy: #8A958F → var(--ed-ink-mute) */ --text-disabled: #C0C8C3; /* unique — disabled state */ --text-on-action: var(--ed-cream); /* Borders & dividers — back to solid hex, matching the FBA app */ --border-subtle: var(--ed-rule-soft); /* legacy: #ECE3D5 → var(--ed-paper) (solid again, FBA --bdrl) */ --border-default: var(--ed-rule); /* legacy: #DCD0BD → var(--ed-rule) (solid again, FBA --bdr) */ --border-strong: #B8AC97; /* unique — focused-state border, kept distinct */ /* Action — ed-emerald is the canonical brand color */ --action-primary: var(--ed-emerald); /* exact match: var(--ed-emerald) */ --action-primary-hover: var(--ed-emerald-deep); /* now var(--ed-emerald-deep) (FBA --deep) */ --action-primary-press: #102521; /* unique — pressed state */ /* Status — MERGED 2026-07-27. These carry their own hex, so they do NOT follow editorial.css automatically. Positive/warning/tints come from the FBA app; info stayed ours (see below). */ --status-positive: var(--ed-emerald); /* was #2A6F4D → FBA uses emerald for good */ --status-warning: var(--ed-oak); /* was #B8862C → FBA --warn var(--ed-oak) */ --status-critical: var(--ed-crimson); /* var(--ed-crimson) — alarm red. Fills use --ed-berry instead; see the split note in editorial.css */ --status-info: #4A6B7A; /* KEPT from zs-retail — FBA --blue #3b82f6 is a Tailwind default */ /* Alert tints lifted directly from the FBA app's alert boxes. */ --status-positive-bg: #F0F8F5; /* was #E8F0EA */ --status-warning-bg: #FDFAF0; /* was #F8F0DC */ --status-critical-bg: #FDF2F2; /* was var(--ed-crimson-tint) */ --status-info-bg: #EFF6FF; /* was #E6ECEF */ /* Brand decorative — now also exposed as --ed-blush in editorial.css */ --brand-pink-ivory: var(--ed-blush); /* var(--ed-blush) — unchanged value */ /* ---------------------------------------------------------------------- TYPOGRAPHY — aliased to editorial.css fonts. Canonical pairing: Display = Cormorant Garamond (var(--ed-serif)) Body = DM Sans (var(--ed-grotesk)) Mono = Geist Mono (var(--ed-mono)) Note: Fraunces is NO LONGER the canonical display face. Cormorant Garamond won out as the brand serif in the editorial overhaul. ---------------------------------------------------------------------- */ --font-display: var(--ed-serif); --font-body: var(--ed-grotesk); --font-mono: var(--ed-mono); /* Type scale — display + metric steps cut for the density pass */ --type-display-xl: 34px; /* was 56px — density pass */ --type-display-lg: 26px; /* was 40px */ --type-display-md: 20px; /* was 28px */ --type-display-sm: 20px; --type-body-lg: 17px; --type-body-md: 15px; --type-body-sm: 13px; --type-body-xs: 11px; --type-metric-xl: 28px; /* was 48px */ --type-metric-lg: 22px; /* was 32px */ --type-metric-md: 22px; --line-display: 1.05; --line-tight: 1.2; --line-body: 1.5; --line-loose: 1.7; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* referenced by settings.css but never defined */ --tracking-display: -0.02em; --tracking-tight: -0.01em; --tracking-normal: 0em; --tracking-wide: 0.02em; --tracking-uppercase: 0.06em; /* ---------------------------------------------------------------------- SPATIAL — 4-point grid; the layout steps below were tightened ---------------------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; /* was referenced 10x but never defined — every rule using it was silently dropped */ --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --sidebar-width: 240px; --topbar-height: 56px; --content-max: 1400px; /* Density pass 2026-07-27 — geometry pulled toward the FBA app, which fits visibly more per screen. This is the design doctrine's own "density over whitespace — operator tool" rule, previously honoured in type sizes but not in spacing. Previous values kept in comments for a quick revert. */ --content-pad-x: var(--space-6); /* was --space-8 (32 → 24px) */ --card-pad: var(--space-4); /* was --space-6 (24 → 16px) */ --section-gap: var(--space-6); /* was --space-12 (48 → 24px) */ /* ---------------------------------------------------------------------- CORNERS — tightened toward the FBA app ---------------------------------------------------------------------- */ /* Corner radii tightened to the FBA app's scale (cards 8px, controls 4px). */ --radius-input: 4px; /* was 6px */ --radius-button: 4px; /* was 8px */ --radius-card: 8px; /* was 12px */ --radius-modal: 12px; /* was 16px */ --radius-pill: 999px; /* ---------------------------------------------------------------------- SHADOWS — aliased to editorial.css's recipes where overlap exists ---------------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(26, 26, 26, 0.04); --shadow-sm: var(--ed-shadow-rest); --shadow-md: 0 4px 8px rgba(26, 26, 26, 0.06), 0 2px 4px rgba(26, 26, 26, 0.04); --shadow-lg: var(--ed-shadow-lift); --shadow-xl: var(--ed-shadow-deep); /* ---------------------------------------------------------------------- MOTION — keep separate easing names; editorial uses one canonical curve for everything, tokens has explicit in/out/in-out variants for code that wants to differentiate. Both are valid. ---------------------------------------------------------------------- */ --ease-out: var(--ed-ease); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-in-out: var(--ed-ease); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-instant: 80ms; --duration-fast: var(--ed-fast); /* 200ms */ --duration-base: var(--ed-base); /* 320ms */ --duration-slow: var(--ed-slow); /* 480ms */ --duration-slower: 640ms; /* ---------------------------------------------------------------------- Z-INDEX — explicit layering (unchanged) ---------------------------------------------------------------------- */ /* Two steps added 2026-07-27. They are not new layers — the app already had popovers at a raw 200 and a mobile drawer at a raw 60, they just had no token, which is how a 9999 and a 10000 crept in above the ceiling. Ordering, lowest to highest: sticky sticky table headers overlay fixed page chrome that content scrolls under (bulk-action bar) popover transient surfaces anchored to a control (class picker, the topbar search dropdown, the sales drilldown panel) drawer the mobile nav drawer and its scrim. ABOVE popover on purpose: at the old raw 60 it sat below the bulk-action bar's 100, so an open drawer got painted over on mobile. modal blocking dialogs toast must clear modals — it reports the outcome of modal actions */ --z-base: 1; --z-sticky: 10; --z-overlay: 100; --z-popover: 200; --z-drawer: 300; --z-modal: 1000; --z-toast: 2000; }