/* HeyCrush design tokens, blog design system v2. GENERATED by wp-rebuild/tools-gen-v2-tokens.py from THEMES in heycrush-blog-design-system/v2-canvas/generators/v2_kit.py. Do not edit by hand. Light is the default. Dark is opt-in through data-theme="dark" on ; the site does not follow prefers-color-scheme (user, 2026-09-27). Gold is for Crush only. */ :root { color-scheme: light; --hc-band: #ffffff; --hc-alt: #f6f3ef; --hc-moment: #12151a; --hc-ann: #efece9; --hc-card: #ffffff; --hc-card-on-band: #f6f3ef; --hc-hair: #e5e2df; --hc-line: #dbd8d6; --hc-strong: #bcbab8; --hc-text: #0a0a0b; --hc-body: #514f4e; --hc-muted: #6a6867; --hc-accent: #c91c42; --hc-brand: #ff4d67; --hc-focus: #7686e6; --hc-btn-bg: #0a0a0b; --hc-btn-fg: #f6f3ef; --hc-field: #ffffff; --hc-field-line: #bcbab8; --hc-chip: #f6f3ef; --hc-chip-line: #dbd8d6; --hc-chip-on-bg: #fef7f7; --hc-chip-on-line: #ff4d67; --hc-chip-on-fg: #c91c42; --hc-m-text: #eef0f4; --hc-m-body: #ced1d8; --hc-m-muted: #a0a5ae; --hc-m-accent: #ff4d67; --hc-m-soft: #ffa9ad; --hc-m-screen: #191c22; --hc-m-screen-line: rgba(255,255,255,0.08); --hc-foot: #12151a; --hc-foot-line: rgba(255,255,255,0.10); --hc-shadow-card: 0 28px 56px -32px rgba(10,10,11,0.28); --hc-prose-text: #0a0a0b; /* Crush gold, never for anything else. */ --hc-gold: #e8b64a; /* Shape */ --hc-r-card: 28px; --hc-r-field: 999px; /* Width system (01-LAYOUT-AND-WIDTHS.md): SHELL is the outer edge with gutters, MEASURE is running text. At 1440 the content box is 1320, as on the boards. */ --hc-shell: 1416px; --hc-content: 1320px; --hc-gutter: clamp(20px, 4vw, 48px); --hc-prose: 744px; --hc-narrow: 760px; --hc-rail: 240px; --hc-rail-gap: 48px; /* Type: Hanken Grotesk throughout; Thai glyphs fall through to Noto Sans Thai, whose files only download when a page has Thai text (Google Fonts unicode-range). */ --hc-font-body: 'Hanken Grotesk', 'Noto Sans Thai', system-ui, -apple-system, sans-serif; --hc-font-thai: 'Hanken Grotesk', 'Noto Sans Thai', system-ui, sans-serif; /* v1 names kept as aliases while pages move to v2 one by one. Remove each once nothing references it (grep the theme). */ --hc-ink: var(--hc-text); --hc-secondary: var(--hc-muted); --hc-mut: var(--hc-muted); --hc-line-strong: var(--hc-strong); --hc-line-soft: var(--hc-hair); --hc-wash: var(--hc-alt); --hc-white: var(--hc-card); --hc-pink: var(--hc-brand); --hc-pink2: #fd788c; --hc-pink-hover: #ee3c5a; --hc-grad: linear-gradient(135deg, #ff4d67, #fd788c); --hc-shadow: 0 8px 24px -12px rgba(10, 10, 11, 0.12); --hc-shadow-brand: 0 10px 24px -8px rgba(255, 77, 103, 0.55); --hc-hairline-on-dark: rgba(255, 255, 255, 0.14); --hc-hairline-on-dark-strong: rgba(255, 255, 255, 0.25); } :root[data-theme="dark"] { color-scheme: dark; --hc-band: #12151a; --hc-alt: #191c22; --hc-moment: #200e0f; --hc-ann: #191c22; --hc-card: #23262d; --hc-card-on-band: #191c22; --hc-hair: #2e3239; --hc-line: #333740; --hc-strong: #636975; --hc-text: #eef0f4; --hc-body: #ced1d8; --hc-muted: #a0a5ae; --hc-accent: #ffa9ad; --hc-brand: #ff4d67; --hc-focus: #8b9cff; --hc-btn-bg: #eef0f4; --hc-btn-fg: #12151a; --hc-field: #282c34; --hc-field-line: #3e424c; --hc-chip: #282c34; --hc-chip-line: #3e424c; --hc-chip-on-bg: #462c36; --hc-chip-on-line: #ab3e51; --hc-chip-on-fg: #ffa9ad; --hc-m-text: #eef0f4; --hc-m-body: #ced1d8; --hc-m-muted: #a0a5ae; --hc-m-accent: #fe6e7c; --hc-m-soft: #ffa9ad; --hc-m-screen: #12151a; --hc-m-screen-line: rgba(255,255,255,0.08); --hc-foot: #0f1115; --hc-foot-line: #2e3239; --hc-shadow-card: 0 28px 56px -32px rgba(0,0,0,0.7); --hc-prose-text: #ced1d8; }