/** * Chelure Enterprise — Design Tokens * ---------------------------------------------------------------------------- * SINGLE SOURCE OF TRUTH. Every colour, size, radius and shadow in this theme * must resolve to a variable declared in this file. * * Values extracted directly from the Claude Design handoff bundle * (design_handoff_chelure_website/*.dc.html) — not re-typed by eye. * * RULE: if a raw hex/rgba value appears anywhere else in this theme's CSS, * that is a bug. Add it here first, then reference it. * * @package Chelure_Enterprise */ :root { /* --------------------------------------------------------------------- * BRAND — identical in both themes * ------------------------------------------------------------------ */ --ce-violet: #7b2ff7; --ce-magenta: #ec1e9c; --ce-accent: #ec1e9c; /* eyebrow labels, active states */ --ce-gradient: linear-gradient(135deg, #7b2ff7, #ec1e9c); --ce-gradient-90: linear-gradient(90deg, #7b2ff7, #ec1e9c); /* --------------------------------------------------------------------- * TYPOGRAPHY * ------------------------------------------------------------------ */ --ce-font-heading: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif; --ce-font-body: 'Inter', 'Segoe UI', system-ui, sans-serif; /* Type scale — observed usage counts from the mockups noted in comments */ --ce-fs-display: 52px; /* stat counters (design: 52px) */ --ce-fs-h1: 68px; /* hero headline (design: 68px) */ --ce-fs-h1-sm: 44px; /* inner-page hero */ --ce-fs-h2: 44px; /* section headings (design: 44px) */ --ce-fs-h3: 26px; --ce-fs-h4: 22px; /* card titles — very common (23x) */ --ce-fs-lead: 17px; /* intro paragraphs */ --ce-fs-body: 15px; --ce-fs-sm: 14px; /* most common size overall (129x) */ --ce-fs-xs: 13px; /* eyebrows, tags, footer links */ --ce-ls-h1: -1.5px; --ce-ls-h2: -1px; --ce-ls-eyebrow: 2px; --ce-lh-tight: 1.06; --ce-lh-heading: 1.25; --ce-lh-body: 1.7; --ce-lh-loose: 1.8; --ce-fw-regular: 400; --ce-fw-medium: 500; --ce-fw-semibold: 600; --ce-fw-bold: 700; /* --------------------------------------------------------------------- * RADII * ------------------------------------------------------------------ */ --ce-radius-pill: 100px; /* buttons, filter pills, tags */ --ce-radius-xl: 32px; /* large glass cards */ --ce-radius-lg: 24px; --ce-radius-md: 20px; /* standard card */ --ce-radius-sm: 16px; --ce-radius-tile: 14px; /* gradient icon tiles */ --ce-radius-xs: 12px; /* --------------------------------------------------------------------- * LAYOUT * ------------------------------------------------------------------ */ --ce-container: 1280px; --ce-container-narrow: 900px; --ce-prose: 820px; /* legal pages */ --ce-measure: 680px; /* centred section intros */ --ce-nav-h: 84px; --ce-nav-pad-y: 14px; --ce-nav-pad-x: 60px; --ce-nav-blur: 16px; --ce-logo-nav: 56px; --ce-logo-footer: 48px; --ce-section-y: 130px; --ce-section-y-sm: 90px; /* --------------------------------------------------------------------- * SHADOWS & MOTION * ------------------------------------------------------------------ */ --ce-shadow-cta: 0 12px 30px rgba(236, 30, 156, .4); --ce-shadow-glow: 0 0 40px rgba(236, 30, 156, .35); --ce-shadow-glow-alt: 0 0 70px rgba(123, 47, 247, .55); --ce-ease: cubic-bezier(.22, 1, .36, 1); --ce-dur-fast: .2s; --ce-dur: .35s; --ce-dur-slow: .45s; --ce-reveal-y: 30px; /* scroll-reveal travel distance */ } /* ============================================================================= * LIGHT THEME — the default. Applied when [data-theme] is absent or "light". * ========================================================================== */ :root, [data-theme="light"] { --ce-bg: #f5f1fa; --ce-text: #2c1a45; --ce-heading: #1a0b2e; --ce-muted: #6a5589; --ce-muted-soft: #7a6699; --ce-surface: rgba(40, 20, 70, .045); --ce-surface-2: rgba(40, 20, 70, .06); --ce-surface-3: rgba(40, 20, 70, .05); --ce-surface-hover: rgba(40, 20, 70, .08); --ce-border: rgba(40, 20, 70, .1); --ce-border-2: rgba(40, 20, 70, .12); --ce-border-3: rgba(40, 20, 70, .16); --ce-line: rgba(40, 20, 70, .12); --ce-navbg: rgba(245, 241, 250, .85); --ce-grid-line: rgba(40, 20, 70, .05); --ce-shadow-card: 0 8px 28px rgba(40, 20, 70, .08); } /* ============================================================================= * DARK THEME * ========================================================================== */ [data-theme="dark"] { --ce-bg: #0a0612; --ce-text: #f3eefb; --ce-heading: #ffffff; --ce-muted: #b8a9d4; --ce-muted-soft: #8f7bad; --ce-surface: rgba(255, 255, 255, .04); --ce-surface-2: rgba(255, 255, 255, .05); --ce-surface-3: rgba(255, 255, 255, .06); --ce-surface-hover: rgba(255, 255, 255, .07); --ce-border: rgba(255, 255, 255, .09); --ce-border-2: rgba(255, 255, 255, .1); --ce-border-3: rgba(255, 255, 255, .14); --ce-line: rgba(255, 255, 255, .08); --ce-navbg: rgba(10, 6, 18, .85); --ce-grid-line: rgba(255, 255, 255, .035); --ce-shadow-card: 0 8px 28px rgba(0, 0, 0, .4); } /* ============================================================================= * RESPONSIVE TYPE — the mockups are desktop-only; these are the step-downs. * ========================================================================== */ @media (max-width: 1024px) { :root { --ce-fs-display: 52px; --ce-fs-h1: 44px; --ce-fs-h1-sm: 36px; --ce-fs-h2: 34px; --ce-nav-pad-x: 32px; --ce-section-y: 90px; } } @media (max-width: 680px) { :root { --ce-fs-display: 42px; --ce-fs-h1: 34px; --ce-fs-h1-sm: 30px; --ce-fs-h2: 28px; --ce-fs-h3: 22px; --ce-fs-h4: 19px; --ce-ls-h1: -1px; --ce-nav-pad-x: 20px; --ce-section-y: 64px; --ce-logo-nav: 42px; } } /* ============================================================================= * CUSTOMIZER OVERRIDE HOOK * Values set in Appearance > Customize are injected as an inline