/* ============================================================ Wyrmwood DESIGN TOKENS ------------------------------------------------------------ Single source of truth for the site's visual language, pulled verbatim from the Figma "Style Guide" file (key iwmyNbWrcNT0oz5Lvr2U5F, canvas "Button Assets"). Every value comes from the Figma Style Guide (variables, components) or the Wyrmwood Design System PDF — no site-side overrides (2026-09-17). Layers: 1. PALETTE — primitives under the design-system names (Ivory, Bone, Verdigris, …) plus the older --wwg-ink/cream/teal/ rust aliases the components already use. 2. SPACING / RADIUS / LINE WEIGHT primitives. 3. THEME ROLES on body — the Figma "Fluid Tokens" collection. The Classic values are the default; body.wwg_dark_mode swaps in the Signature values, so components that use role tokens need no dark-mode rules of their own. This file declares custom properties only — it changes nothing on its own. Components opt in by consuming var(--wwg-*), which keeps it safe to load ahead of Divi during the removal phases. Font sizes are the exact Figma values, including fractional ones (e.g. 67.94px). They are not rounded: the design file is the spec. ============================================================ */ /* ---- Display face (headings) ---- Previously re-declared inline per page template (page-trade-program-portal.php, page-modular-gaming-table.php, wyrmwood-trade-program.html). Declared once here instead. */ @font-face { font-family: 'Inegale OT'; src: url('../../fonts/InegaleOT-Regular.woff2') format('woff2'), url('../../fonts/InegaleOT-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inegale OT'; src: url('../../fonts/InegaleOT-Italic.woff2') format('woff2'), url('../../fonts/InegaleOT-Italic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Inegale OT'; src: url('../../fonts/InegaleOT-Demi.woff2') format('woff2'), url('../../fonts/InegaleOT-Demi.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Inegale OT'; src: url('../../fonts/InegaleOT-DemiItalic.woff2') format('woff2'), url('../../fonts/InegaleOT-DemiItalic.otf') format('opentype'); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: 'Inegale OT'; src: url('../../fonts/InegaleOT-Bold.woff2') format('woff2'), url('../../fonts/InegaleOT-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Inegale OT'; src: url('../../fonts/InegaleOT-BoldItalic.woff2') format('woff2'), url('../../fonts/InegaleOT-BoldItalic.otf') format('opentype'); font-weight: 700; font-style: italic; font-display: swap; } :root { /* ======================================================== PALETTE — Figma "Primitives" / Design System PDF names. No pure white or black anywhere in the system. ======================================================== */ /* Functional (warm greys) */ --wwg-ivory: #2B2929; /* darkest: Signature ground, footer, neutral buttons */ --wwg-iron: #575351; --wwg-pozzolana: #928B84; --wwg-pewter: #CDC2B7; --wwg-gypsum: #EFEBE7; /* Bone */ --wwg-bone-xlight: #FCF6ED; --wwg-bone-light: #FAEEDB; --wwg-bone: #F5DCB8; --wwg-bone-dark: #F0CB94; --wwg-bone-xdark: #E8B15E; /* Verdigris */ --wwg-verdigris-xlight: #E2F3F2; --wwg-verdigris-light: #BCE3E1; --wwg-verdigris: #8CCECA; --wwg-verdigris-dark: #59A6A1; --wwg-verdigris-xdark: #357C77; /* Burnt Sienna */ --wwg-burnt-sienna-xlight: #F6E0D9; --wwg-burnt-sienna-light: #EAB8A8; --wwg-burnt-sienna: #DA896D; --wwg-burnt-sienna-dark: #CA5E38; --wwg-burnt-sienna-xdark: #9D4728; /* Caput Mortuum */ --wwg-caput-mortuum-xlight: #BE7474; --wwg-caput-mortuum-light: #B15959; --wwg-caput-mortuum: #873F3F; --wwg-caput-mortuum-dark: #612E2E; --wwg-caput-mortuum-xdark: #301717; /* ---- Older aliases (kept: components use them) ---- */ --wwg-ink-900: var(--wwg-ivory); --wwg-ink-700: var(--wwg-iron); --wwg-ink-500: var(--wwg-pozzolana); --wwg-ink-300: var(--wwg-pewter); --wwg-grey-300: #D9D9D9; --wwg-cream-50: var(--wwg-bone-xlight); --wwg-cream-100: var(--wwg-bone-light); --wwg-cream-200: var(--wwg-gypsum); --wwg-tan-300: var(--wwg-bone); --wwg-gold-400: var(--wwg-bone-xdark); --wwg-maroon-950: var(--wwg-caput-mortuum-xdark); --wwg-teal-100: var(--wwg-verdigris-xlight); --wwg-teal-300: var(--wwg-verdigris); --wwg-teal-500: var(--wwg-verdigris-dark); --wwg-teal-700: var(--wwg-verdigris-xdark); --wwg-rust-300: var(--wwg-burnt-sienna); --wwg-rust-500: var(--wwg-burnt-sienna-dark); --wwg-rust-700: var(--wwg-burnt-sienna-xdark); /* ======================================================== SPACING / RADIUS / LINE WEIGHT — Figma "Primitives". Use only these for layout spacing. ======================================================== */ --wwg-space-1: 4px; --wwg-space-2: 8px; --wwg-space-3: 16px; --wwg-space-4: 24px; --wwg-space-5: 32px; --wwg-space-6: 40px; --wwg-space-7: 48px; --wwg-space-8: 56px; --wwg-space-9: 64px; --wwg-space-10: 72px; --wwg-space-11: 80px; --wwg-space-12: 88px; --wwg-radius-sm: 0; --wwg-radius-md: 2px; --wwg-radius-lg: 4px; /* buttons, images, sections inside the max width */ --wwg-radius-xl: 8px; --wwg-radius-pill: 600px; /* tags */ --wwg-line-sm: 1px; --wwg-line-md: 2px; /* dividers */ --wwg-line-lg: 4px; /* Page grounds — Figma Background/Primary-Background: Classic Bone Extra Light, Signature Ivory. (Kept as names for older rules; prefer --wwg-color-bg-primary.) */ --wwg-page-bg: var(--wwg-bone-xlight); --wwg-page-bg-dark: var(--wwg-ivory); /* ---- Figma "Fixed Tokens" (identical in Classic and Signature: footer, nav extras) ---- */ --wwg-fixed-primary-dark: var(--wwg-caput-mortuum-xdark); --wwg-fixed-primary-light: var(--wwg-gypsum); --wwg-fixed-button-light: var(--wwg-bone-xlight); --wwg-fixed-button-dark: var(--wwg-ivory); --wwg-fixed-hover-button-dark: var(--wwg-iron); --wwg-fixed-hover-button-light: var(--wwg-bone); --wwg-fixed-text-hover-button-dark: var(--wwg-pozzolana); --wwg-fixed-text-hover-button-light: var(--wwg-bone-xdark); --wwg-fixed-nav-text-cta-button: var(--wwg-bone-dark); --wwg-fixed-nav-arrow-default: var(--wwg-pewter); /* ======================================================== TYPE FAMILIES ======================================================== */ --wwg-font-display: 'Inegale OT', Georgia, serif; --wwg-font-body: 'Source Sans 3', 'Source Sans Pro', Helvetica, Arial, sans-serif; /* ======================================================== TYPE SCALE — desktop headings (Inegale OT 400) ======================================================== */ --wwg-h1-size: 67.94px; --wwg-h1-line: 72px; --wwg-h1-tracking: -0.2px; --wwg-h2-size: 54.98px; --wwg-h2-line: 58px; --wwg-h2-tracking: -0.2px; --wwg-h3-size: 44.47px; --wwg-h3-line: 48px; --wwg-h3-tracking: -0.1px; --wwg-h4-size: 36px; --wwg-h4-line: 38px; --wwg-h4-tracking: -0.1px; --wwg-h5-size: 29.12px; --wwg-h5-line: 32px; --wwg-h5-tracking: -0.05px; --wwg-h6-size: 23.56px; --wwg-h6-line: 25px; /* Design System PDF */ --wwg-h6-tracking: 0; /* ---- Mobile headings ---- */ --wwg-h1-size-mobile: 51.94px; --wwg-h1-line-mobile: 56px; --wwg-h2-size-mobile: 41.99px; --wwg-h2-line-mobile: 44px; --wwg-h3-size-mobile: 33.97px; --wwg-h3-line-mobile: 37px; --wwg-h4-size-mobile: 27.49px; --wwg-h4-line-mobile: 29px; --wwg-h5-size-mobile: 22.25px; --wwg-h5-line-mobile: 24px; /* Figma Typography variable, Mobile mode */ --wwg-h6-size-mobile: 18px; --wwg-h6-line-mobile: 19px; /* ======================================================== TYPE ROLES — from the Style Guide "Global Component Blank" modules. Figma assigns text styles by role, not by tag. ======================================================== */ /* Page / hero title — H1 */ --wwg-type-hero-size: var(--wwg-h1-size); --wwg-type-hero-line: var(--wwg-h1-line); --wwg-type-hero-tracking: var(--wwg-h1-tracking); --wwg-type-hero-size-mobile: var(--wwg-h1-size-mobile); --wwg-type-hero-line-mobile: var(--wwg-h1-line-mobile); /* Section title (and full-width image panel titles) — H3 */ --wwg-type-section-size: var(--wwg-h3-size); --wwg-type-section-line: var(--wwg-h3-line); --wwg-type-section-tracking: var(--wwg-h3-tracking); --wwg-type-section-size-mobile: var(--wwg-h3-size-mobile); --wwg-type-section-line-mobile: var(--wwg-h3-line-mobile); /* Feature / card title — H5 */ --wwg-type-feature-size: var(--wwg-h5-size); --wwg-type-feature-line: var(--wwg-h5-line); --wwg-type-feature-tracking: var(--wwg-h5-tracking); --wwg-type-feature-size-mobile: var(--wwg-h5-size-mobile); --wwg-type-feature-line-mobile: var(--wwg-h5-line-mobile); /* Small feature title — H6 */ --wwg-type-feature-sm-size: var(--wwg-h6-size); --wwg-type-feature-sm-line: var(--wwg-h6-line); --wwg-type-feature-sm-tracking: var(--wwg-h6-tracking); --wwg-type-feature-sm-size-mobile: var(--wwg-h6-size-mobile); --wwg-type-feature-sm-line-mobile: var(--wwg-h6-line-mobile); /* Sticky shop bar product name — H4 desktop, Source Sans 14/24 mobile */ --wwg-type-sticky-size: var(--wwg-h4-size); --wwg-type-sticky-line: var(--wwg-h4-line); --wwg-type-sticky-tracking: var(--wwg-h4-tracking); --wwg-type-sticky-size-mobile: 14px; --wwg-type-sticky-line-mobile: 24px; /* Product page title (buy box) — H4. Source: Figma "Product Page" file (S4PskloCPCA0jssDHUyjoY), Standard + Builder product page frames. */ --wwg-type-product-title-size: var(--wwg-h4-size); --wwg-type-product-title-line: var(--wwg-h4-line); --wwg-type-product-title-tracking: var(--wwg-h4-tracking); --wwg-type-product-title-size-mobile: var(--wwg-h4-size-mobile); --wwg-type-product-title-line-mobile: var(--wwg-h4-line-mobile); /* Option group label on the product page ("Insert Type", "Wood") — Inegale Demi */ --wwg-type-option-group-size: var(--wwg-h6-size); --wwg-type-option-group-line: var(--wwg-h6-line); --wwg-type-option-group-size-mobile: var(--wwg-h5-size-mobile); --wwg-type-option-group-line-mobile: 24px; /* Product name on product cards — Source Sans SemiBold */ --wwg-type-product-name-weight: 600; --wwg-type-product-name-size: 16px; --wwg-type-product-name-line: 26px; --wwg-type-product-name-size-mobile: 14px; --wwg-type-product-name-line-mobile: 24px; /* ======================================================== TYPE SCALE — paragraphs (Source Sans, 400) ======================================================== */ --wwg-text-xs-size: 12px; --wwg-text-xs-line: 14px; --wwg-text-xs-tracking: 0.28px; --wwg-text-sm-size: 14px; --wwg-text-sm-line: 22px; --wwg-text-sm-tracking: 0; --wwg-text-md-size: 16px; --wwg-text-md-line: 26px; --wwg-text-md-tracking: 0; --wwg-text-lg-size: 20px; --wwg-text-lg-line: 32px; --wwg-text-lg-tracking: 0; --wwg-text-xl-size: 24px; --wwg-text-xl-line: 36px; --wwg-text-xl-tracking: 0; /* ---- Mobile paragraphs ---- Figma "Typogrophy" collection, Mobile mode: each paragraph role keeps its step name and takes that step's mobile value (body xl 24->20, lg 20->16, md 16->14, sm 14->12, xsm 12->10; line 4xl 36->32, 3xl 32->26, 2xl 26->24, lg 22->20, xsm 14->12). */ --wwg-text-xs-size-mobile: 10px; --wwg-text-xs-line-mobile: 12px; --wwg-text-sm-size-mobile: 12px; --wwg-text-sm-line-mobile: 20px; --wwg-text-md-size-mobile: 14px; --wwg-text-md-line-mobile: 24px; --wwg-text-lg-size-mobile: 16px; --wwg-text-lg-line-mobile: 26px; --wwg-text-xl-size-mobile: 20px; --wwg-text-xl-line-mobile: 32px; /* ======================================================== BUTTONS 4 colour uses x 3 hierarchies x 3 states x 4 sizes. Geometry is identical across every size and across the Fluid and Fixed sets; only the label scale changes. ======================================================== */ --wwg-btn-weight: 600; --wwg-btn-tracking: 0.28px; --wwg-btn-radius: 4px; /* Classic; Signature shape is set on body.wwg_dark_mode */ --wwg-btn-border-width: 2px; --wwg-btn-padding-y: 8px; --wwg-btn-padding-x: 56px; --wwg-btn-disabled-opacity: 0.4; --wwg-btn-sm-size: 14px; --wwg-btn-sm-line: 18px; --wwg-btn-md-size: 16px; --wwg-btn-md-line: 20px; --wwg-btn-lg-size: 20px; --wwg-btn-lg-line: 24px; --wwg-btn-xl-size: 24px; --wwg-btn-xl-line: 32px; /* Mobile labels drop one body step (Figma Typogrophy, Mobile mode): the 12/16, 14/18, 16/20 and 20/24 SemiBold pairs the Style Guide uses. */ --wwg-btn-sm-size-mobile: 12px; --wwg-btn-sm-line-mobile: 16px; --wwg-btn-md-size-mobile: 14px; --wwg-btn-md-line-mobile: 18px; --wwg-btn-lg-size-mobile: 16px; --wwg-btn-lg-line-mobile: 20px; --wwg-btn-xl-size-mobile: 20px; --wwg-btn-xl-line-mobile: 24px; /* Colour uses (neutral / cta / emphasis / visibility) are theme roles: see body below. */ /* Outlined hover — Figma "Fluid Buttons" (Style Guide 40:512) / Design System PDF: outline and label keep the colour use's ink; the button fills with that ink at 16% opacity. */ --wwg-btn-outlined-hover-opacity: 16%; } /* ============================================================ THEME ROLES — Figma "Fluid Tokens" (modes Classic / Signature) ------------------------------------------------------------ Declared on body (not :root) so body.wwg_dark_mode can swap them and every var() reading them resolves per page. Names follow the Figma variables, e.g. Background/Primary-Background → --wwg-color-bg-primary. ============================================================ */ body { /* ---- Backgrounds ---- */ --wwg-color-bg-primary: var(--wwg-bone-xlight); --wwg-color-bg-secondary: var(--wwg-bone-light); --wwg-color-bg-tertiary: var(--wwg-gypsum); --wwg-color-bg-neutral-accent: var(--wwg-pewter); --wwg-color-bg-cta: var(--wwg-verdigris); --wwg-color-bg-emphasis: var(--wwg-burnt-sienna); /* ---- Text ---- */ --wwg-color-text-primary: var(--wwg-caput-mortuum-xdark); --wwg-color-text-secondary: var(--wwg-pozzolana); /* Small secondary text and hover labels that must meet WCAG AA (user contrast ruling 2026-09-21). Text/Secondary-Text (Pozzolana) is Large-AA only on the Bone grounds, so below 24px (19px bold) secondary text uses Iron. Signature keeps Pewter (8.3 on Ivory). */ --wwg-color-text-subtle: var(--wwg-iron); /* Hover label on a Background/Secondary-Background band (current nav tab, section tab rows): Iron on Bone Light (6.6); Signature Bone Extra Light on Iron (7.1). */ --wwg-color-text-hover-on-secondary: var(--wwg-iron); --wwg-color-text-visibility: var(--wwg-gypsum); --wwg-color-text-cta: var(--wwg-verdigris-xdark); --wwg-color-text-emphasis: var(--wwg-burnt-sienna-xdark); --wwg-color-text-emphasis-hover: var(--wwg-burnt-sienna); /* Text/Button-Emphasis-Text-Hover */ --wwg-color-text-strong: var(--wwg-ivory); /* Text/Button-Primary-Text */ --wwg-color-text-strong-hover: var(--wwg-pozzolana); /* Text/Button-Primary-Text-Hover */ --wwg-color-text-on-strong: var(--wwg-bone-xlight); /* Text/Button-Secondary-Text */ /* ---- Accents ---- */ --wwg-color-accent-neutral: var(--wwg-pewter); /* rules, borders, section-header lines */ --wwg-color-accent-strong: var(--wwg-iron); /* Accent/Icon-Thumb-Hover-Accent: Line 31, truck icon */ --wwg-color-accent-focus: var(--wwg-verdigris); --wwg-color-accent-focus-bg: var(--wwg-bone-light); --wwg-color-accent-emphasis: var(--wwg-burnt-sienna-dark); --wwg-color-swatch-focus: var(--wwg-verdigris-dark); --wwg-color-promo-accepted: var(--wwg-verdigris-xlight); /* ---- Interactive icons (gallery / carousel arrows, quick view, quantity) ---- */ --wwg-color-icon-1: var(--wwg-bone-xlight); /* glyph on the hover disc */ --wwg-color-icon-2: var(--wwg-pozzolana); /* resting glyph; hover disc */ --wwg-color-icon-focus-1: var(--wwg-ivory); --wwg-color-icon-focus-2: var(--wwg-bone-light); --wwg-color-icon-visibility-1: var(--wwg-gypsum); --wwg-color-icon-visibility-2: var(--wwg-iron); /* carousel progress bar */ --wwg-color-link: var(--wwg-burnt-sienna-xdark); /* body links = Fluid Buttons Emphasis Borderless (user, 2026-09-17) */ --wwg-color-link-hover: var(--wwg-burnt-sienna); --wwg-color-cart-badge: var(--wwg-burnt-sienna-dark); --wwg-color-cart-badge-hover: var(--wwg-burnt-sienna-xdark); --wwg-color-search-hover: var(--wwg-verdigris-dark); /* Interactive Icons/Search-Bar-Hover */ /* ---- Shadows ---- */ --wwg-shadow-color: rgb(43 41 41 / 32%); --wwg-shadow-icon-color: rgb(43 41 41 / 64%); /* ---- Buttons: Fluid Buttons colour uses ---- */ --wwg-btn-neutral-ink: var(--wwg-ivory); --wwg-btn-neutral-fill: var(--wwg-ivory); --wwg-btn-neutral-fill-hover: var(--wwg-iron); --wwg-btn-neutral-on-fill: var(--wwg-bone-xlight); --wwg-btn-neutral-ink-hover: var(--wwg-pozzolana); --wwg-btn-cta-ink: var(--wwg-verdigris-xdark); --wwg-btn-cta-fill: var(--wwg-verdigris); --wwg-btn-cta-fill-hover: var(--wwg-verdigris-xdark); --wwg-btn-cta-on-fill: var(--wwg-ivory); --wwg-btn-cta-ink-hover: var(--wwg-verdigris); --wwg-btn-emphasis-ink: var(--wwg-burnt-sienna-xdark); --wwg-btn-emphasis-fill: var(--wwg-burnt-sienna); --wwg-btn-emphasis-fill-hover: var(--wwg-burnt-sienna-dark); --wwg-btn-emphasis-on-fill: var(--wwg-ivory); --wwg-btn-emphasis-ink-hover: var(--wwg-burnt-sienna); /* Visibility: grounds that contrast with the page (imagery, dark bands on Classic). */ --wwg-btn-visibility-ink: var(--wwg-bone-xlight); --wwg-btn-visibility-fill: var(--wwg-bone-xlight); --wwg-btn-visibility-fill-hover: var(--wwg-bone); --wwg-btn-visibility-on-fill: var(--wwg-ivory); --wwg-btn-visibility-ink-hover: var(--wwg-bone); } /* ---- Signature: Prophecy, Custom Shop, Trade Program and the other wwg_dark_mode pages ---- */ body.wwg_dark_mode { --wwg-color-text-subtle: var(--wwg-pewter); --wwg-color-text-hover-on-secondary: var(--wwg-bone-xlight); --wwg-color-bg-primary: var(--wwg-ivory); --wwg-color-bg-secondary: var(--wwg-iron); --wwg-color-bg-tertiary: var(--wwg-pozzolana); --wwg-color-bg-neutral-accent: var(--wwg-iron); --wwg-color-bg-cta: var(--wwg-bone-dark); --wwg-color-bg-emphasis: var(--wwg-caput-mortuum); --wwg-color-text-primary: var(--wwg-gypsum); --wwg-color-text-secondary: var(--wwg-pewter); --wwg-color-text-visibility: var(--wwg-ivory); --wwg-color-text-cta: var(--wwg-bone-dark); --wwg-color-text-emphasis: var(--wwg-caput-mortuum-xlight); --wwg-color-text-emphasis-hover: var(--wwg-caput-mortuum); --wwg-color-text-strong: var(--wwg-bone-xlight); --wwg-color-text-strong-hover: var(--wwg-bone); --wwg-color-text-on-strong: var(--wwg-ivory); --wwg-color-accent-neutral: var(--wwg-iron); --wwg-color-accent-strong: var(--wwg-pewter); --wwg-color-accent-focus: var(--wwg-bone-dark); --wwg-color-accent-focus-bg: var(--wwg-iron); --wwg-color-accent-emphasis: var(--wwg-caput-mortuum-xlight); --wwg-color-swatch-focus: var(--wwg-bone-xdark); --wwg-color-promo-accepted: var(--wwg-bone-light); --wwg-color-icon-1: var(--wwg-ivory); --wwg-color-icon-2: var(--wwg-pewter); --wwg-color-icon-focus-1: var(--wwg-bone-xlight); --wwg-color-icon-focus-2: var(--wwg-iron); --wwg-color-icon-visibility-1: var(--wwg-iron); --wwg-color-icon-visibility-2: var(--wwg-gypsum); --wwg-color-link: var(--wwg-bone-xlight); /* Visibility Borderless (its Classic values: light on dark) */ --wwg-color-link-hover: var(--wwg-bone); --wwg-color-cart-badge: var(--wwg-caput-mortuum-light); --wwg-color-cart-badge-hover: var(--wwg-caput-mortuum); --wwg-color-search-hover: var(--wwg-bone-xdark); --wwg-shadow-color: rgb(0 0 0 / 48%); --wwg-shadow-icon-color: rgb(0 0 0 / 80%); --wwg-btn-neutral-ink: var(--wwg-bone-xlight); --wwg-btn-neutral-fill: var(--wwg-bone-xlight); --wwg-btn-neutral-fill-hover: var(--wwg-bone); --wwg-btn-neutral-on-fill: var(--wwg-ivory); --wwg-btn-neutral-ink-hover: var(--wwg-bone); --wwg-btn-cta-ink: var(--wwg-bone-dark); --wwg-btn-cta-fill: var(--wwg-bone-dark); --wwg-btn-cta-fill-hover: var(--wwg-bone-xdark); --wwg-btn-cta-on-fill: var(--wwg-ivory); --wwg-btn-cta-ink-hover: var(--wwg-bone-xdark); --wwg-btn-emphasis-ink: var(--wwg-caput-mortuum-xlight); --wwg-btn-emphasis-fill: var(--wwg-caput-mortuum); --wwg-btn-emphasis-fill-hover: var(--wwg-caput-mortuum-dark); --wwg-btn-emphasis-on-fill: var(--wwg-bone-xlight); --wwg-btn-emphasis-ink-hover: var(--wwg-caput-mortuum); /* Signature button shape — Design System PDF "Buttons – Wyrmwood Signature": flat top and bottom, left and right sides curved (a ~2px-deep arc over the 40px height), 1px outline, 8px / 64px padding. */ --wwg-btn-radius: 2px / 50%; --wwg-btn-border-width: 1px; --wwg-btn-padding-x: 64px; /* Visibility on Signature: light grounds and imagery. */ --wwg-btn-visibility-ink: var(--wwg-ivory); --wwg-btn-visibility-fill: var(--wwg-ivory); --wwg-btn-visibility-fill-hover: var(--wwg-iron); --wwg-btn-visibility-on-fill: var(--wwg-bone-xlight); --wwg-btn-visibility-ink-hover: var(--wwg-pozzolana); }