/** * Pinterest First Editorial - Design tokens. * * SINGLE SOURCE OF TRUTH for shared design-system values. Every magic number * used across theme styles must originate from this file, from theme.json, or * from a documented component-specific value (Docs/ARCHITECTURE.md, CSS Rules). * * Locked sources: Docs/DECISIONS.md * Design sources: Docs/DESIGN_SYSTEM.md * * All custom properties use the locked --pfe- prefix (Docs/DECISIONS.md, #1). * * @package Pinterest_First_Editorial */ :root { /* ----------------------------------------------------------------- * Color system (Docs/DESIGN_SYSTEM.md, #10 Color System) * * Qualitative documented defaults resolved to concrete values: * - page background: warm neutral / near-white * - text: high-contrast dark neutral (16.5:1 on background) * - secondary text: muted neutral (6.4:1 on background) * - surface border: subtle neutral * All interactive states must maintain usable contrast. * --------------------------------------------------------------- */ --pfe-color-bg: #faf9f7; --pfe-color-surface: #ffffff; --pfe-color-surface-muted: #f3f0ec; --pfe-color-text: #1c1b1a; --pfe-color-text-secondary: #5f5b57; --pfe-color-border: #e8e4e0; /* ----------------------------------------------------------------- * Accent (Docs/DECISIONS.md, #22 Accent Color) * * --pfe-color-accent is the LOCKED default (#B85C7A). * One configurable accent color per site. Site overrides are injected * later as a single small :root variable override through the * already-enqueued token stylesheet (pfe-tokens handle); every accent * usage in the theme derives from this one variable, so one override * recolors the whole site. Cache-friendly: no request-unique HTML. * * Contrast (checked against primary text/background combinations): * - accent on background: 4.3:1 - fills, borders, focus rings, large UI * - accent-strong as text on background: 5.5:1 - AA text usage * - white on accent-strong: 5.8:1 - AA text on accent fills * - white on accent-hover: 7.2:1 - AA text on hovered accent fills * Small text on accent fills uses --pfe-color-accent-strong. * --------------------------------------------------------------- */ --pfe-color-accent: #b85c7a; --pfe-color-accent-strong: #9e4a66; --pfe-color-accent-hover: #8a3f58; --pfe-color-on-accent: #ffffff; --pfe-color-focus: var(--pfe-color-accent); /* Selection tint follows the configurable accent where supported. */ --pfe-color-selection-bg: rgba(184, 92, 122, 0.18); --pfe-color-selection-bg: color-mix(in srgb, var(--pfe-color-accent) 18%, transparent); /* ----------------------------------------------------------------- * Typography (Docs/DECISIONS.md #21 Typography; DESIGN_SYSTEM #8) * * System UI sans-serif stack. No external font request, no remote * Google Fonts, no local font files in V1. * --------------------------------------------------------------- */ --pfe-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --pfe-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* Type scale. Body sizes stay within the documented 17-19px desktop * target (DESIGN_SYSTEM #8). Fluid heading sizes keep long editorial * titles readable from 360px to 1440px without horizontal scrolling. */ --pfe-font-size-xs: 0.8125rem; /* 13px - labels, compact metadata */ --pfe-font-size-sm: 0.9375rem; /* 15px - metadata, captions, excerpts */ --pfe-font-size-md: 1.0625rem; /* 17px - body / UI text */ --pfe-font-size-lg: 1.1875rem; /* 19px - long-form article reading size */ --pfe-font-size-xl: 1.375rem; /* 22px - emphasized headings */ --pfe-font-size-display: clamp(2rem, 1.35rem + 2.75vw, 3.25rem); --pfe-font-size-h1: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); --pfe-font-size-h2: clamp(1.375rem, 1.2rem + 0.85vw, 1.875rem); --pfe-font-size-h3: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem); --pfe-font-size-h4: 1.125rem; /* 18px */ --pfe-font-size-h5: 1rem; /* 16px */ --pfe-font-size-h6: 0.9375rem; /* 15px */ /* Weights (display: large, compact, bold - DESIGN_SYSTEM #8) */ --pfe-font-weight-regular: 400; --pfe-font-weight-medium: 500; --pfe-font-weight-semibold: 600; --pfe-font-weight-bold: 700; /* Line heights (comfortable reading - DESIGN_SYSTEM #8) */ --pfe-leading-tight: 1.15; /* display / H1 */ --pfe-leading-snug: 1.3; /* H2-H6 */ --pfe-leading-normal: 1.5; /* UI text, metadata */ --pfe-leading-relaxed: 1.7; /* long-form body copy */ /* Letter spacing (display: compact - DESIGN_SYSTEM #8) */ --pfe-tracking-tight: -0.02em; --pfe-tracking-normal: 0; --pfe-tracking-wide: 0.06em; /* labels and eyebrow metadata */ /* Link underline treatment (text links must remain distinguishable * without color alone - DESIGN_SYSTEM #11) */ --pfe-underline-thickness: 1px; --pfe-underline-offset: 0.15em; /* ----------------------------------------------------------------- * Spacing scale (Docs/DESIGN_SYSTEM.md, #5 Spacing Tokens) * Locked values: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80. * --------------------------------------------------------------- */ --pfe-space-1: 4px; --pfe-space-2: 8px; --pfe-space-3: 12px; --pfe-space-4: 16px; --pfe-space-5: 20px; --pfe-space-6: 24px; --pfe-space-7: 32px; --pfe-space-8: 40px; --pfe-space-9: 48px; --pfe-space-10: 64px; --pfe-space-11: 80px; /* ----------------------------------------------------------------- * Layout widths (Docs/DESIGN_SYSTEM.md, #2 and #9) * --------------------------------------------------------------- */ --pfe-content-width: 1280px; /* default content width */ --pfe-reading-measure: 70ch; /* long-form: 60-80 characters per line */ --pfe-gutter: clamp(var(--pfe-space-4), 3vw, var(--pfe-space-7)); /* Responsive outer gutters: 16px small mobile -> 32px large desktop. */ --pfe-sidebar-width: 300px; /* optional archive sidebar column (>=1024px) */ /* ----------------------------------------------------------------- * Breakpoints (Docs/DECISIONS.md #20; DESIGN_SYSTEM #4) * * CSS custom properties cannot be resolved inside @media conditions. * Media queries in later component files must use these exact values: * * base < 480px small mobile (360-479) * --pfe-breakpoint-sm 480px large phone enhancements / standard mobile * --pfe-breakpoint-md 768px tablet * --pfe-breakpoint-lg 1024px small desktop / tablet landscape * --pfe-breakpoint-xl 1280px large desktop * * Design review widths (360, 390, 412, 768, 820, 1024, 1280, 1440) are * QA targets, NOT breakpoints. * --------------------------------------------------------------- */ --pfe-breakpoint-sm: 480px; --pfe-breakpoint-md: 768px; --pfe-breakpoint-lg: 1024px; --pfe-breakpoint-xl: 1280px; /* ----------------------------------------------------------------- * Radius (Docs/DESIGN_SYSTEM.md, #6 Radius) * --------------------------------------------------------------- */ --pfe-radius-sm: 8px; /* small UI */ --pfe-radius-md: 12px; /* standard cards */ --pfe-radius-lg: 16px; /* large feature / media treatments */ /* ----------------------------------------------------------------- * Shadows (Docs/DESIGN_SYSTEM.md, #7 Shadows) * Restrained by rule: prefer borders, contrast and spacing for * hierarchy. No heavy floating-card aesthetic. * --------------------------------------------------------------- */ --pfe-shadow-sm: 0 1px 2px rgba(28, 27, 26, 0.06); --pfe-shadow-md: 0 6px 20px rgba(28, 27, 26, 0.08); /* ----------------------------------------------------------------- * Image ratio frames (Docs/DECISIONS.md, #9 Image Registry) * * Ratios only - no additional image sizes may be invented: * - 3:2 -> pfe_hero, pfe_feature, pfe_compact * - 4:5 -> pfe_card, pfe_thumbnail * - 1:1 -> pfe_square, pfe_avatar * WordPress size registration happens in inc/image-sizes.php. * --------------------------------------------------------------- */ --pfe-ratio-3-2: 3 / 2; --pfe-ratio-4-5: 4 / 5; --pfe-ratio-1-1: 1 / 1; /* ----------------------------------------------------------------- * Motion (Docs/DESIGN_SYSTEM.md, #14 Motion) * Short, restrained transitions only. Transform/opacity-friendly * patterns; never animate layout-heavy properties. * --------------------------------------------------------------- */ --pfe-duration-fast: 150ms; /* hover / focus feedback */ --pfe-duration-base: 250ms; /* menu / search reveal */ --pfe-duration-reduced: 0.01ms; /* effectively disabled (reduced motion) */ --pfe-ease-out: ease-out; --pfe-transition-fast: var(--pfe-duration-fast) var(--pfe-ease-out); --pfe-transition-base: var(--pfe-duration-base) var(--pfe-ease-out); /* ----------------------------------------------------------------- * Z-index layers (order for documented features: sticky header * DECISIONS #19, menu/search overlays DECISIONS #23, skip link * DESIGN_SYSTEM #20) * --------------------------------------------------------------- */ --pfe-z-header: 100; --pfe-z-overlay: 200; --pfe-z-skip-link: 300; /* ----------------------------------------------------------------- * Focus and touch targets * (Docs/DECISIONS.md #23; DESIGN_SYSTEM #11 and #20) * --------------------------------------------------------------- */ --pfe-focus-width: 2px; --pfe-focus-offset: 2px; --pfe-outline: var(--pfe-focus-width) solid var(--pfe-color-focus); --pfe-tap-target: 44px; /* minimum 44x44 CSS px interactive hit area */ }