/* =========================================================================
Placy Design System — web tokens for placy.com
Adapted from the Fable design system's colors_and_type.css + editorial.css.
Import this before any page-specific CSS.
========================================================================= */
/* Inter is loaded via + in each page's
(not @import here) to avoid a serial render-blocking chain. */
:root {
/* -------- Core color tokens (brand guide) -------- */
--placy-black: #1A1A1A; /* primary ink */
--placy-ginger: #EFA943; /* primary accent */
--placy-blue: #15B8FF; /* secondary accent */
--placy-green-warm: #8ECA37; /* tertiary accent */
--placy-red: #DA3A3A; /* alerts / negative */
--placy-cream: #F9FBFC; /* default page bg */
--placy-warm-grey: #E7ECEE; /* card fill, dividers */
--placy-light-grey: #A4AEB5; /* decorative secondary text (fails AA on cream — dark surfaces + oversized devices only) */
--placy-grey-strong: #66727A; /* accessible secondary text on light surfaces (4.76:1 on cream, 4.94:1 on white) */
--placy-mid-grey: #8A8688; /* borders, muted lines */
--placy-white: #FFFFFF; /* cards on dark bg */
--placy-dark-bg: #0D0D0D; /* dark-variant bg */
/* -------- Semantic -------- */
--bg: var(--placy-cream);
--bg-card: var(--placy-warm-grey);
--bg-inverse: var(--placy-dark-bg);
--fg1: var(--placy-black);
--fg2: var(--placy-light-grey);
--fg2-strong: var(--placy-grey-strong);
--fg-muted: var(--placy-mid-grey);
--fg-inverse: var(--placy-white);
--accent: var(--placy-ginger);
--accent-2: var(--placy-blue);
--border: var(--placy-warm-grey);
--border-strong: var(--placy-mid-grey);
/* -------- Typography -------- */
--font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
--font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
--fs-display: 56px;
--fs-h1: 40px;
--fs-h2: 32px;
--fs-h3: 24px;
--fs-subhead: 20px;
--fs-stat: 44px;
--fs-body-lg: 18px;
--fs-body: 16px;
--fs-body-sm: 14px;
--fs-footnote: 11px;
--fs-label: 12px;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-heavy: 800;
--lh-tight: 1.15;
--lh-snug: 1.25;
--lh-body: 1.5;
--tracking-tight: -0.02em;
--tracking-wide: 0.04em;
/* -------- Spacing (4px 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;
/* -------- Radii -------- */
--r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px;
/* -------- Elevation (restrained: prefer borders) -------- */
--shadow-sm: 0 1px 2px rgba(26,26,26,0.06);
--shadow-md: 0 1px 2px rgba(26,26,26,0.06), 0 2px 8px rgba(26,26,26,0.04);
--shadow-lg: 0 2px 4px rgba(26,26,26,0.06), 0 12px 28px rgba(26,26,26,0.08);
/* -------- Motion: short, functional, no bounce -------- */
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
--dur-fast: 150ms;
--dur: 200ms;
--dur-slow: 300ms;
}
/* =========================================================================
Base
========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
margin: 0;
background: var(--bg);
color: var(--fg1);
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, .h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: inherit; margin: 0; }
.display { font-size: var(--fs-display); font-weight: var(--fw-heavy); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
h2, .h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: inherit; margin: 0; }
h3, .h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: inherit; margin: 0; }
.subhead { font-size: var(--fs-subhead); font-weight: var(--fw-regular); line-height: var(--lh-snug); }
.stat { font-size: var(--fs-stat); font-weight: var(--fw-bold); line-height: 1; letter-spacing: var(--tracking-tight); color: var(--fg1); font-variant-numeric: tabular-nums; }
p, .body { font-size: var(--fs-body); line-height: var(--lh-body); margin: 0; }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body); }
.muted { color: var(--fg2); }
.footnote { font-size: var(--fs-footnote); color: var(--fg2); line-height: var(--lh-body); }
.label { font-size: var(--fs-label); font-weight: var(--fw-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg2); }
a { color: inherit; }
/* =========================================================================
Brand primitives
========================================================================= */
.placy-card {
background: var(--placy-white);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: var(--s-5);
}
.placy-card--tinted { background: var(--bg-card); border: none; }
.placy-btn {
font-family: var(--font-sans);
font-size: var(--fs-body-sm);
font-weight: var(--fw-semibold);
height: 44px;
padding: 0 22px;
border-radius: var(--r-pill);
border: 1px solid transparent;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
white-space: nowrap;
transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.placy-btn--primary { background: var(--placy-black); color: var(--placy-white); }
.placy-btn--primary:hover { background: #000; }
.placy-btn--primary:active { transform: scale(0.98); }
.placy-btn--accent { background: var(--placy-ginger); color: var(--placy-black); }
.placy-btn--accent:hover { background: #E49A2F; }
.placy-btn--accent:active { transform: scale(0.98); }
.placy-btn--ghost { background: transparent; color: var(--placy-black); border-color: var(--border-strong); }
.placy-btn--ghost:hover { background: var(--bg-card); }
.placy-btn--ghost-inverse { background: transparent; color: var(--placy-white); border-color: rgba(255,255,255,0.24); }
.placy-btn--ghost-inverse:hover { background: rgba(255,255,255,0.08); }
.placy-chip {
display: inline-flex; align-items: center; gap: 6px;
height: 24px; padding: 0 10px;
border-radius: var(--r-pill);
background: var(--bg-card);
color: var(--fg1);
font-size: var(--fs-label);
font-weight: var(--fw-medium);
}
/* =========================================================================
Editorial devices (from editorial.css)
========================================================================= */
.placy-kicker {
font-size: var(--fs-label);
font-weight: var(--fw-semibold);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fg2-strong);
}
.placy-rule { border: none; border-top: 1px solid var(--border); margin: 0; }
.placy-rule--strong { border-top-color: var(--border-strong); }
.placy-coords {
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: 0.04em;
color: var(--fg2);
}
.placy-index {
font-size: 120px;
font-weight: var(--fw-heavy);
line-height: 1;
letter-spacing: var(--tracking-tight);
color: var(--placy-warm-grey);
user-select: none;
}
/* Brand glow — dark surfaces ONLY, one per surface, static */
.placy-glow {
position: absolute;
width: var(--glow-size, 900px);
height: var(--glow-size, 900px);
border-radius: 50%;
background: radial-gradient(circle, var(--glow-tint, rgba(239,169,67,0.26)), transparent 65%);
filter: blur(var(--glow-blur, 10px));
opacity: var(--glow-opacity, 1);
pointer-events: none;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
html { scroll-behavior: auto; }
}