Omair Saleh
056c47581f
Ships the second dashboard surface — a Pattern Library + Preview Theatre — that presents the 4-section PDP pilot batch back to Umar, compliance, and the board in an editorial format. Adds the full data layer that drives it: 5 source-backed per-SKU drafts at QA 100/100, 15 competitor PDP semantic extracts, PubMed evidence packs, EFSA claims library extension, JV brand voice guide, hand-curated product FAQs, and the Matrixify-ready CSV exports for Lewis. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
91 lines
2.5 KiB
CSS
91 lines
2.5 KiB
CSS
/* Editorial tokens — warm apothecary editorial.
|
|
Reference: Wild Nutrition / Aesop / Ancient & Brave.
|
|
NOT a generic dashboard palette. Cream-parchment ground, deep ink,
|
|
muted sage for verified, ochre for caution. JV purple kept for tiny
|
|
brand-accent moments only. */
|
|
|
|
:root {
|
|
/* Canvas */
|
|
--bg-paper: #F4EFE6;
|
|
--bg-cream-alt: #EDE5D5;
|
|
--bg-ink: #1B1813;
|
|
--bg-sage-soft: #DDE4D3;
|
|
--bg-ochre-soft: #F1E3D0;
|
|
|
|
/* Ink */
|
|
--ink: #1B1813;
|
|
--ink-soft: #4A413B;
|
|
--ink-muted: #8B7F73;
|
|
--ink-on-dark: #F4EFE6;
|
|
|
|
/* Rules + lines */
|
|
--rule: rgba(27, 24, 19, 0.15);
|
|
--rule-strong: rgba(27, 24, 19, 0.4);
|
|
--rule-faint: rgba(27, 24, 19, 0.08);
|
|
|
|
/* Accents (use sparingly — one per screen) */
|
|
--accent-sage: #5C6B4A; /* approved / verified */
|
|
--accent-ochre: #B8732C; /* hold / needs review */
|
|
--accent-rust: #8E3B25; /* rejected / blocked */
|
|
--accent-jv: #4F3A8F; /* JV brand — ONE element max per screen */
|
|
|
|
/* Typography */
|
|
--font-display: 'Fraunces', 'Tiempos Headline', Georgia, 'New York', serif;
|
|
--font-sans: 'General Sans', 'Switzer', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', system-ui, sans-serif;
|
|
--font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
|
|
|
|
/* Type scale — editorial proportions */
|
|
--t-xs: 11px;
|
|
--t-sm: 13px;
|
|
--t-base: 15px;
|
|
--t-lg: 17px;
|
|
--t-xl: 22px;
|
|
--t-2xl: 28px;
|
|
--t-3xl: 38px;
|
|
--t-4xl: 52px;
|
|
--t-5xl: 72px;
|
|
--t-6xl: 104px;
|
|
|
|
/* Line height */
|
|
--lh-tight: 1.06;
|
|
--lh-snug: 1.15;
|
|
--lh-normal: 1.45;
|
|
--lh-relaxed: 1.65;
|
|
|
|
/* Spacing — editorial rhythm (8-px base) */
|
|
--s-1: 4px;
|
|
--s-2: 8px;
|
|
--s-3: 12px;
|
|
--s-4: 16px;
|
|
--s-5: 24px;
|
|
--s-6: 32px;
|
|
--s-7: 48px;
|
|
--s-8: 64px;
|
|
--s-9: 96px;
|
|
--s-10: 128px;
|
|
|
|
/* Page widths */
|
|
--col-narrow: 560px;
|
|
--col-mid: 780px;
|
|
--col-wide: 1100px;
|
|
--col-full: 1400px;
|
|
|
|
/* Radii — restrained */
|
|
--r-sm: 2px;
|
|
--r-md: 4px;
|
|
--r-lg: 8px;
|
|
|
|
/* Motion */
|
|
--ease: cubic-bezier(0.22, 0.65, 0.32, 1);
|
|
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
|
--dur-fast: 180ms;
|
|
--dur: 260ms;
|
|
--dur-slow: 420ms;
|
|
|
|
/* Shadows — minimal, soft */
|
|
--shadow-soft: 0 1px 2px rgba(27, 24, 19, 0.04),
|
|
0 12px 32px -8px rgba(27, 24, 19, 0.08);
|
|
--shadow-lift: 0 2px 4px rgba(27, 24, 19, 0.06),
|
|
0 24px 48px -12px rgba(27, 24, 19, 0.12);
|
|
}
|