/* * Wonday — design tokens. * * WordPress generates `--wp--preset--color--*`, `--wp--preset--font-size--*` etc. from theme.json. * This file creates `--wonday-*` aliases so every selector in the theme reads as Wonday-native, * no WP-prefix noise. When Sarah's palette/typography answers land, only the hex/family values * in theme.json change — these aliases (and every selector that uses them) stay untouched. * * Naming convention: --wonday-{category}-{role}[-{variant}] * color-base, color-surface, color-ink, color-ink-muted, color-accent, color-accent-ink * font-display, font-body, font-mono * text-xs … text-5xl * space-3xs … space-3xl (static) + space-section-y / space-section-x / space-hero-y (fluid) * motion-dur-* / motion-ease-* / motion-stagger * radius-* / layout-* / shadow-* */ :root { /* ------------------------------------------------------------------------ * Color — surface hierarchy (darkest → lightest) * ------------------------------------------------------------------------ */ --wonday-color-base: var(--wp--preset--color--base); --wonday-color-surface: var(--wp--preset--color--surface); --wonday-color-border: var(--wp--preset--color--border); /* Ink hierarchy (on top of base/surface) */ --wonday-color-ink: var(--wp--preset--color--ink); --wonday-color-ink-muted: var(--wp--preset--color--muted); /* Accent (action color — placeholder until Sarah picks) */ --wonday-color-accent: var(--wp--preset--color--accent); --wonday-color-accent-ink: var(--wp--preset--color--accent-ink); /* Convenience: semi-transparent base overlays for image-over-text moments */ --wonday-overlay-strong: rgba(10, 10, 10, 0.75); --wonday-overlay-medium: rgba(10, 10, 10, 0.5); --wonday-overlay-soft: rgba(10, 10, 10, 0.25); /* ------------------------------------------------------------------------ * Typography — families * ------------------------------------------------------------------------ */ --wonday-font-display: var(--wp--preset--font-family--display); --wonday-font-body: var(--wp--preset--font-family--body); --wonday-font-mono: var(--wp--preset--font-family--mono); /* Type scale (fluid clamp values live in theme.json; we just alias) */ --wonday-text-xs: var(--wp--preset--font-size--xs); --wonday-text-sm: var(--wp--preset--font-size--sm); --wonday-text-md: var(--wp--preset--font-size--md); --wonday-text-lg: var(--wp--preset--font-size--lg); --wonday-text-xl: var(--wp--preset--font-size--xl); --wonday-text-2xl: var(--wp--preset--font-size--2xl); --wonday-text-3xl: var(--wp--preset--font-size--3xl); --wonday-text-4xl: var(--wp--preset--font-size--4xl); --wonday-text-5xl: var(--wp--preset--font-size--5xl); /* Text rhythm primitives */ --wonday-text-lineheight-tight: 1.02; --wonday-text-lineheight-snug: 1.2; --wonday-text-lineheight-normal: 1.55; --wonday-text-lineheight-loose: 1.75; --wonday-text-tracking-tight: -0.03em; --wonday-text-tracking-normal: -0.005em; --wonday-text-tracking-wide: 0.15em; --wonday-text-tracking-widest: 0.25em; /* ------------------------------------------------------------------------ * Spacing — static scale (small → large) * ------------------------------------------------------------------------ */ --wonday-space-3xs: var(--wp--preset--spacing--3xs); --wonday-space-2xs: var(--wp--preset--spacing--2xs); --wonday-space-xs: var(--wp--preset--spacing--xs); --wonday-space-sm: var(--wp--preset--spacing--sm); --wonday-space-md: var(--wp--preset--spacing--md); --wonday-space-lg: var(--wp--preset--spacing--lg); --wonday-space-xl: var(--wp--preset--spacing--xl); --wonday-space-2xl: var(--wp--preset--spacing--2xl); --wonday-space-3xl: var(--wp--preset--spacing--3xl); /* Spacing — section rhythm (fluid / responsive) */ --wonday-space-gutter: var(--wp--preset--spacing--gutter); --wonday-space-section-y: var(--wp--preset--spacing--section); --wonday-space-hero-y: var(--wp--preset--spacing--hero); /* ------------------------------------------------------------------------ * Layout * ------------------------------------------------------------------------ */ --wonday-layout-content: 720px; --wonday-layout-wide: 1240px; --wonday-layout-full: 100%; /* ------------------------------------------------------------------------ * Motion — timing + easing for choreographed flow/movement * ------------------------------------------------------------------------ */ --wonday-motion-dur-fast: var(--wp--custom--motion--duration--fast, 180ms); --wonday-motion-dur-base: var(--wp--custom--motion--duration--base, 420ms); --wonday-motion-dur-slow: var(--wp--custom--motion--duration--slow, 780ms); --wonday-motion-dur-reveal: var(--wp--custom--motion--duration--reveal, 620ms); --wonday-motion-ease-out: var(--wp--custom--motion--easing--out, cubic-bezier(0.22, 1, 0.36, 1)); --wonday-motion-ease-in-out: var(--wp--custom--motion--easing--in-out, cubic-bezier(0.65, 0, 0.35, 1)); --wonday-motion-ease-bounce: var(--wp--custom--motion--easing--bounce, cubic-bezier(0.34, 1.56, 0.64, 1)); --wonday-motion-stagger: var(--wp--custom--motion--stagger, 80ms); /* ------------------------------------------------------------------------ * Borders + radii * ------------------------------------------------------------------------ */ --wonday-radius-none: var(--wp--custom--radius--none, 0); --wonday-radius-sm: var(--wp--custom--radius--sm, 4px); --wonday-radius-md: var(--wp--custom--radius--md, 10px); --wonday-radius-lg: var(--wp--custom--radius--lg, 20px); --wonday-radius-pill: var(--wp--custom--radius--pill, 9999px); --wonday-border-hairline: 1px solid var(--wonday-color-border); /* ------------------------------------------------------------------------ * Shadow — kept subtle (dark theme; shadows are structural, not dramatic) * ------------------------------------------------------------------------ */ --wonday-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25); --wonday-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.35); --wonday-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.45); /* ------------------------------------------------------------------------ * Z-index scale * ------------------------------------------------------------------------ */ --wonday-z-base: 0; --wonday-z-sticky: 100; --wonday-z-overlay: 500; --wonday-z-modal: 900; --wonday-z-toast: 1000; }