/** * Divine Ledger — Design Tokens * * Colour tokens alias the presets generated by theme.json so the editor colour * picker and the front end can never drift apart. The literal hex values are * fallbacks only; theme.json is the source of truth. Everything else (space, * motion, elevation) lives here because theme.json cannot express it. * * @package DivineLedger */ :root { /* ----------------------------------------------------------------------- * Brand palette * -------------------------------------------------------------------- */ /* Navy — trust, professionalism. Primary surfaces. */ --dl-navy-900: var(--wp--preset--color--navy-900, #050d1c); --dl-navy-800: var(--wp--preset--color--navy-800, #0a1730); --dl-navy-700: var(--wp--preset--color--navy-700, #122544); --dl-navy-600: var(--wp--preset--color--navy-600, #1c3760); --dl-navy-500: var(--wp--preset--color--navy-500, #2a4e85); /* Gold — excellence, premium. Accents and primary calls to action. */ --dl-gold-300: var(--wp--preset--color--gold-300, #f0e2bc); --dl-gold-400: var(--wp--preset--color--gold-400, #dec894); --dl-gold-500: var(--wp--preset--color--gold-500, #c6a667); --dl-gold-600: var(--wp--preset--color--gold-600, #a5854a); --dl-gold-700: var(--wp--preset--color--gold-700, #7e6432); /* Green — the leaf in the logo. Reserved for subtle interaction states. */ --dl-green-400: var(--wp--preset--color--green-400, #4e9e77); --dl-green-500: var(--wp--preset--color--green-500, #2f7d57); --dl-green-600: var(--wp--preset--color--green-600, #1f5c3e); /* Neutrals — clean, modern content areas. */ --dl-white: var(--wp--preset--color--white, #fff); --dl-cream: var(--wp--preset--color--cream, #faf8f4); --dl-sand: var(--wp--preset--color--sand, #efeae0); --dl-ink: var(--wp--preset--color--ink, #141a24); --dl-ink-muted: var(--wp--preset--color--ink-muted, #4a5568); /* Semantic aliases — prefer these in component CSS. */ --dl-surface: var(--dl-white); --dl-surface-alt: var(--dl-cream); --dl-surface-inverse: var(--dl-navy-800); --dl-text: var(--dl-ink); --dl-text-muted: var(--dl-ink-muted); --dl-text-inverse: var(--dl-white); --dl-text-inverse-muted: rgb(255 255 255 / 72%); --dl-accent: var(--dl-gold-500); --dl-accent-hover: var(--dl-gold-400); --dl-accent-pressed: var(--dl-gold-600); --dl-accent-contrast: var(--dl-navy-900); --dl-hairline: rgb(20 26 36 / 12%); --dl-hairline-inverse: rgb(255 255 255 / 18%); /* gold-500 at 40%. Spelled out rather than derived because the rest of the file keeps its alpha variants literal too. */ --dl-hairline-gold: rgb(198 166 103 / 40%); /* Navy scrim used over hero / parallax photography so gold + white pop. */ --dl-scrim-navy: linear-gradient(180deg, rgb(5 13 28 / 88%) 0%, rgb(10 23 48 / 78%) 45%, rgb(18 37 68 / 84%) 100%); /* ----------------------------------------------------------------------- * Typography * -------------------------------------------------------------------- */ --dl-font-serif: var(--wp--preset--font-family--serif, "Playfair Display", "Iowan Old Style", georgia, serif); --dl-font-sans: var(--wp--preset--font-family--sans, jost, "Century Gothic", "Helvetica Neue", helvetica, arial, sans-serif); /* Fluid scale. Min value holds at 360px, max lands at 1600px. */ --dl-text-xs: 0.8125rem; --dl-text-sm: 0.9375rem; --dl-text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); --dl-text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); --dl-text-xl: clamp(1.375rem, 1.24rem + 0.6vw, 1.625rem); --dl-text-2xl: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem); --dl-text-3xl: clamp(2.25rem, 1.8rem + 2vw, 3.25rem); --dl-text-4xl: clamp(2.75rem, 2rem + 3.4vw, 4.5rem); --dl-text-5xl: clamp(3rem, 2.1rem + 4.6vw, 5.75rem); --dl-leading-tight: 1.06; --dl-leading-snug: 1.22; --dl-leading-normal: 1.5; --dl-leading-relaxed: 1.72; /* Serif needs negative tracking at display sizes; sans needs positive tracking for the small-caps eyebrow labels. */ --dl-tracking-display: -0.022em; --dl-tracking-normal: 0; --dl-tracking-wide: 0.08em; --dl-tracking-eyebrow: 0.22em; /* ----------------------------------------------------------------------- * Space — deliberately generous to carry the negative-space brief. * -------------------------------------------------------------------- */ --dl-space-3xs: 0.25rem; --dl-space-2xs: 0.5rem; --dl-space-xs: 0.75rem; --dl-space-sm: 1rem; --dl-space-md: 1.5rem; --dl-space-lg: 2rem; --dl-space-xl: 3rem; --dl-space-2xl: 4rem; --dl-space-3xl: 6rem; --dl-space-4xl: 9rem; /* Vertical rhythm between full-bleed sections. Trimmed ~15% from the original clamp() ceilings/floors at the client's request for a moderately tighter homepage without losing the section-to-section breathing room the negative-space brief calls for. */ --dl-section-y: clamp(4.25rem, 9.5vh + 2.5rem, 9rem); --dl-section-y-tight: clamp(3rem, 6vh + 1.75rem, 5.5rem); --dl-gutter: clamp(1.25rem, 5vw, 4rem); /* Measure — caps line length for readability. */ --dl-measure: 68ch; --dl-measure-narrow: 46ch; /* ----------------------------------------------------------------------- * Elevation, radii, motion * -------------------------------------------------------------------- */ --dl-radius-sm: 2px; --dl-radius-md: 4px; /* The softened corner the client signed off on, shared by buttons, cards and media frames. It lands between md and lg, so it earns a name of its own rather than renumbering a scale other components already point at. */ --dl-radius-soft: 6px; --dl-radius-lg: 8px; --dl-radius-pill: 999px; --dl-shadow-sm: 0 1px 2px rgb(5 13 28 / 6%), 0 2px 8px rgb(5 13 28 / 4%); --dl-shadow-md: 0 4px 12px rgb(5 13 28 / 8%), 0 12px 32px rgb(5 13 28 / 6%); --dl-shadow-lg: 0 12px 28px rgb(5 13 28 / 10%), 0 32px 64px rgb(5 13 28 / 10%); --dl-shadow-gold: 0 10px 30px rgb(165 133 74 / 28%); --dl-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dl-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dl-duration-fast: 180ms; --dl-duration-base: 320ms; --dl-duration-slow: 640ms; /* Reveal distance shared by CSS and GSAP so the two never disagree. */ --dl-reveal-shift: 2.5rem; /* Distance a card travels on hover. A token rather than a literal so the reduced-motion block below can switch the lift off in one place. */ --dl-lift: -4px; --dl-z-behind: 0; --dl-z-base: 1; --dl-z-content: 2; --dl-z-overlay: 10; --dl-z-header: 100; } /* Honour the OS-level motion preference by collapsing transitions. GSAP reads the same media query via gsap.matchMedia(). */ @media ( prefers-reduced-motion: reduce ) { :root { --dl-duration-fast: 1ms; --dl-duration-base: 1ms; --dl-duration-slow: 1ms; --dl-reveal-shift: 0; --dl-lift: 0; } }