/* ============================================================ North York Guide — Design System: TOKENS ------------------------------------------------------------ The single source of truth for every value used across the site. Change a token here, every page updates. Naming convention: --nyg--- e.g. --nyg-color-brand --nyg-color-brand-dark --nyg-space-4 --nyg-radius-card Legacy aliases (e.g. --orange, --ink, --paper) are exposed at the bottom for backwards compatibility — new code should use the --nyg-* names. ============================================================ */ :root { /* ────────── COLOR · ink (text & dark surfaces) ────────── */ --nyg-color-ink: #1F1D1B; /* near-black headlines */ --nyg-color-ink-2: #2A2724; /* alt headline */ --nyg-color-ink-3: #3D3A38; /* body text */ --nyg-color-ink-4: #5A5550; /* secondary text */ --nyg-color-ink-5: #6B6560; /* tertiary / labels */ --nyg-color-ink-6: #8A8580; /* muted / fine print */ /* ────────── COLOR · paper (light surfaces) ────────── */ --nyg-color-paper: #FFFCF8; /* page background — cream */ --nyg-color-paper-2: #FDF6EC; /* card-on-paper, sidebar */ --nyg-color-paper-3: #F5EFE6; /* archive / heavy bands */ --nyg-color-tint: #F0E9DE; /* chip background */ --nyg-color-tint-2: #E6DDCF; /* lines, hover bg */ --nyg-color-line: #E8E0D8; /* default border */ --nyg-color-line-2: #F1EAE0; /* divider, dotted line */ --nyg-color-white: #FFFFFF; /* ────────── COLOR · brand (maple / orange) ────────── */ --nyg-color-brand: #C44D2A; /* primary accent */ --nyg-color-brand-dark: #A33D1F; /* hover / active */ --nyg-color-brand-tint: #FFEDDF; /* brand-tinted bg */ --nyg-color-brand-glow: rgba(196, 77, 42, 0.40); /* ────────── COLOR · supporting palette ────────── */ --nyg-color-green: #1B4332; /* footer, nature */ --nyg-color-green-2: #166534; /* "open" status text */ --nyg-color-green-tint: #ECFDF5; /* "open" chip bg */ --nyg-color-green-line: #A7F3D0; --nyg-color-teal: #2E6B5E; /* recreation accent */ --nyg-color-blue: #365F8C; /* services accent */ --nyg-color-plum: #2F2036; /* food accent */ --nyg-color-lilac: #9B7EC4; /* community accent */ --nyg-color-peach: #E2876A; /* highlight */ --nyg-color-gold: #B07514; /* "verify" / mixed status */ --nyg-color-gold-tint: #FBE9C2; --nyg-color-warn: #FEF3C7; /* correction box bg */ --nyg-color-warn-line: #FCD34D; --nyg-color-warn-text: #92400E; /* ────────── TYPOGRAPHY · families ────────── */ --nyg-font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --nyg-font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* ────────── TYPOGRAPHY · scale ────────── Use clamp() for responsive sizes. Each step ~1.2x. */ --nyg-text-xs: 11px; /* eyebrow caps, fine print */ --nyg-text-sm: 12.5px; /* meta, captions */ --nyg-text-base: 14px; /* default body */ --nyg-text-md: 15px; /* lead body */ --nyg-text-lg: 17px; /* dek / lede */ --nyg-text-xl: 19px; /* card title */ --nyg-text-2xl: clamp(22px, 2.8vw, 30px); /* section h2 */ --nyg-text-3xl: clamp(24px, 3.5vw, 32px); /* large h2 */ --nyg-text-4xl: clamp(32px, 5vw, 52px); /* hero h2 */ --nyg-text-5xl: clamp(40px, 7vw, 76px); /* hub h1 */ --nyg-text-6xl: clamp(40px, 7.5vw, 88px); /* editorial h1 */ /* ────────── TYPOGRAPHY · weight & tracking ────────── */ --nyg-weight-regular: 400; --nyg-weight-medium: 500; --nyg-weight-semi: 600; --nyg-weight-bold: 700; --nyg-weight-extra: 800; --nyg-weight-black: 900; --nyg-tracking-tight: -0.02em; /* hero h1 */ --nyg-tracking-snug: -0.01em; /* h2/h3 */ --nyg-tracking-base: 0; --nyg-tracking-wide: 0.04em; --nyg-tracking-eyebrow: 0.14em; /* uppercase eyebrows */ --nyg-leading-tight: 1.05; /* hero h1 */ --nyg-leading-snug: 1.18; /* h2 */ --nyg-leading-base: 1.45; /* dek */ --nyg-leading-relax: 1.62; /* body */ --nyg-leading-loose: 1.7; /* long-form prose */ /* ────────── SPACING · 4px scale ────────── */ --nyg-space-1: 4px; --nyg-space-2: 8px; --nyg-space-3: 12px; --nyg-space-4: 16px; --nyg-space-5: 20px; --nyg-space-6: 24px; --nyg-space-7: 32px; --nyg-space-8: 40px; --nyg-space-9: 56px; --nyg-space-10: 72px; --nyg-space-11: 96px; /* ────────── RADIUS ────────── */ --nyg-radius-sm: 8px; /* small chip / tag */ --nyg-radius-md: 10px; /* button, input */ --nyg-radius-lg: 14px; /* card, panel */ --nyg-radius-xl: 16px; /* hero card, top-pick */ --nyg-radius-2xl: 18px; /* subscribe block */ --nyg-radius-pill: 100px; /* chip, pill, badge */ --nyg-radius-circle: 50%; /* ────────── SHADOW ────────── */ --nyg-shadow-1: 0 1px 2px rgba(60,40,20,.04), 0 2px 8px rgba(60,40,20,.05); --nyg-shadow-2: 0 4px 16px rgba(60,40,20,.08); --nyg-shadow-3: 0 10px 24px rgba(0,0,0,.07); --nyg-shadow-4: 0 10px 30px rgba(0,0,0,.08); --nyg-shadow-brand: 0 4px 16px rgba(196, 77, 42, 0.35); /* ────────── LAYOUT ────────── */ --nyg-max-narrow: 1180px; /* editorial pillar */ --nyg-max-wide: 1280px; /* hub feed */ --nyg-page-pad-x: 24px; /* desktop page padding */ --nyg-page-pad-x-mobile: 16px; /* ────────── MOTION ────────── */ --nyg-transition-fast: .15s; --nyg-transition-base: .2s; --nyg-transition-slow: .3s; --nyg-easing: cubic-bezier(.4, 0, .2, 1); /* ────────── Z-INDEX ────────── */ --nyg-z-sticky: 40; --nyg-z-header: 50; --nyg-z-overlay: 60; --nyg-z-modal: 80; /* ============================================================ LEGACY ALIASES — maps old token names to new ones so existing pages keep working. Don't use these in new code. ============================================================ */ --cream: var(--nyg-color-paper); --paper: var(--nyg-color-paper-3); --paper-2: var(--nyg-color-paper-2); --paper-3: var(--nyg-color-paper-3); --orange: var(--nyg-color-brand); --orangeDark: var(--nyg-color-brand-dark); --text: var(--nyg-color-ink-3); --text2: var(--nyg-color-ink-5); --ink: var(--nyg-color-ink); --ink-2: var(--nyg-color-ink-3); --ink-3: var(--nyg-color-ink-4); --ink-4: var(--nyg-color-ink-5); --ink-5: var(--nyg-color-ink-6); --muted: var(--nyg-color-ink-6); --tint: var(--nyg-color-tint); --tintDark: var(--nyg-color-tint-2); --line: var(--nyg-color-line); --line-2: var(--nyg-color-line-2); --brand: var(--nyg-color-brand); --brand-2: var(--nyg-color-brand-dark); --brand-3: var(--nyg-color-brand-tint); --green: var(--nyg-color-green); --green-2: var(--nyg-color-green-2); --green-3: var(--nyg-color-green-tint); --green-4: var(--nyg-color-green-line); --teal: var(--nyg-color-teal); --blue: var(--nyg-color-blue); --plum: var(--nyg-color-plum); --lilac: var(--nyg-color-lilac); --peach: var(--nyg-color-peach); --gold: var(--nyg-color-gold); --gold-2: var(--nyg-color-gold-tint); --serif: var(--nyg-font-display); --sans: var(--nyg-font-body); --shadow-1: var(--nyg-shadow-1); --shadow-2: var(--nyg-shadow-2); --radius: var(--nyg-radius-lg); --radius-sm: var(--nyg-radius-md); --max: var(--nyg-max-narrow); } /* ────────── Base reset & body ────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--nyg-font-body); font-size: var(--nyg-text-md); line-height: var(--nyg-leading-relax); color: var(--nyg-color-ink-3); background: var(--nyg-color-paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, video { max-width: 100%; display: block; } a { color: var(--nyg-color-brand); text-decoration: none; } button { font-family: inherit; cursor: pointer; } /* All headlines use display font with consistent metrics */ h1, h2, h3, h4, h5, h6, .nyg-display { font-family: var(--nyg-font-display); font-feature-settings: "ss01" on, "ss02" on; letter-spacing: var(--nyg-tracking-snug); }