/* J.W. Pepper — color tokens Source: https://www.jwpepper.com/piano Extracted from live CSS custom properties (--jwp-*) + computed UI usage. BASE — нейтралі, фони, текст, бордери (структура UI) ACCENT — бренд, CTA, badges, статус, посилання ------------------------------------------------------------ TRIAL: Golden Gate fog (2026-07-28) Palette: #eaedf0 | #e4e6e5 | #95a8ad | #465461 | #9b1f14 Revert: cp static/css/colors.pre-fog-trial.css static/css/colors.css + restore ActiveTheme FIELD_DEFAULTS / DB from that file ------------------------------------------------------------ */ :root { /* ========================================================= BASE — Neutral scale (cool fog greys) ========================================================= */ --jwp-color-neutral-0: #ffffff; --jwp-color-neutral-1: #eaedf0; --jwp-color-neutral-2: #d5dce0; --jwp-color-neutral-3: #95a8ad; --jwp-color-neutral-4: #465461; --jwp-color-neutral-5: #2a333c; --jwp-color-white: #ffffff; --jwp-color-white-10-percent: rgba(255, 255, 255, 0.1); --jwp-color-body-bkg: #eaedf0; --jwp-color-background-grey: #e4e6e5; --jwp-color-light-grey: #eaedf0; --jwp-color-table-grey: #cfd6da; --jwp-color-medium-grey: #95a8ad; --jwp-color-grey: #d5dce0; --jwp-color-dim-grey: #6a7a84; --jwp-color-dark-grey: #465461; --jwp-color-neutral-grey: #7a8a92; --jwp-color-black: #2a333c; --jwp-color-black-soft: #3a4652; --jwp-color-black-accent: #465461; --jwp-color-badge-black: #2a333c; --jwp-color-border: #cfd6da; --jwp-color-border-light: rgba(149, 168, 173, 0.35); --jwp-color-border-blue-grey: #95a8ad; /* Body / headings */ --jwp-color-text-body: #2a333c; /* ========================================================= BASE — Text hierarchy ========================================================= */ --jwp-text-color-0: #2a333c; --jwp-text-color-1: #465461; --jwp-text-color-2: #6a7a84; --jwp-text-color-primary: #2a333c; --jwp-text-color-secondary: #465461; --jwp-text-color-tertiary: #6a7a84; /* ========================================================= ACCENT — Bridge rust / International Orange (CTA) ========================================================= */ --jwp-color-maroon: #9b1f14; --jwp-color-maroon-accent: #c0392b; --jwp-color-maroon-dark: #79190f; --jwp-color-maroon-faded: #a87872; --jwp-color-crimson: #b33a28; /* ========================================================= ACCENT — Soft mist highlights (cart badge) ========================================================= */ --jwp-color-gold: #e8c4b8; --jwp-color-imprinting-gold: #d4a090; --jwp-color-yellow: #d4785c; --jwp-color-brown: #9b1f14; --jwp-color-tan: #f0f3f5; /* ========================================================= ACCENT — Fog slate / links / focus ========================================================= */ --jwp-color-blue: #466d7a; --jwp-color-blurple: #6a8a96; --jwp-color-light-azure: #5a7a8a; --jwp-color-badge-blue: #465461; --jwp-color-focus-ring: #95a8ad; --jwp-text-link-color: #466d7a; --jwp-text-link-button-blue: #465461; --jwp-color-myscore-blue: #465461; --jwp-color-myscore-blue-grey: #6a7a84; --jwp-color-navy: #465461; /* ========================================================= ACCENT — Red / Error / Badges ========================================================= */ --jwp-color-error-red: #c0392b; --jwp-color-badge-red: #9b1f14; --jwp-color-badge-red-light: #f5e8e6; --jwp-color-badge-red-secondary: #c0392b; --jwp-color-badge-red-tertiary: #9b1f14; /* ========================================================= ACCENT — Green / Teal (muted to fog family) ========================================================= */ --jwp-color-green: #3d6b5c; --jwp-color-green-accent: #4a8070; --jwp-color-forest-green: #3d6b5c; --jwp-color-teal: #d5e4e0; --jwp-color-badge-turquoise-dark: #465461; --jwp-color-badge-turquoise-light: #5a7a8a; /* ========================================================= ACCENT — Purple / Plum / Orange ========================================================= */ --jwp-color-purple: #5a5a72; --jwp-color-plum: #5a4652; --jwp-color-myscore-orange: #d4785c; /* ========================================================= ROLE MAP — semantic aliases (base vs accent) ========================================================= */ /* BASE roles */ --color-bg: var(--jwp-color-body-bkg); --color-bg-muted: var(--jwp-color-light-grey); --color-bg-grey: var(--jwp-color-background-grey); --color-bg-surface: var(--jwp-color-neutral-0); --color-bg-sidebar: var(--jwp-color-neutral-1); --color-surface: var(--jwp-color-white); --color-border: var(--jwp-color-border); --color-border-subtle: var(--jwp-color-border-light); --color-text: var(--jwp-color-black); --color-text-body: var(--jwp-color-text-body); --color-text-muted: var(--jwp-color-dim-grey); --color-text-secondary: var(--jwp-text-color-secondary); --color-text-tertiary: var(--jwp-text-color-tertiary); --color-header-bg: var(--jwp-color-navy); --color-header-utility: var(--jwp-color-navy); --color-header-main: var(--jwp-color-navy); --color-header-fg: var(--jwp-color-white); --color-footer-bg: var(--jwp-color-navy); --color-footer-bg-mid: var(--jwp-color-maroon-dark); --color-footer-bg-end: var(--jwp-color-maroon); --color-footer-gradient: linear-gradient( 125deg, var(--color-footer-bg) 0%, var(--color-footer-bg-mid) 48%, var(--color-footer-bg-end) 100% ); --color-footer-fg: var(--jwp-color-white); /* ACCENT roles */ --color-brand: var(--jwp-color-maroon); --color-brand-hover: var(--jwp-color-maroon-accent); --color-brand-dark: var(--jwp-color-maroon-dark); --color-brand-soft: var(--jwp-color-crimson); --color-accent-gold: var(--jwp-color-gold); --color-accent-yellow: var(--jwp-color-yellow); --color-link: var(--jwp-color-blue); --color-link-alt: var(--jwp-text-link-color); --color-link-button: var(--jwp-text-link-button-blue); --color-badge-new: var(--jwp-color-light-azure); --color-badge-cart: var(--jwp-color-gold); --color-badge-alert: var(--jwp-color-badge-red); --color-success: var(--jwp-color-green); --color-success-hover: var(--jwp-color-green-accent); --color-error: var(--jwp-color-error-red); --color-focus: var(--jwp-color-focus-ring); --color-cta: var(--jwp-color-maroon); --color-cta-hover: var(--jwp-color-maroon-accent); /* Buttons — окремі токени (ActiveTheme override) */ --color-btn-cta: var(--color-cta); --color-btn-cta-hover: var(--color-cta-hover); --color-btn-search: var(--color-accent-yellow); --color-btn-search-hover: var(--color-accent-gold); --color-btn-newsletter: var(--color-brand); --color-btn-newsletter-hover: var(--color-brand-hover); --color-btn-ghost: var(--color-text); --color-btn-ghost-hover-bg: var(--color-bg-muted); /* Badge tones on product cards */ --color-badge-yellow: var(--jwp-color-yellow); --color-badge-maroon: var(--jwp-color-maroon); --color-badge-blue: var(--jwp-color-blue); --color-badge-gold: var(--jwp-color-gold); /* Typography stacks */ --font-serif: Georgia, "Times New Roman", "Palatino Linotype", serif; --font-sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif; /* Dashboard / User Studio */ --color-dashboard-bg: var(--jwp-color-neutral-1); --color-card-bg: var(--jwp-color-neutral-0); --color-text-main: var(--jwp-color-text-body); /* Breadcrumbs */ --breadcrumb-link-color: var(--jwp-color-navy); --breadcrumb-hover-color: var(--jwp-color-maroon); --breadcrumb-active-color: var(--jwp-color-dim-grey); --breadcrumb-separator-color: var(--jwp-color-medium-grey); }