/** * tokens.css — single source of truth for every palette value. * * Approach: theme.json palette slugs reference CSS custom properties * declared here via `light-dark()`. The browser resolves to the right * value based on `color-scheme: light dark` on :root. The plugin's * dark-mode runtime sets data-theme on from a cookie which pins * color-scheme to light/dark for manual override. New patterns reference * semantic slugs (var(--brand) or has-brand-background-color) and Just * Work in both modes. * * Loaded before style.css and before WP's global stylesheet via the * theme's wp_enqueue_scripts hook. * * Hue: indigo at 270° on cool grey neutrals. */ :root { color-scheme: light dark; /* Surface — page background, raised cards, hover fills */ --surface: light-dark(#F8F8FA, #0F0F14); --surface-2: light-dark(#F1F1F4, #17171F); --surface-3: light-dark(#E6E6EC, #1F1F2A); --border: light-dark(#D2D2DC, #28283A); --border-strong: light-dark(#B4B4C2, #373750); /* Ink — body, headings, secondary text, captions */ --ink: light-dark(#0F0F14, #F1F1F4); --ink-muted: light-dark(#5C5C73, #B0B0C2); --ink-faint: light-dark(#878798, #7E7E92); /* Brand — indigo at 270deg, OKLCH with hex fallback */ --brand: light-dark(oklch(0.55 0.20 270), oklch(0.70 0.18 270)); --brand-strong: light-dark(oklch(0.46 0.21 270), oklch(0.78 0.16 270)); --brand-soft: light-dark(oklch(0.94 0.04 270), oklch(0.28 0.08 270)); /* Semantic — accent for non-brand emphasis, status colors */ --accent: light-dark(oklch(0.66 0.13 200), oklch(0.72 0.11 200)); --success: light-dark(oklch(0.62 0.14 150), oklch(0.74 0.13 150)); --warning: light-dark(oklch(0.74 0.13 70), oklch(0.80 0.12 70)); --danger: light-dark(oklch(0.60 0.21 25), oklch(0.70 0.20 25)); /* Layout — fluid root padding scales with viewport for ultra-wide support. wideSize stays at 1280 for content; --ultra-wide is for hero/section accents that breathe past content max. */ --ultra-wide: 1440px; --root-padding: clamp(1rem, 4vw, 4rem); /* Header — alpha-tinted background that backdrop-filter reveals through. light-dark() picks up the right surface tint per mode. */ --header-bg: light-dark(rgb(248 248 250 / 0.72), rgb(15 15 20 / 0.72)); --header-border: light-dark(rgb(210 210 220 / 0.6), rgb(40 40 58 / 0.6)); /* Hero halo — two indigo blobs at low opacity behind the H1. Lightness flips in dark mode so the halo reads on either surface. */ --halo-1: light-dark(oklch(0.85 0.12 270 / 0.4), oklch(0.45 0.18 270 / 0.35)); --halo-2: light-dark(oklch(0.92 0.06 200 / 0.3), oklch(0.40 0.10 200 / 0.3)); /* Section pacing — Linear-grade vertical rhythm, fluid between phone and ultra-wide */ --section-y: clamp(3rem, 8vw, 6rem); /* Bloom + brand-accent gradients — used by section dividers and process top-stripes */ --gradient-bloom: light-dark(radial-gradient(ellipse 60% 100% at 50% 0%, oklch(0.94 0.04 270 / 0.6), transparent 70%), radial-gradient(ellipse 60% 100% at 50% 0%, oklch(0.40 0.10 270 / 0.5), transparent 70%)); --gradient-brand-accent: linear-gradient(90deg, var(--brand) 0%, var(--accent) 100%); /* Lifted card shadow — indigo-tinted. Single-stop because light-dark() can't carry comma-separated multi-shadow values; one tighter primary shadow reads close enough to the spec'd two-stop without the parser conflict. */ --shadow-card-lifted: light-dark(0 12px 32px -8px oklch(0.55 0.20 270 / 0.22), 0 12px 32px -8px oklch(0 0 0 / 0.55)); /* Inverted-card aliases — flip with the surface/ink tokens automatically */ --surface-inverted: var(--ink); --ink-on-inverted: var(--surface); /* Code-card surface */ --code-bg: light-dark(oklch(0.97 0.005 270), oklch(0.18 0.018 270)); --code-border: light-dark(oklch(0.91 0.015 270), oklch(0.25 0.030 270)); /* Stronger focus ring used for primary CTAs */ --ring-focus-strong: light-dark(0 0 0 4px oklch(0.55 0.20 270 / 0.35), 0 0 0 4px oklch(0.70 0.18 270 / 0.45)); } /* Manual-toggle overrides — plugin sets data-theme on from a cookie. Pinning color-scheme on these stanzas makes form controls, scrollbars, and SVG `` queries follow the user choice instead of the OS preference. light-dark() respects color-scheme automatically — no per-token re-declaration needed. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* Universal focus ring — high-contrast, brand-tinted, respects prefers-reduced-motion via the global guard at end of file. */ :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 2px; } /* Scrollbar (Firefox) — keep it consistent with color-scheme */ * { scrollbar-color: var(--ink-faint) var(--surface-2); } /* Selection */ ::selection { background: var(--brand-soft); color: var(--ink); } /* Reduced-motion override — runs late so it overrides any earlier transition declaration. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }