/* 
 * Websly Theme System v3.0 - Global Tokens
 * These static tokens form the foundation for spacing, typography, radius, shadow, and motion.
 * They are defined before utility classes so that Tailwind can consume them seamlessly.
 */

:root {
    /* =========================================
     Typography Tokens (Fluid Clamps)
     ========================================= */
    --text-xs: clamp(0.7rem, 0.7rem + 0.1vw, 0.75rem);
    --text-sm: clamp(0.8rem, 0.8rem + 0.15vw, 0.875rem);
    --text-base-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.125rem);
    --text-lg: clamp(1.1rem, 1rem + 0.5vw, 1.25rem);
    --text-xl: clamp(1.2rem, 1.1rem + 0.75vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --text-3xl: clamp(1.8rem, 1.5rem + 1.5vw, 2.5rem);
    --text-4xl: clamp(2rem, 1.8rem + 2vw, 3.5rem);
    --text-5xl: clamp(2.5rem, 2rem + 3vw, 4.5rem);
    --text-6xl: clamp(3rem, 2.5rem + 4vw, 6rem);
    --text-7xl: clamp(3.5rem, 3rem + 5vw, 8rem);

    /* =========================================
     Spacing Tokens (Inner Element Rhythm)
     ========================================= */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;

    /* =========================================
     Section Spacing Tokens (Outer Paddings)
     ========================================= */
    --section-space-sm: clamp(2rem, 4vw, 4rem);
    --section-space-md: clamp(3rem, 6vw, 6rem);
    --section-space-lg: clamp(4rem, 8vw, 8rem);
    --section-space-xl: clamp(6rem, 12vw, 12rem);

    /* =========================================
     Radius Tokens
     ========================================= */
    --radius-none: 0px;
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-2xl: 2rem;
    --radius-3xl: 3rem;
    --radius-4xl: 4rem;
    --radius-full: 9999px;

    /* =========================================
     Shadow & Elevation Tokens
     Using fallback hex for black, to be themed via RGBA where needed
     ========================================= */
    --shadow-none: none;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* A brand-colored diffuse glow - the color will be overridden dynamically per theme if needed,
     but we provide a default that uses the theme accent variable */
    --shadow-glow: 0 0 20px 0 color-mix(in srgb, var(--theme-accent) 40%, transparent);

    /* =========================================
     Display & Hero Typography (2026 Premium)
     ========================================= */
    --text-display-sm: clamp(2.5rem, 2rem + 2.5vw, 4rem);
    --text-display-md: clamp(3rem, 2.5rem + 3.5vw, 5.5rem);
    --text-display-lg: clamp(3.5rem, 3rem + 4.5vw, 7rem);
    --text-display-xl: clamp(4rem, 3rem + 6vw, 9rem);
    --text-display-2xl: clamp(5rem, 3.5rem + 8vw, 12rem);
    --text-caption: clamp(0.65rem, 0.6rem + 0.1vw, 0.7rem);
    --text-overline: clamp(0.65rem, 0.6rem + 0.08vw, 0.72rem);

    /* =========================================
     Premium Spacing (2026)
     ========================================= */
    --space-3xl: 6rem;
    --space-4xl: 8rem;
    --space-5xl: 12rem;
    --section-space-2xl: clamp(8rem, 16vw, 16rem);

    /* =========================================
     Motion Tokens
     ========================================= */
    --duration-fast: 0.15s;
    --duration-normal: 0.3s;
    --duration-slow: 0.5s;
    --duration-slower: 0.8s;
    --ease-default: ease;
    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
    --ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

/* Lordicon Integration */
lord-icon {
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
}

.dark {
    /* Dark mode shadow variations — heavier black for when drop shadows are used on elevated overlays */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

/* =========================================
   Universal Wrapper CSS Utilities
   These map the tokens directly to utility classes used by websly_get_wrapper_attrs()
   ========================================= */

/* Top Padding */
.ws-pt-none {
    padding-top: 0 !important;
}

.ws-pt-2xs {
    padding-top: var(--space-2xs);
}

.ws-pt-xs {
    padding-top: var(--space-xs);
}

.ws-pt-sm {
    padding-top: var(--space-sm);
}

.ws-pt-md {
    padding-top: var(--space-md);
}

.ws-pt-lg {
    padding-top: var(--space-lg);
}

.ws-pt-xl {
    padding-top: var(--space-xl);
}

.ws-pt-2xl {
    padding-top: var(--space-2xl);
}

.ws-pt-section-sm {
    padding-top: var(--section-space-sm);
}

.ws-pt-section-md {
    padding-top: var(--section-space-md);
}

.ws-pt-section-lg {
    padding-top: var(--section-space-lg);
}

.ws-pt-section-xl {
    padding-top: var(--section-space-xl);
}

/* Bottom Padding */
.ws-pb-none {
    padding-bottom: 0 !important;
}

.ws-pb-2xs {
    padding-bottom: var(--space-2xs);
}

.ws-pb-xs {
    padding-bottom: var(--space-xs);
}

.ws-pb-sm {
    padding-bottom: var(--space-sm);
}

.ws-pb-md {
    padding-bottom: var(--space-md);
}

.ws-pb-lg {
    padding-bottom: var(--space-lg);
}

.ws-pb-xl {
    padding-bottom: var(--space-xl);
}

.ws-pb-2xl {
    padding-bottom: var(--space-2xl);
}

.ws-pb-section-sm {
    padding-bottom: var(--section-space-sm);
}

.ws-pb-section-md {
    padding-bottom: var(--section-space-md);
}

.ws-pb-section-lg {
    padding-bottom: var(--section-space-lg);
}

.ws-pb-section-xl {
    padding-bottom: var(--section-space-xl);
}

/* Top Margin */
.ws-mt-none {
    margin-top: 0 !important;
}

.ws-mt-2xs {
    margin-top: var(--space-2xs);
}

.ws-mt-xs {
    margin-top: var(--space-xs);
}

.ws-mt-sm {
    margin-top: var(--space-sm);
}

.ws-mt-md {
    margin-top: var(--space-md);
}

.ws-mt-lg {
    margin-top: var(--space-lg);
}

.ws-mt-xl {
    margin-top: var(--space-xl);
}

.ws-mt-2xl {
    margin-top: var(--space-2xl);
}

/* Bottom Margin */
.ws-mb-none {
    margin-bottom: 0 !important;
}

.ws-mb-2xs {
    margin-bottom: var(--space-2xs);
}

.ws-mb-xs {
    margin-bottom: var(--space-xs);
}

.ws-mb-sm {
    margin-bottom: var(--space-sm);
}

.ws-mb-md {
    margin-bottom: var(--space-md);
}

.ws-mb-lg {
    margin-bottom: var(--space-lg);
}

.ws-mb-xl {
    margin-bottom: var(--space-xl);
}

.ws-mb-2xl {
    margin-bottom: var(--space-2xl);
}

/* Visibility Utilities */
@media (max-width: 767px) {
    .ws-hide-mobile {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .ws-hide-desktop {
        display: none !important;
    }
}

/* Radius Utilities */
.ws-radius-none {
    border-radius: var(--radius-none);
}

.ws-radius-sm {
    border-radius: var(--radius-sm);
}

.ws-radius-md {
    border-radius: var(--radius-md);
}

.ws-radius-lg {
    border-radius: var(--radius-lg);
}

.ws-radius-xl {
    border-radius: var(--radius-xl);
}

.ws-radius-2xl {
    border-radius: var(--radius-2xl);
}

.ws-radius-3xl {
    border-radius: var(--radius-3xl);
}

.ws-radius-4xl {
    border-radius: var(--radius-4xl);
}

.ws-radius-full {
    border-radius: var(--radius-full);
}

.ws-radius-pill {
    border-radius: var(--radius-full);
}

/* Shadow Utilities */
.ws-shadow-none {
    box-shadow: var(--shadow-none);
}

.ws-shadow-sm {
    box-shadow: var(--shadow-sm);
}

.ws-shadow-md {
    box-shadow: var(--shadow-md);
}

.ws-shadow-lg {
    box-shadow: var(--shadow-lg);
}

.ws-shadow-glow {
    box-shadow: var(--shadow-glow);
}

/* Elevation Aliases (v4.0 Schema) */
.ws-elevation-none {
    box-shadow: var(--shadow-none);
}

.ws-elevation-low {
    box-shadow: var(--shadow-sm);
}

.ws-elevation-normal {
    box-shadow: var(--shadow-md);
}

.ws-elevation-high {
    box-shadow: var(--shadow-lg);
}

.ws-elevation-glow {
    box-shadow: var(--shadow-glow);
}

/* Card Density Utilities */
.ws-card-density-cozy {
    padding: 1.25rem !important;
}

.ws-card-density-default {
    padding: 1.5rem !important;
}

.ws-card-density-spacious {
    padding: 2.5rem !important;
}

/* Grid Gaps matching density */
.ws-grid-gap-cozy {
    gap: 1rem !important;
}

.ws-grid-gap-default {
    gap: 1.5rem !important;
}

.ws-grid-gap-spacious {
    gap: 2.5rem !important;
}

/* Hover Effects */
.ws-hover-lift {
    transition: transform var(--duration-normal) var(--ease-smooth), box-shadow var(--duration-normal) var(--ease-smooth);
}

.ws-hover-lift:hover {
    transform: translateY(-4px);
}

.ws-hover-scale {
    transition: transform var(--duration-normal) var(--ease-smooth);
}

.ws-hover-scale:hover {
    transform: scale(1.02);
}

.ws-hover-shadow-bright {
    transition: box-shadow var(--duration-normal) var(--ease-smooth);
}

.ws-min-h-fullscreen {
    min-height: 100vh !important;
    min-height: 100dvh !important;
}

.ws-min-h-90vh {
    min-height: 90vh !important;
    min-height: 90dvh !important;
}

.ws-min-h-80vh {
    min-height: 80vh !important;
    min-height: 80dvh !important;
}

.ws-min-h-70vh {
    min-height: 70vh !important;
    min-height: 70dvh !important;
}

.ws-min-h-60vh {
    min-height: 60vh !important;
    min-height: 60dvh !important;
}

/* =========================================
   Typography Scaling Utilities
   ========================================= */
.ws-text-xs {
    font-size: var(--text-xs);
}

.ws-text-sm {
    font-size: var(--text-sm);
}

.ws-text-base {
    font-size: var(--text-base-size);
}

.ws-text-lg {
    font-size: var(--text-lg);
}

.ws-text-xl {
    font-size: var(--text-xl);
}

.ws-text-2xl {
    font-size: var(--text-2xl);
}

.ws-text-3xl {
    font-size: var(--text-3xl);
}

.ws-text-4xl {
    font-size: var(--text-4xl);
}

.ws-text-5xl {
    font-size: var(--text-5xl);
}

.ws-text-6xl {
    font-size: var(--text-6xl);
}

.ws-text-7xl {
    font-size: var(--text-7xl);
}

/* ── Fluid Typography Tokens (2026 Canonical) ──────────────────────────── */

/* Canonical section title/subtitle size — baseline defaults.
   Placed before utility classes so that explicit classes like .text-3xl or
   .text-fluid-h2 correctly win over these defaults via source order. */
.ws-type-titles,
.ws-type-title {
    font-size: calc(var(--ws-section-title-size, clamp(2.5rem, 2rem + 2.5vw, 4.5rem)) * var(--ws-scale-title, 1));
}
.ws-type-subtitles,
.ws-type-subtitle {
    font-size: calc(var(--ws-section-subtitle-size, clamp(1.0625rem, 1.25vw + 0.25rem, 1.375rem)) * var(--ws-scale-subtitle, 1));
}

/* Section content titles — canonical class for non-hero block titles.
   Reads from --ws-section-title-* so it's identical to .text-fluid-h2 and any
   Customizer override flows through both. */
.text-section-title {
    font-size: calc(var(--ws-section-title-size, clamp(2.5rem, 2rem + 2.5vw, 4.5rem)) * var(--ws-scale-title, 1));
    line-height: var(--ws-section-title-line-height, 1.1);
    letter-spacing: var(--ws-section-title-letter-spacing, -0.02em);
    font-weight: var(--ws-section-title-weight, 700);
}

/* Section description / lead text — canonical class for non-hero block subtitles.
   Calibrated to match Presets' subtitle visual. */
.text-section-subtitle {
    font-size: calc(var(--ws-section-subtitle-size, clamp(1.0625rem, 1.25vw + 0.25rem, 1.375rem)) * var(--ws-scale-subtitle, 1));
    line-height: var(--ws-section-subtitle-line-height, 1.6);
    font-weight: var(--ws-section-subtitle-weight, 400);
}

/* `.ws-section-desc` — alias used by some templates (Presets, etc.). Inherits
   the same vars so the visual is identical to .text-section-subtitle. */
.ws-section-desc {
    font-size: calc(var(--ws-section-subtitle-size, clamp(1.0625rem, 1.25vw + 0.25rem, 1.375rem)) * var(--ws-scale-subtitle, 1));
    line-height: var(--ws-section-subtitle-line-height, 1.6);
    font-weight: var(--ws-section-subtitle-weight, 400);
}

.ws-italic {
    font-style: italic;
}

.ws-font-serif {
    font-family: var(--font-drama);
}

.ws-font-sans {
    font-family: var(--font-primary);
}

.ws-font-mono {
    font-family: var(--font-ui);
}

/* Hero display sizes — modern agency scale 2026 */

/* Massive statement text — used for hero-title variant */
.text-hero-title {
    font-size: clamp(3rem, 6vw + 0.5rem, 6.5rem);
    line-height: 1.0;
    letter-spacing: -0.04em;
}

/* ─── Global Typography Scale + Canonical Section Defaults (5.1) ────
   Two layers stack here:
   1) Canonical SECTION defaults: --ws-section-title-* and --ws-section-subtitle-*
      are the single source of truth for what a "section title" and a "section
      subtitle" look like across all non-hero blocks. Defaults are calibrated
      to match the visual of `websly/features` (title) and `websly/presets`
      (subtitle). All size classes below consume these vars, so changing them
      in one place ripples through every block that uses .text-section-title /
      .text-section-subtitle / .text-fluid-h2 / .ws-section-desc.
   2) Multipliers: --ws-scale-{title,subtitle,body} are user-driven percentages
      from the Customizer (📐 Global Type Scale). Defaults to 1 = no change.
   Special blocks marked .ws-typo-exempt reset BOTH layers locally so hand-tuned
   typography (heroes, globe, animated-hover-image, interactive-image-gallery)
   never get stretched by global overrides. See CLAUDE.md → "Global Typography
   & Exempt Blocks". */
:root {
    /* Canonical section defaults — calibrated to Features-h2 and Presets-subtitle */
    --ws-section-title-size:           clamp(2.5rem, 2rem + 2.5vw, 4.5rem); /* Calibrated to ~72px desktop baseline per User request */
    --ws-section-title-weight:         700;
    --ws-section-title-line-height:    1.1;
    --ws-section-title-letter-spacing: -0.02em;

    --ws-section-subtitle-size:        clamp(1.0625rem, 1.25vw + 0.25rem, 1.375rem);
    --ws-section-subtitle-weight:      400;
    --ws-section-subtitle-line-height: 1.6;

    /* Customizer multipliers */
    --ws-scale-title:    1;
    --ws-scale-subtitle: 1;
    --ws-scale-body:     1;
}
.ws-typo-exempt {
    /* Enforce the original hand-tuned defaults for exempt hero/interactive blocks */
    --ws-section-title-size:           clamp(2rem, 3.5vw + 0.5rem, 4rem);
    --ws-section-title-weight:         700;
    --ws-section-title-line-height:    1.1;
    --ws-section-title-letter-spacing: -0.02em;
    --ws-section-subtitle-size:        clamp(1.0625rem, 1.25vw + 0.25rem, 1.375rem);
    --ws-section-subtitle-weight:      400;
    --ws-section-subtitle-line-height: 1.6;
    /* Reset the multipliers so they are immune to global type scale customizer overrides */
    --ws-scale-title:    1;
    --ws-scale-subtitle: 1;
    --ws-scale-body:     1;
}

/* Tier B — bespoke size, canonical font.
   Resets only the SIZE-related vars + the size-multiplier scales. Keeps
   --ws-font-*, --ws-font-weight-*, --style-*, --ws-letter-spacing-* and
   --ws-line-height-* flowing through from globals, so the block picks up
   font-family swaps and italic toggles but never has its hand-tuned sizes
   stretched by Customizer overrides.
   Used for blocks where the title/subtitle isn't a top-of-section header
   in the canonical "Features / Presets" position — e.g. Contact, Email CTA,
   Cookie banner, Floating CTA, Banner Marquee, Footer.
   Auto-injected by inc/components.php render_callback for any slug in
   websly_get_typography_bespoke_size_blocks(). */
.ws-typo-bespoke-size {
    --ws-section-title-size:    initial;
    --ws-section-subtitle-size: initial;
    --ws-scale-title:    1;
    --ws-scale-subtitle: 1;
    --ws-scale-body:     1;
}

/* Primary hero heading — default for hero H1.
   Heroes live INSIDE .ws-typo-exempt so the canonical vars are `initial` for
   them; the hardcoded clamp below acts as the bespoke hero default. */
.text-fluid-h1 {
    font-size: calc(clamp(2.75rem, 5vw + 0.5rem, 5.5rem) * var(--ws-scale-title, 1));
    line-height: 1.02;
    letter-spacing: -0.03em;
}

/* Secondary hero heading / large section titles.
   This is the canonical "section title" — used by Features and (after the
   5.1-2026-05-19 audit) every non-exempt block. Reads from --ws-section-title-*
   so a Customizer-driven override ripples through every consumer. */
.text-fluid-h2 {
    font-size: calc(var(--ws-section-title-size, clamp(2.5rem, 2rem + 2.5vw, 4.5rem)) * var(--ws-scale-title, 1));
    line-height: var(--ws-section-title-line-height, 1.1);
    letter-spacing: var(--ws-section-title-letter-spacing, -0.02em);
    font-weight: var(--ws-section-title-weight, 700);
}

/* Sub-section titles */
.text-fluid-h3 {
    font-size: calc(clamp(1.5rem, 2vw + 0.5rem, 2.75rem) * var(--ws-scale-subtitle, 1));
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.text-7xl {
    font-size: var(--text-7xl, 4.5rem);
}

.text-6xl {
    font-size: var(--text-6xl, 3.75rem);
}

.text-5xl {
    font-size: var(--text-5xl, 3rem);
}

.text-4xl {
    font-size: var(--text-4xl, 2.25rem);
}

.text-3xl {
    font-size: var(--text-3xl, 1.875rem);
}

.text-2xl {
    font-size: var(--text-2xl, 1.5rem);
}

.text-xl {
    font-size: var(--text-xl, 1.25rem);
}

.text-lg {
    font-size: var(--text-lg, 1.125rem);
}

.text-base {
    font-size: var(--text-base-size, 1rem);
}

.text-sm {
    font-size: var(--text-sm, 0.875rem);
}

.text-xs {
    font-size: var(--text-xs, 0.75rem);
}

.text-strong {
    color: var(--theme-text-strong);
}

.text-muted {
    color: var(--theme-text-muted);
}

.text-theme-text-strong {
    color: var(--theme-text-strong);
}

.text-theme-text-muted {
    color: var(--theme-text-muted);
}

.text-theme-text {
    color: var(--theme-text);
}

.text-theme-text-on-accent {
    color: var(--theme-text-on-accent, #fff);
}

/* =========================================
   vNext Decoupled Architecture Utilities
   These consume the structural variables set by Personalities / Global Tokens
   ========================================= */

/* --- 1. Spacing & Density (Section/Card) --- */
.ws-section-density-none {
    padding-top: 0;
    padding-bottom: 0;
}

.ws-section-density-compact {
    padding-top: var(--section-space-sm);
    padding-bottom: var(--section-space-sm);
}

.ws-section-density-default {
    padding-top: var(--section-space-md);
    padding-bottom: var(--section-space-md);
}

.ws-section-density-spacious {
    padding-top: var(--section-space-lg);
    padding-bottom: var(--section-space-lg);
}

.ws-section-density-hero {
    padding-top: var(--section-space-xl);
    padding-bottom: var(--section-space-xl);
}

.ws-card-density-none {
    padding: 0;
}

.ws-card-density-cozy {
    padding: var(--space-sm);
    gap: var(--space-sm);
}

.ws-card-density-default {
    padding: var(--space-md);
    gap: var(--space-md);
}

.ws-card-density-spacious {
    padding: var(--space-lg);
    gap: var(--space-lg);
}

/* --- 2. Surface Model (3-Axis) --- */

/* Axis A: Material */
.ws-mat-solid {
    background-color: rgba(var(--bg-surface-rgb, 13, 13, 18), var(--ws-card-opacity, 1)) !important;
}

.ws-mat-glass {
    background-color: var(--surface-bg-glass, rgba(var(--bg-base-rgb), var(--ws-card-opacity, 0.50)));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.ws-mat-glass-3d {
    background: linear-gradient(180deg, 
        rgba(var(--bg-surface-rgb), calc(var(--ws-card-opacity, 0.45))) 0%, 
        rgba(var(--bg-surface-rgb), calc(var(--ws-card-opacity, 0.25) * 0.5)) 100%
    );
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    position: relative;
    /* Simulate micro-texture/grain for realism */
    background-image: 
        radial-gradient(at top left, rgba(255,255,255,0.08), transparent 40%),
        radial-gradient(at bottom right, rgba(0,0,0,0.04), transparent 40%);
}

.ws-mat-glassmorphic {
    background-color: rgba(var(--bg-surface-rgb), var(--ws-card-opacity, 0.82)) !important;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(var(--text-strong-rgb), 0.1);
}
.ws-mat-glassmorphic::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(135deg, rgba(var(--text-strong-rgb), 0.08) 0%, transparent 40%);
}

.ws-mat-glassmorphic-rev {
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    position: relative;
    overflow: hidden;
}

:where(html:not(.dark)) .ws-mat-glassmorphic-rev {
    background-color: rgba(15, 23, 42, var(--ws-card-opacity, 0.82)) !important;
    color: #f8fafc !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    /* Force local dark mode variables for text */
    --theme-text: #f8fafc;
    --theme-text-strong: #ffffff;
    --theme-text-muted: rgba(248, 250, 252, 0.65);
    --text-base: #f8fafc;
    --text-strong: #ffffff;
    --text-muted: rgba(248, 250, 252, 0.65);
    --ws-card-title: #ffffff;
    --ws-card-body: #f8fafc;
}

:where(html:not(.dark)) .ws-mat-glassmorphic-rev::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 40%);
}

.dark .ws-mat-glassmorphic-rev {
    background-color: rgba(248, 250, 252, var(--ws-card-opacity, 0.82)) !important;
    color: #0f172a !important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
    /* Force local light mode variables for text */
    --theme-text: #0f172a;
    --theme-text-strong: #000000;
    --theme-text-muted: rgba(15, 23, 42, 0.6);
    --text-base: #0f172a;
    --text-strong: #000000;
    --text-muted: rgba(15, 23, 42, 0.6);
    --ws-card-title: #000000;
    --ws-card-body: #0f172a;
}

.dark .ws-mat-glassmorphic-rev::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
}

.ws-mat-glassmorphic-dark {
    background-color: rgba(15, 23, 42, var(--ws-card-opacity, 0.82)) !important;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    position: relative;
    overflow: hidden;
    color: #f8fafc !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    /* Force ivory text variables for this always-dark surface */
    --theme-text: #f8fafc;
    --theme-text-strong: #ffffff;
    --theme-text-muted: rgba(248, 250, 252, 0.65);
    --text-base: #f8fafc;
    --text-strong: #ffffff;
    --text-muted: rgba(248, 250, 252, 0.65);
    --ws-card-title: #ffffff;
    --ws-card-body: #f8fafc;
}
.ws-mat-glassmorphic-dark::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 40%);
}

.ws-mat-glassmorphic-vibrant {
    background-color: color-mix(in srgb, var(--theme-accent) 18%, rgba(var(--bg-surface-rgb), var(--ws-card-opacity, 0.72))) !important;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(var(--text-strong-rgb), 0.15);
}
.ws-mat-glassmorphic-vibrant::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, transparent 40%);
}
.dark .ws-mat-glassmorphic-vibrant::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.ws-mat-obsidian-glass {
    background: linear-gradient(135deg, rgba(13, 13, 18, var(--ws-card-opacity, 0.88)) 0%, rgba(13, 13, 18, calc(var(--ws-card-opacity, 0.72) * 0.8)) 100%);
    backdrop-filter: blur(40px) saturate(140%) brightness(0.9);
    -webkit-backdrop-filter: blur(40px) saturate(140%) brightness(0.9);
    position: relative;
}
.ws-mat-obsidian-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.15;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events: none;
    border-radius: inherit;
}

.ws-mat-prismatic-glass {
    background: rgba(var(--bg-surface-rgb), var(--ws-card-opacity, 0.05));
    backdrop-filter: blur(24px) saturate(220%);
    -webkit-backdrop-filter: blur(24px) saturate(220%);
}

.ws-mat-mica-surface {
    background: color-mix(in srgb, var(--bg-surface) calc(var(--ws-card-opacity, 0.82) * 100%), transparent);
    backdrop-filter: blur(64px) saturate(280%);
    -webkit-backdrop-filter: blur(64px) saturate(280%);
}

.ws-mat-liquid-chrome {
    background: linear-gradient(135deg, 
        rgba(var(--bg-surface-rgb), 0.95) 0%, 
        rgba(var(--bg-surface-rgb), 0.8) 50%, 
        rgba(var(--bg-surface-rgb), 0.95) 100%
    );
    background-size: 200% 200%;
    animation: ws-chrome-flow 8s ease infinite;
}
@keyframes ws-chrome-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.ws-mat-carbon-premium {
    background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
    background-image: 
        linear-gradient(45deg, rgba(255,255,255,0.03) 25%, transparent 25%), 
        linear-gradient(-45deg, rgba(255,255,255,0.03) 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.03) 75%), 
        linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.03) 75%);
    background-size: 4px 4px;
    position: relative;
    box-shadow: inset 0 0 40px rgba(0,0,0,0.6);
}

.ws-mat-rolex-green {
    background: linear-gradient(135deg, rgba(0, 74, 44, 0.96) 0%, rgba(0, 54, 32, 0.98) 100%);
    backdrop-filter: blur(24px) contrast(1.1);
    -webkit-backdrop-filter: blur(24px) contrast(1.1);
}

.ws-mat-nothing-tech {
    background: rgba(var(--bg-surface-rgb), 0.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background-image: radial-gradient(rgba(var(--text-theme-text-rgb), 0.15) 1px, transparent 1px);
    background-size: 10px 10px;
}

.ws-mat-brushed-gold {
    background: linear-gradient(135deg, #d4af37 0%, #f9e1a0 45%, #b8860b 100%);
    background-size: 200% 200%;
    animation: ws-chrome-flow 12s linear infinite;
    position: relative;
}
.ws-mat-brushed-gold::after {
    content: ""; position: absolute; inset: 0;
    background: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,0.05) 3px, transparent 4px);
    pointer-events: none;
}


.ws-mat-transparent {
    background-color: transparent;
}

/* ── Gradient Materials (Added 2026) ────────────────────────────────── */

.ws-mat-grad-subtle {
    background-color: var(--surface-bg-color, var(--theme-surface));
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0.03) 100%);
}

.ws-mat-grad-linear {
    background-color: var(--surface-bg-color, var(--theme-surface));
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0.08) 100%);
}

.ws-mat-grad-dramatic {
    background-color: var(--surface-bg-color, var(--theme-surface));
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(0, 0, 0, 0.20) 100%);
}

/* ── Ultra-Modern Materials (5.1 Extended Library) ────────────────────────── */

/* Satin: opaque fill + diagonal sheen band (premium fabric/brushed metal) */
.ws-mat-satin {
    background-color: var(--surface-bg-color, var(--theme-surface));
    background-image: linear-gradient(135deg,
            rgba(255, 255, 255, 0.10) 0%,
            rgba(255, 255, 255, 0.00) 45%,
            rgba(255, 255, 255, 0.07) 100%);
}

/* Shimmer: prismatic iridescent sheen with a whisper of brand accent */
.ws-mat-shimmer {
    background-color: var(--surface-bg-color, var(--theme-surface));
    background-image: linear-gradient(115deg,
            rgba(255, 255, 255, 0.00) 15%,
            rgba(255, 255, 255, 0.14) 38%,
            rgba(var(--theme-accent-rgb), 0.06) 50%,
            rgba(255, 255, 255, 0.00) 75%);
}

/* Chrome: metallic horizontal banding (polished steel / aluminium) */
.ws-mat-chrome {
    background-color: var(--surface-bg-color, var(--theme-surface));
    background-image: linear-gradient(180deg,
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0.04) 25%,
            rgba(0, 0, 0, 0.06) 55%,
            rgba(255, 255, 255, 0.12) 80%,
            rgba(255, 255, 255, 0.06) 100%);
}

/* Velvet: corner gradient vignette — deep fabric-like shadow and highlight */
.ws-mat-velvet {
    background-color: var(--surface-bg-color, var(--theme-surface));
    background-image:
        linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, transparent 42%),
        linear-gradient(315deg, rgba(0, 0, 0, 0.14) 0%, transparent 42%),
        radial-gradient(ellipse at center, rgba(255, 255, 255, 0.01) 0%, rgba(0, 0, 0, 0.10) 100%);
}

/* Velvet Dark profile (velvet + tone-strong): always-dark velvet surface with
   guaranteed light text in both light and dark modes. Without this override,
   --theme-text-inverse can resolve to a dark colour in dark mode, leaving
   text unreadable on the dark velvet fill. */
.ws-mat-velvet.ws-tone-strong {
    background-color: rgb(15, 17, 22) !important;
    color: #f8fafc !important;
    --surface-bg-color: rgb(15, 17, 22);
    --text-base: #f8fafc;
    --text-base-rgb: 248, 250, 252;
    --text-strong: #ffffff;
    --text-strong-rgb: 255, 255, 255;
    --text-muted: rgba(248, 250, 252, 0.65);
    --theme-text: #f8fafc;
    --theme-text-rgb: 248, 250, 252;
    --theme-text-strong: #ffffff;
    --theme-text-muted: rgba(248, 250, 252, 0.65);
    --ws-card-title: #ffffff;
    --ws-card-body: #f8fafc;
}

/* Mesh: dual radial accent glow — depth through brand colour gradients */
.ws-mat-mesh {
    background-color: var(--surface-bg-color, var(--theme-surface));
    background-image:
        radial-gradient(ellipse at 18% 82%, rgba(var(--theme-accent-rgb), 0.11) 0%, transparent 55%),
        radial-gradient(ellipse at 82% 18%, rgba(var(--theme-accent-rgb), 0.07) 0%, transparent 50%);
}

/* Mica: Windows 11-style acrylic — translucent, colour-saturated, brand-tinted */
.ws-mat-mica {
    background-color: var(--surface-bg-glass, rgba(var(--bg-base-rgb), 0.50));
    backdrop-filter: blur(28px) saturate(180%) brightness(1.04);
    -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(1.04);
    background-image: linear-gradient(135deg,
            rgba(var(--theme-accent-rgb), 0.04) 0%,
            transparent 55%,
            rgba(var(--theme-accent-rgb), 0.02) 100%);
}

/* Frosted Dark: heavy glass — deep blur, saturation boost, rich frosted depth */
.ws-mat-frosted-dark {
    background-color: var(--surface-bg-glass, rgba(var(--bg-base-rgb), 0.50));
    backdrop-filter: blur(32px) saturate(150%);
    -webkit-backdrop-filter: blur(32px) saturate(150%);
    background-image: linear-gradient(180deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(0, 0, 0, 0.06) 100%);
}

/* Axis B: Tone (Surface Ownership Model) 
   Visible materials (solid/glass) define a local contrast root for descendants.
   Transparent materials inherit context from the parent. */

/* 1. Standard Context: Base & Subtle (Forced Contrast Surfaces) */
:is(.ws-mat-solid, .ws-mat-satin, .ws-mat-shimmer, .ws-mat-chrome, .ws-mat-velvet, .ws-mat-mesh, .ws-mat-glass, .ws-mat-glass-3d, .ws-mat-obsidian-glass, .ws-mat-prismatic-glass, .ws-mat-mica-surface, .ws-mat-liquid-chrome, .ws-mat-carbon-premium, .ws-mat-rolex-green, .ws-mat-nothing-tech, .ws-mat-brushed-gold, .ws-mat-mica, .ws-mat-frosted-dark, .ws-mat-grad-subtle, .ws-mat-grad-linear, .ws-mat-grad-dramatic).ws-tone-base {
    --bg-base: var(--page-bg-base);
    --bg-base-rgb: var(--page-bg-base-rgb);
    --bg-surface: var(--page-bg-base);
    --bg-surface-rgb: var(--page-bg-base-rgb);
    
    --surface-bg-color: var(--bg-surface);
    --surface-bg-glass: rgba(var(--bg-surface-rgb), var(--ws-card-opacity, 0.50));
    
    color: var(--page-text-base);
    --text-base: var(--page-text-base);
    --text-base-rgb: var(--page-text-base-rgb);
    --text-strong: var(--page-text-strong);
    --text-strong-rgb: var(--page-text-strong-rgb);
    --text-muted: var(--page-text-muted);
    --text-muted-rgb: var(--page-text-muted-rgb);

    --theme-text: var(--text-base);
    --theme-text-rgb: var(--text-base-rgb);
    --theme-text-strong: var(--text-strong);
    --theme-text-muted: var(--text-muted);
    --theme-base: var(--bg-base);
    --theme-base-rgb: var(--bg-base-rgb);
    --theme-surface: var(--bg-surface);
    --theme-surface-rgb: var(--bg-surface-rgb);
}

.dark :is(.ws-mat-solid, .ws-mat-satin, .ws-mat-shimmer, .ws-mat-chrome, .ws-mat-grad-subtle, .ws-mat-grad-linear, .ws-mat-grad-dramatic).ws-tone-base {
    background-color: rgba(var(--page-bg-base-rgb), var(--ws-card-opacity, 1)) !important;
}

:is(.ws-mat-solid, .ws-mat-satin, .ws-mat-shimmer, .ws-mat-chrome, .ws-mat-velvet, .ws-mat-mesh, .ws-mat-glass, .ws-mat-glass-3d, .ws-mat-obsidian-glass, .ws-mat-prismatic-glass, .ws-mat-mica-surface, .ws-mat-liquid-chrome, .ws-mat-carbon-premium, .ws-mat-rolex-green, .ws-mat-nothing-tech, .ws-mat-brushed-gold, .ws-mat-mica, .ws-mat-frosted-dark, .ws-mat-grad-subtle, .ws-mat-grad-linear, .ws-mat-grad-dramatic).ws-tone-subtle {
    --bg-base: var(--page-bg-base);
    --bg-base-rgb: var(--page-bg-base-rgb);
    --bg-surface: var(--page-bg-surface);
    --bg-surface-rgb: var(--page-bg-surface-rgb);

    --surface-bg-color: var(--bg-surface);
    --surface-bg-glass: rgba(var(--bg-surface-rgb), var(--ws-card-opacity, 0.55));

    color: var(--page-text-base);
    --text-base: var(--page-text-base);
    --text-base-rgb: var(--page-text-base-rgb);
    --text-strong: var(--page-text-strong);
    --text-strong-rgb: var(--page-text-strong-rgb);
    --text-muted: var(--page-text-muted);
    --text-muted-rgb: var(--page-text-muted-rgb);

    --theme-text: var(--text-base);
    --theme-text-rgb: var(--text-base-rgb);
    --theme-text-strong: var(--text-strong);
    --theme-text-muted: var(--text-muted);
    --theme-base: var(--bg-base);
    --theme-base-rgb: var(--bg-base-rgb);
    --theme-surface: var(--bg-surface);
    --theme-surface-rgb: var(--bg-surface-rgb);
}

:is(.dark, .editor-styles-wrapper.dark, html.dark) :is(.ws-mat-solid, .ws-mat-satin, .ws-mat-shimmer, .ws-mat-chrome, .ws-mat-grad-subtle, .ws-mat-grad-linear, .ws-mat-grad-dramatic).ws-tone-subtle {
    background-color: rgba(var(--page-bg-surface-rgb, 1, 0, 4), var(--ws-card-opacity, 1)) !important;
}

:is(.dark, .editor-styles-wrapper.dark, html.dark) :is(.ws-mat-solid, .ws-mat-satin, .ws-mat-shimmer, .ws-mat-chrome, .ws-mat-grad-subtle, .ws-mat-grad-linear, .ws-mat-grad-dramatic).ws-tone-base {
    background-color: rgba(var(--page-bg-base-rgb, 0, 0, 2), var(--ws-card-opacity, 1)) !important;
}

/* 2. Inverse Context: Strong & Inverted (Flip contrast vs page mode) */
:is(.ws-mat-solid, .ws-mat-satin, .ws-mat-shimmer, .ws-mat-chrome, .ws-mat-velvet, .ws-mat-mesh, .ws-mat-glass, .ws-mat-glass-3d, .ws-mat-obsidian-glass, .ws-mat-prismatic-glass, .ws-mat-mica-surface, .ws-mat-liquid-chrome, .ws-mat-carbon-premium, .ws-mat-rolex-green, .ws-mat-nothing-tech, .ws-mat-brushed-gold, .ws-mat-mica, .ws-mat-frosted-dark, .ws-mat-grad-subtle, .ws-mat-grad-linear, .ws-mat-grad-dramatic).ws-tone-strong {
    --surface-bg-color: var(--theme-surface-strong);
    --surface-bg-glass: rgba(var(--bg-strong-rgb), var(--ws-card-opacity, 0.8));
    color: var(--theme-text-inverse);
    --text-base: var(--theme-text-inverse);
    --text-base-rgb: var(--theme-text-inverse-rgb);
    --text-strong: var(--theme-text-inverse);
    --text-muted: rgba(var(--theme-text-inverse-rgb), 0.7);
    --theme-text: var(--text-base);
    --theme-text-rgb: var(--text-base-rgb);
    --theme-text-strong: var(--text-strong);
    --theme-text-muted: var(--text-muted);
    --ws-card-title: var(--text-strong);
    --ws-card-body: var(--text-base);
}

:is(.ws-mat-solid, .ws-mat-satin, .ws-mat-shimmer, .ws-mat-chrome, .ws-mat-velvet, .ws-mat-mesh, .ws-mat-glass, .ws-mat-glass-3d, .ws-mat-obsidian-glass, .ws-mat-prismatic-glass, .ws-mat-mica-surface, .ws-mat-liquid-chrome, .ws-mat-carbon-premium, .ws-mat-rolex-green, .ws-mat-nothing-tech, .ws-mat-brushed-gold, .ws-mat-mica, .ws-mat-frosted-dark, .ws-mat-grad-subtle, .ws-mat-grad-linear, .ws-mat-grad-dramatic).ws-tone-inverted {
    --surface-bg-color: var(--page-text-base, var(--theme-text));
    --surface-bg-glass: rgba(var(--page-text-base-rgb, var(--text-base-rgb)), var(--ws-card-opacity, 0.8));
    color: var(--theme-surface);
    --text-base: var(--theme-surface);
    --text-base-rgb: var(--bg-base-rgb);
    --text-strong: var(--theme-surface);
    --text-muted: rgba(var(--bg-base-rgb), 0.7);
    --theme-text: var(--text-base);
    --theme-text-rgb: var(--text-base-rgb);
    --theme-text-strong: var(--text-base);
    --theme-text-muted: var(--text-muted);
    --ws-card-title: var(--text-base);
    --ws-card-body: var(--text-base);
}

/* 3. Accent Context: Branded Surface */
:is(.ws-mat-solid, .ws-mat-satin, .ws-mat-shimmer, .ws-mat-chrome, .ws-mat-velvet, .ws-mat-mesh, .ws-mat-glass, .ws-mat-glass-3d, .ws-mat-obsidian-glass, .ws-mat-prismatic-glass, .ws-mat-mica-surface, .ws-mat-liquid-chrome, .ws-mat-carbon-premium, .ws-mat-rolex-green, .ws-mat-nothing-tech, .ws-mat-brushed-gold, .ws-mat-mica, .ws-mat-frosted-dark, .ws-mat-grad-subtle, .ws-mat-grad-linear, .ws-mat-grad-dramatic).ws-tone-accent {
    --surface-bg-color: var(--theme-accent);
    --surface-bg-glass: rgba(var(--theme-accent-rgb), var(--ws-card-opacity, 0.8));
    color: var(--theme-text-on-accent);
    --text-base: var(--theme-text-on-accent);
    --text-base-rgb: var(--theme-text-on-accent-rgb);
    --text-strong: var(--theme-text-on-accent);
    --text-muted: rgba(var(--theme-text-on-accent-rgb), 0.8);
    --theme-text: var(--text-base);
    --theme-text-rgb: var(--text-base-rgb);
    --theme-text-strong: var(--text-base);
    --theme-text-muted: var(--text-muted);
    --ws-card-title: var(--text-base);
    --ws-card-body: var(--text-base);
}

/* 5. Elevated Tone — one step above subtle, readable text */
:is(.ws-mat-solid, .ws-mat-satin, .ws-mat-shimmer, .ws-mat-chrome, .ws-mat-velvet, .ws-mat-mesh, .ws-mat-glass, .ws-mat-glass-3d, .ws-mat-obsidian-glass, .ws-mat-prismatic-glass, .ws-mat-mica-surface, .ws-mat-liquid-chrome, .ws-mat-carbon-premium, .ws-mat-rolex-green, .ws-mat-nothing-tech, .ws-mat-brushed-gold, .ws-mat-mica, .ws-mat-frosted-dark, .ws-mat-grad-subtle, .ws-mat-grad-linear, .ws-mat-grad-dramatic).ws-tone-elevated {
    --surface-bg-color: var(--bg-subtle, var(--page-bg-surface));
    --surface-bg-glass: rgba(var(--bg-subtle-rgb, var(--page-bg-surface-rgb)), var(--ws-card-opacity, 0.65));
    --bg-base-rgb: var(--page-bg-base-rgb);
    --bg-surface-rgb: var(--bg-subtle-rgb, var(--page-bg-surface-rgb));

    color: var(--text-base);
    --text-base: var(--page-text-base);
    --text-base-rgb: var(--page-text-base-rgb);
    --text-strong: var(--page-text-strong);
    --text-strong-rgb: var(--page-text-strong-rgb);
    --text-muted: var(--page-text-muted);
    --text-muted-rgb: var(--page-text-muted-rgb);

    --theme-text: var(--text-base);
    --theme-text-rgb: var(--text-base-rgb);
    --theme-text-strong: var(--text-strong);
    --theme-text-muted: var(--text-muted);
    --ws-card-title: var(--text-strong);
    --ws-card-body: var(--text-base);
}

/* 6. Accent-Soft Tone — light accent wash, readable text, branded without full fill */
:is(.ws-mat-solid, .ws-mat-satin, .ws-mat-shimmer, .ws-mat-chrome, .ws-mat-velvet, .ws-mat-mesh, .ws-mat-glass, .ws-mat-glass-3d, .ws-mat-obsidian-glass, .ws-mat-prismatic-glass, .ws-mat-mica-surface, .ws-mat-liquid-chrome, .ws-mat-carbon-premium, .ws-mat-rolex-green, .ws-mat-nothing-tech, .ws-mat-brushed-gold, .ws-mat-mica, .ws-mat-frosted-dark, .ws-mat-grad-subtle, .ws-mat-grad-linear, .ws-mat-grad-dramatic).ws-tone-accent-soft {
    --surface-bg-color: var(--bg-accent-weak, var(--page-bg-surface));
    --surface-bg-glass: rgba(var(--theme-accent-rgb), var(--ws-card-opacity, 0.12));
    --bg-base-rgb: var(--page-bg-base-rgb);
    --bg-surface-rgb: var(--page-bg-base-rgb);

    color: var(--page-text-base);
    --text-base: var(--page-text-base);
    --text-base-rgb: var(--page-text-base-rgb);
    --text-strong: var(--page-text-strong);
    --text-strong-rgb: var(--page-text-strong-rgb);
    --text-muted: var(--page-text-muted);
    --text-muted-rgb: var(--page-text-muted-rgb);

    --theme-text: var(--text-base);
    --theme-text-rgb: var(--text-base-rgb);
    --theme-text-strong: var(--text-strong);
    --theme-text-muted: var(--text-muted);
    --ws-card-title: var(--text-strong);
    --ws-card-body: var(--text-base);
}

/* Pass-through (Transparent)
   Transparent materials inherit the visual surface from their parent but must still
   own local text contrast — otherwise descendants can inherit a stale color from an
   ancestor that was resolved in a different mode. Shadow text tokens from
   --page-text-* (which are swapped by .dark on :root) so readability follows the
   current light/dark mode regardless of where the card is placed. */
.ws-mat-transparent.ws-tone-base,
.ws-mat-transparent.ws-tone-subtle,
.ws-mat-transparent.ws-tone-elevated,
.ws-mat-transparent.ws-tone-accent-soft {
    --surface-bg-color: transparent;
    color: var(--page-text-base);
    --text-base: var(--page-text-base);
    --text-base-rgb: var(--page-text-base-rgb);
    --text-strong: var(--page-text-strong);
    --text-strong-rgb: var(--page-text-strong-rgb);
    --text-muted: var(--page-text-muted);
    --text-muted-rgb: var(--page-text-muted-rgb);
    --theme-text: var(--text-base);
    --theme-text-rgb: var(--text-base-rgb);
    --theme-text-strong: var(--text-strong);
    --theme-text-muted: var(--text-muted);
    --ws-card-title: var(--text-strong);
    --ws-card-body: var(--text-base);
}

.ws-mat-transparent.ws-tone-strong {
    --surface-bg-color: transparent;
    color: var(--theme-text-inverse);
    --text-base: var(--theme-text-inverse);
    --text-base-rgb: var(--theme-text-inverse-rgb);
    --text-strong: var(--theme-text-inverse);
    --text-muted: rgba(var(--theme-text-inverse-rgb), 0.7);
    --theme-text: var(--text-base);
    --theme-text-rgb: var(--text-base-rgb);
    --theme-text-strong: var(--text-strong);
    --theme-text-muted: var(--text-muted);
    --ws-card-title: var(--text-strong);
    --ws-card-body: var(--text-base);
}

.ws-mat-transparent.ws-tone-accent {
    --surface-bg-color: transparent;
    color: var(--theme-text-on-accent);
    --text-base: var(--theme-text-on-accent);
    --text-base-rgb: var(--theme-text-on-accent-rgb);
    --text-strong: var(--theme-text-on-accent);
    --text-muted: rgba(var(--theme-text-on-accent-rgb), 0.8);
    --theme-text: var(--text-base);
    --theme-text-rgb: var(--text-base-rgb);
    --theme-text-strong: var(--text-base);
    --theme-text-muted: var(--text-muted);
    --ws-card-title: var(--text-base);
    --ws-card-body: var(--text-base);
}

.ws-mat-transparent.ws-tone-inverted {
    --surface-bg-color: transparent;
    color: var(--theme-surface);
    --text-base: var(--theme-surface);
    --text-base-rgb: var(--bg-base-rgb);
    --text-strong: var(--theme-surface);
    --text-muted: rgba(var(--bg-base-rgb), 0.7);
    --theme-text: var(--text-base);
    --theme-text-rgb: var(--text-base-rgb);
    --theme-text-strong: var(--text-base);
    --theme-text-muted: var(--text-muted);
    --ws-card-title: var(--text-base);
    --ws-card-body: var(--text-base);
}

/* ── Translucent modifier (5.1) ────────────────────────────────────────────
   Pairs with any .ws-mat-* class. Blends the resolved surface colour 60%
   toward transparent so the section background shows through. Picked via
   the "(translucent)" entries in the Surface Profile / Material dropdowns. */
.ws-translucent {
    background-color: color-mix(in srgb,
        var(--surface-bg-color, var(--theme-surface)) 60%,
        transparent
    ) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Axis C: Frame */
.ws-frame-none {
    border: none !important;
}

.ws-frame-subtle {
    border: 1px solid var(--theme-border-subtle, rgba(128, 128, 128, 0.18));
}

/* Dark mode: drop shadows are invisible on dark backgrounds.
   Replace with a white edge ring + faint accent glow (Material Design 3 / Linear pattern).
   Scoped only to frame classes — does not touch any other shadow consumers. */
.dark .ws-frame-subtle,
.dark.ws-frame-subtle {
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 0 24px rgba(var(--theme-accent-rgb), 0.08);
}

.ws-frame-strong {
    border: 2px solid var(--theme-border-strong, rgba(128, 128, 128, 0.40));
}

.dark .ws-frame-strong,
.dark.ws-frame-strong {
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.07),
        0 0 32px rgba(var(--theme-accent-rgb), 0.12);
}

.ws-frame-accent {
    border: 1px solid var(--theme-accent, rgba(var(--theme-accent-rgb), 1));
}

.ws-frame-glow {
    box-shadow: 0 0 18px var(--theme-glow-color, rgba(var(--theme-accent-rgb), 0.45));
    border: 1px solid var(--theme-glow-color, rgba(var(--theme-accent-rgb), 0.5));
}

.ws-frame-neon {
    box-shadow:
        0 0 10px var(--theme-glow-color, rgba(var(--theme-accent-rgb), 0.55)),
        0 0 28px var(--theme-glow-color, rgba(var(--theme-accent-rgb), 0.28)),
        inset 0 0 10px var(--theme-glow-color, rgba(var(--theme-accent-rgb), 0.06));
    border: 1px solid var(--theme-accent, rgba(var(--theme-accent-rgb), 0.85));
}

.ws-frame-realistic-bezel {
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 
        inset 0 1px 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
        0 10px 30px -5px rgba(0, 0, 0, 0.15),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.dark .ws-frame-realistic-bezel,
.dark.ws-frame-realistic-bezel {
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 
        inset 0 1px 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 15px 35px -5px rgba(0, 0, 0, 0.35),
        0 5px 15px -3px rgba(0, 0, 0, 0.2);
}

.ws-frame-obsidian-edge {
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 4px 6px -1px rgba(0, 0, 0, 0.2),
        0 2px 4px -1px rgba(0, 0, 0, 0.1);
}

.ws-frame-spectral-rim {
    position: relative;
    border: 1px solid transparent;
    background: linear-gradient(var(--bg-surface), var(--bg-surface)) padding-box,
                linear-gradient(135deg, rgba(255, 0, 128, 0.4), rgba(121, 40, 202, 0.4), rgba(0, 112, 243, 0.4), rgba(0, 223, 216, 0.4)) border-box;
}

.ws-frame-mica-halo {
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 20px rgba(var(--bg-surface-rgb), 0.3);
}

.ws-frame-chrome-bevel {
    border: 1px solid #d1d5db;
    box-shadow: 
        inset 0 1px 0 0 #ffffff,
        inset 0 -1px 0 0 #9ca3af,
        0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.ws-frame-gold-rim {
    border: 1px solid #d4af37;
    box-shadow: 
        inset 0 0 0 1px rgba(255, 255, 255, 0.4),
        0 0 10px rgba(212, 175, 55, 0.3);
}

.ws-frame-carbon-bezel {
    border: 1px solid #333;
    box-shadow: 
        inset 0 1px 1px rgba(255,255,255,0.1),
        0 4px 10px rgba(0,0,0,0.5);
}

.ws-frame-cyber-neon {
    border: 1px solid #00f3ff;
    box-shadow: 
        0 0 5px #00f3ff,
        inset 0 0 5px #00f3ff;
}




/* Dark mode: Tailwind shadow utilities use rgba(0,0,0,*) — invisible on dark backgrounds.
   Scoped ONLY to ws-mat-* surfaces (cards, sections) — never touches dropdowns, tooltips, or UI chrome.
   Replaces black depth shadows with a white-edge ring + diffuse white glow to communicate elevation. */
.dark [class*="ws-mat-"].shadow-sm  { box-shadow: 0 0 20px rgba(255,255,255,0.12), 0 0 40px rgba(255,255,255,0.06); }
.dark [class*="ws-mat-"].shadow     { box-shadow: 0 0 28px rgba(255,255,255,0.14), 0 0 56px rgba(255,255,255,0.07); }
.dark [class*="ws-mat-"].shadow-md  { box-shadow: 0 0 36px rgba(255,255,255,0.16), 0 0 72px rgba(255,255,255,0.08); }
.dark [class*="ws-mat-"].shadow-lg  { box-shadow: 0 0 48px rgba(255,255,255,0.18), 0 0 96px rgba(255,255,255,0.09); }
.dark [class*="ws-mat-"].shadow-xl  { box-shadow: 0 0 60px rgba(255,255,255,0.20), 0 0 120px rgba(255,255,255,0.10); }
.dark [class*="ws-mat-"].shadow-2xl { box-shadow: 0 0 80px rgba(255,255,255,0.22), 0 0 160px rgba(255,255,255,0.11); }

/* --- 3. Width & Height --- */
.ws-width-contained {
    max-width: var(--theme-max-width, 1280px);
    margin-left: auto;
    margin-right: auto;
}

.ws-width-full {
    width: 100%;
    max-width: none;
}

/* --- 4. Inner Container Constraints --- */
.ws-container-inner {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

.ws-width-contained .ws-container-inner {
    max-width: var(--theme-max-width, 1280px);
}

.ws-width-full .ws-container-inner {
    max-width: none;
}

/* --- Badge Primitive --- */
.ws-badge-primitive {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.75rem;
    /* 12px default */
    white-space: nowrap;
    border-radius: var(--radius-full);
    transition: all var(--duration-normal) var(--ease-smooth);
}

/* Sizes */
.ws-badge-sm {
    padding: 0.15rem 0.6rem;
    font-size: 0.625rem;
}

.ws-badge-md {
    padding: 0.35rem 1rem;
    font-size: 0.75rem;
}

.ws-badge-lg {
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
}

/* Position */
.ws-badge-absolute {
    position: absolute;
}

.ws-badge-relative {
    position: relative;
}

/* ── Axial Badge DNA (v5.5 Omni-Badge) ──────────────────────────────────────
   A dedicated 3rd-axis model for micro-components.
   Optimized for small sizes (thinner borders, tighter blurs).
   ─────────────────────────────────────────────────────────────────────── */

.ws-badge-primitive {
    --badge-bg: var(--theme-accent);
    --badge-text: var(--theme-text-on-accent, #fff);
    --badge-border-color: transparent;
    --badge-border-width: 1px;
    --badge-border-style: solid;
    --badge-blur: none;
    --badge-shadow: none;
    --badge-saturate: 100%;
    --badge-brightness: 100%;

    background: var(--badge-bg);
    color: var(--badge-text);
    border: var(--badge-border-width) var(--badge-border-style) var(--badge-border-color);
    backdrop-filter: var(--badge-blur) saturate(var(--badge-saturate)) brightness(var(--badge-brightness));
    -webkit-backdrop-filter: var(--badge-blur) saturate(var(--badge-saturate)) brightness(var(--badge-brightness));
    box-shadow: var(--badge-shadow);
    isolation: isolate;
}

/* ── Badge Materials ── */
.ws-badge-mat-solid { --badge-blur: none; }
.ws-badge-mat-glass { 
    --badge-bg: rgba(var(--theme-accent-rgb), 0.15); 
    --badge-blur: blur(8px); 
    --badge-saturate: 180%;
    --badge-border-color: rgba(var(--theme-accent-rgb), 0.25);
}
.ws-badge-mat-glass-3d {
    --badge-bg: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    --badge-blur: blur(12px);
    --badge-border-color: rgba(255,255,255,0.2);
    --badge-shadow: 0 4px 12px rgba(0,0,0,0.1), inset 0 0 0 0.5px rgba(255,255,255,0.3);
}
.ws-badge-mat-obsidian-glass {
    --badge-bg: rgba(15, 23, 42, 0.6);
    --badge-blur: blur(10px);
    --badge-text: #fff;
    --badge-border-color: rgba(255,255,255,0.1);
}
.ws-badge-mat-liquid-chrome {
    --badge-bg: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 50%, #94a3b8 100%);
    --badge-text: #1e293b;
    --badge-border-color: rgba(255,255,255,0.4);
}
.ws-badge-mat-prismatic-glass {
    --badge-bg: rgba(var(--theme-accent-rgb), 0.05);
    --badge-blur: blur(6px);
    --badge-saturate: 250%;
    --badge-border-color: transparent;
}
.ws-badge-mat-brushed-gold {
    --badge-bg: linear-gradient(135deg, #d4af37, #f1c40f, #d4af37);
    --badge-text: #453503;
    --badge-border-color: rgba(255,255,255,0.3);
}
.ws-badge-mat-brushed-platinum { background: linear-gradient(135deg, #e5e4e2, #ffffff, #b7b8b7); color: #333; text-shadow: 0 1px 0 rgba(255,255,255,0.5); }
.ws-badge-mat-pearlescent-silk   { background: linear-gradient(135deg, #fff5f5, #f0f4ff, #fff5f5); background-size: 200% 200%; animation: ws-pearl-shift 10s ease infinite; color: #555; }
.ws-badge-mat-transparent      { background: transparent; }

@keyframes ws-pearl-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ── Frame DNA ── */
.ws-badge-frame-none         { border: none; }
.ws-badge-frame-subtle       { border: 1px solid color-mix(in srgb, currentColor, transparent 80%); }
.ws-badge-frame-strong       { border: 2px solid currentColor; }
.ws-badge-frame-glow         { border: 1px solid currentColor; box-shadow: 0 0 12px color-mix(in srgb, currentColor, transparent 60%); }
.ws-badge-frame-spectral-rim { border: 1px solid transparent; background-clip: padding-box, border-box; background-origin: border-box; background-image: linear-gradient(to right, white, white), linear-gradient(135deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000); }
.ws-badge-frame-gold-rim     { border: 1.5px solid #d4af37; box-shadow: inset 0 0 4px #f9e27d; }
.ws-badge-frame-diamond-cut  { border: 1px solid rgba(255,255,255,0.4); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -1px 0 rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.1); }
.ws-badge-frame-obsidian-edge { border: 1px solid #333; box-shadow: inset 0 0 8px #000; }
.ws-badge-frame-chrome-bevel { border: 1px solid #fff; box-shadow: inset 0 1.5px 0 #fff, inset 0 -1.5px 0 #888, 0 2px 4px rgba(0,0,0,0.2); }
.ws-badge-frame-neon         { border: 1.5px solid currentColor; box-shadow: 0 0 10px currentColor, inset 0 0 5px currentColor; }

/* ── Badge Tones (Color Mapping) ── */
.ws-badge-tone-accent { --badge-bg: var(--theme-accent); --badge-text: var(--theme-text-on-accent); }
.ws-badge-tone-subtle { --badge-bg: rgba(var(--text-base-rgb), 0.08); --badge-text: var(--text-base); }
.ws-badge-tone-strong { --badge-bg: var(--theme-surface-strong); --badge-text: var(--theme-text-inverse); }
.ws-badge-tone-accent-soft { --badge-bg: rgba(var(--theme-accent-rgb), 0.12); --badge-text: var(--theme-accent); --badge-border-color: rgba(var(--theme-accent-rgb), 0.2); }
.ws-badge-tone-inverted { --badge-bg: #fff; --badge-text: #000; }
.ws-badge-tone-base { --badge-bg: transparent; --badge-text: currentColor; }

/* ── Badge Frames ── */
.ws-badge-frame-none { --badge-border-width: 0; }
.ws-badge-frame-subtle { --badge-border-color: rgba(var(--text-base-rgb), 0.15); }
.ws-badge-frame-strong { --badge-border-color: var(--text-base); --badge-border-width: 1.5px; }
.ws-badge-frame-glow { --badge-border-color: var(--theme-accent); --badge-shadow: 0 0 12px rgba(var(--theme-accent-rgb), 0.4); }
.ws-badge-frame-spectral-rim {
    border-image: linear-gradient(45deg, #ff0080, #7928ca, #0070f3) 1;
    --badge-border-width: 1.5px;
}
.ws-badge-frame-gold-rim { --badge-border-color: #d4af37; --badge-shadow: 0 0 8px rgba(212, 175, 55, 0.3); }
.ws-badge-frame-neon { --badge-border-color: var(--theme-accent); --badge-shadow: 0 0 8px var(--theme-accent), inset 0 0 4px var(--theme-accent); }

/* ── Badge Textures ── */
.ws-badge-tex-grain::before {
    content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0.2;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
.ws-badge-tex-grid::before {
    content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0.15;
    background-size: 4px 4px;
    background-image: radial-gradient(circle, currentColor 0.5px, transparent 0.5px);
}

/* ── Badge Glory (Visual Effects) ── */
.ws-badge-glo-shimmer {
    position: relative; overflow: hidden;
}
.ws-badge-glo-shimmer::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, var(--badge-shimmer-color, rgba(255,255,255,0.4)), transparent);
    transform: translateX(-100%);
    animation: ws-badge-shimmer 3s infinite;
}
@keyframes ws-badge-shimmer {
    100% { transform: translateX(100%); }
}

.ws-badge-glo-shimmer-slow {
    position: relative; overflow: hidden;
}
.ws-badge-glo-shimmer-slow::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, var(--badge-shimmer-color, rgba(255,255,255,0.4)), transparent);
    transform: translateX(-100%);
    animation: ws-badge-shimmer-slow 8s infinite;
}
@keyframes ws-badge-shimmer-slow {
    0% { transform: translateX(-100%); }
    20% { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}

/* ── Badge Variant Overrides (5.5) ── */

/* Force Light Aesthetics (regardless of theme) */
.ws-badge-variant-force-light {
    --bg-base-rgb: 255, 255, 255;
    --bg-surface-rgb: 248, 250, 252;
    --text-base-rgb: 15, 23, 42;
    --text-strong-rgb: 0, 0, 0;
    --theme-text: #0f172a;
    --theme-text-strong: #000000;
    --theme-text-muted: rgba(15, 23, 42, 0.6);
    --text-base: #0f172a;
    --text-strong: #000000;
    --badge-shimmer-color: rgba(15, 23, 42, 0.15); /* Dark shimmer for light background */
}

/* Force Dark Aesthetics (regardless of theme) */
.ws-badge-variant-force-dark {
    --bg-base-rgb: 15, 23, 42;
    --bg-surface-rgb: 30, 41, 59;
    --text-base-rgb: 248, 250, 252;
    --text-strong-rgb: 255, 255, 255;
    --theme-text: #f8fafc;
    --theme-text-strong: #ffffff;
    --theme-text-muted: rgba(248, 250, 252, 0.65);
    --text-base: #f8fafc;
    --text-strong: #ffffff;
    --badge-shimmer-color: rgba(255, 255, 255, 0.4);
}

/* Reverse Mode Logic */
:where(html:not(.dark)) .ws-badge-variant-reverse {
    --bg-base-rgb: 15, 23, 42;
    --bg-surface-rgb: 30, 41, 59;
    --text-base-rgb: 248, 250, 252;
    --text-strong-rgb: 255, 255, 255;
    --theme-text: #f8fafc;
    --theme-text-strong: #ffffff;
    --theme-text-muted: rgba(248, 250, 252, 0.65);
    --text-base: #f8fafc;
    --text-strong: #ffffff;
    --badge-shimmer-color: rgba(255, 255, 255, 0.4);
}
.dark .ws-badge-variant-reverse {
    --bg-base-rgb: 255, 255, 255;
    --bg-surface-rgb: 248, 250, 252;
    --text-base-rgb: 15, 23, 42;
    --text-strong-rgb: 0, 0, 0;
    --theme-text: #0f172a;
    --theme-text-strong: #000000;
    --theme-text-muted: rgba(15, 23, 42, 0.6);
    --text-base: #0f172a;
    --text-strong: #000000;
    --badge-shimmer-color: rgba(15, 23, 42, 0.15);
}

/* Apply Local Variable Overrides to actual properties */
.ws-badge-variant-force-light,
.ws-badge-variant-force-dark,
.ws-badge-variant-reverse {
    background-color: var(--badge-bg, rgba(var(--bg-surface-rgb), 0.5));
    color: var(--theme-text) !important;
}

/* Ensure Tone Accent still works but follows local contrast if forced */
.ws-badge-variant-force-light.ws-badge-tone-accent {
    --badge-text: #ffffff; /* We keep accent buttons white text usually */
    --badge-shimmer-color: rgba(255, 255, 255, 0.4);
}

/* ─────────────────────────────────────────────────────────────────────────────
   OMNI-BADGE 5.5 STRUCTURAL & PULSE ENGINES
   ───────────────────────────────────────────────────────────────────────────── */

/* Radius Axes */
.ws-radius-none  { border-radius: 0 !important; }
.ws-radius-sm    { border-radius: 4px !important; }
.ws-radius-md    { border-radius: 8px !important; }
.ws-radius-lg    { border-radius: 14px !important; }
.ws-radius-pill  { border-radius: 9999px !important; }

/* Pulse Engine (5.5) */
.ws-pulse-primitive {
    isolation: isolate;
}

.ws-pulse-radar {
    animation: ws-pulse-radar-ripple 2.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
@keyframes ws-pulse-radar-ripple {
    0%   { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(4); opacity: 0; }
}

.ws-pulse-breathe {
    animation: ws-pulse-breathe-glow 3s ease-in-out infinite;
}
@keyframes ws-pulse-breathe-glow {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50%      { transform: scale(1.8); opacity: 0.1; }
}

.ws-pulse-glitch {
    animation: ws-pulse-glitch-jitter 0.2s steps(2) infinite;
}
@keyframes ws-pulse-glitch-jitter {
    0%   { transform: translate(0); filter: hue-rotate(0deg); }
    50%  { transform: translate(1px, -1px); filter: hue-rotate(90deg); }
    100% { transform: translate(-1px, 1px); filter: hue-rotate(180deg); }
}

.ws-badge-glo-spectral {
    animation: ws-badge-spectral 4s linear infinite;
}
@keyframes ws-badge-spectral {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* ── Backward Compatibility Aliases (Mapped to DNA) ── */
.ws-badge-preset-accent { @apply ws-badge-mat-solid ws-badge-tone-accent; }
.ws-badge-preset-glass { @apply ws-badge-mat-glass ws-badge-tone-accent-soft; }
.ws-badge-preset-glass-glow { @apply ws-badge-mat-glass ws-badge-tone-accent-soft ws-badge-frame-glow; }
.ws-badge-preset-outline { @apply ws-badge-mat-transparent ws-badge-tone-base ws-badge-frame-strong; }
.ws-badge-preset-strong { @apply ws-badge-mat-solid ws-badge-tone-strong; }
.ws-badge-preset-holographic { @apply ws-badge-mat-prismatic-glass ws-badge-tone-accent-soft ws-badge-frame-spectral-rim ws-badge-glo-spectral; }

@keyframes ws-holographic-sweep {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.ws-badge-preset-cyber-punk {
    background-color: #000;
    color: #0ff;
    border: 1px solid #f0f;
    text-shadow: 0 0 5px #0ff;
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.4);
    font-family: monospace;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ws-badge-preset-under-glow {
    background-color: var(--bg-surface);
    color: var(--theme-accent);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 10px 20px -5px rgba(var(--theme-accent-rgb), 0.4);
}

.ws-badge-preset-glass-sheen {
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.15) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.4), 0 4px 15px rgba(0,0,0,0.1);
}

.ws-badge-preset-pill {
    background-color: var(--theme-accent);
    color: #fff;
    border-radius: 9999px !important;
    padding: 0.35em 1.2em;
    letter-spacing: 0.05em;
}

.ws-badge-preset-leaf {
    background-color: var(--theme-accent);
    color: #fff;
    border-radius: 12px 2px 12px 2px !important;
    padding: 0.35em 1em;
}

.ws-badge-preset-neo-brutalist {
    background-color: var(--theme-accent);
    color: #000;
    border: 2px solid #000 !important;
    box-shadow: 3px 3px 0 #000;
    font-weight: 900;
}

.ws-badge-preset-frosted-mint {
    background-color: rgba(52, 211, 153, 0.15) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #064e3b !important;
    border: 1px solid rgba(52, 211, 153, 0.4) !important;
}

.ws-badge-preset-gold-leaf {
    background: linear-gradient(135deg, #d4af37 0%, #f9e27d 50%, #b8860b 100%) !important;
    color: #3b2a00 !important;
    border: none;
    box-shadow: 0 4px 12px rgba(184, 134, 11, 0.4);
    font-weight: 800;
}

/* ── Pulse Badge Primitives ── */
.ws-badge-pulse-primitive {
    --ws-pulse-rgb: var(--theme-accent-rgb); /* Default Fallback */
}

.ws-badge-pulse-primitive .ws-pulse-core {
    box-shadow: 0 0 10px rgba(var(--ws-pulse-rgb), 0.5);
}

.ws-badge-pulse-breathe .ws-pulse-core {
    animation: ws-pulse-breathe 2s ease-in-out infinite;
}

@keyframes ws-pulse-breathe {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 12px rgba(var(--ws-pulse-rgb), 0.6); }
    50% { opacity: 0.4; transform: scale(0.85); box-shadow: 0 0 4px rgba(var(--ws-pulse-rgb), 0.2); }
}

.ws-badge-pulse-radar .ws-pulse-ripple {
    animation: ws-pulse-radar 2.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
    transform-origin: center;
    pointer-events: none;
}
.ws-badge-pulse-radar .ripple-2 {
    animation-delay: 1.25s;
}

@keyframes ws-pulse-radar {
    0% { transform: scale(1); opacity: 0.8; background-color: rgba(var(--ws-pulse-rgb), 0.3); }
    100% { transform: scale(4); opacity: 0; background-color: rgba(var(--ws-pulse-rgb), 0); }
}



/* =========================================
   5. Button Interaction Utilities (5.1)
   Decoupled motion behaviors governed by 5.1 Role Architecture.
   ========================================= */

.btn-interaction-none {}

.btn-interaction-scale {
    transition: transform var(--duration-fast) var(--ease-smooth);
}

.btn-interaction-scale:hover {
    transform: scale(1.05);
}

.btn-interaction-scale:active {
    transform: scale(0.96);
}

.btn-interaction-float {
    transition: transform var(--duration-normal) var(--ease-smooth), box-shadow var(--duration-normal) var(--ease-smooth);
}

.btn-interaction-float:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.btn-interaction-float:active {
    transform: translateY(-1px);
}

.btn-interaction-glow {
    transition: box-shadow var(--duration-normal) var(--ease-smooth), text-shadow var(--duration-normal) var(--ease-smooth);
}

.btn-interaction-glow:hover {
    box-shadow: 0 0 20px color-mix(in srgb, currentColor 40%, transparent);
    text-shadow: 0 0 10px currentColor;
}

/* Slide Right Interaction (requires hover-bg-slide child or background-position) */
.btn-interaction-slide-right {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    z-index: 1;
}

.btn-interaction-slide-right.hover-bg-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: currentColor;
    opacity: 0.1;
    transition: left var(--duration-normal) var(--ease-smooth);
    z-index: 0;
}

.btn-interaction-slide-right.hover-bg-slide:hover::before {
    left: 0;
}

/* =========================================
   6. Semantic Typography Roles (5.1)
   Maps global typography tokens to utility classes.
   ========================================= */

/* Role classes govern font-family, style, weight, tracking, line-height.
   Font-size and the section weight/line-height defaults are emitted via a
   separate `:where()` rule below — `:where()` has zero specificity, so any
   explicit utility class on the same element (`text-fluid-h1`, `text-hero-title`,
   `text-xl`, …) always wins. That's how heroes keep their bespoke sizes while
   every non-hero block gets the canonical default for free.
   Plural and singular spellings (`-titles` / `-title`) are both supported
   because `websly_get_typography_class()` returns either depending on the
   resolved role string. */
.ws-type-titles,
.ws-type-title {
    font-family: var(--ws-font-titles);
    font-style: var(--style-titles);
    font-weight: var(--ws-font-weight-titles, var(--ws-section-title-weight, 700));
    letter-spacing: var(--ws-letter-spacing-titles, var(--ws-section-title-letter-spacing, -0.02em));
    line-height: var(--ws-line-height-titles, var(--ws-section-title-line-height, 1.1));
}
.ws-type-subtitles,
.ws-type-subtitle {
    font-family: var(--ws-font-subtitles);
    font-style: var(--style-subtitles);
    font-weight: var(--ws-font-weight-subtitles, var(--ws-section-subtitle-weight, 400));
    letter-spacing: var(--ws-letter-spacing-subtitles, inherit);
    line-height: var(--ws-line-height-subtitles, var(--ws-section-subtitle-line-height, 1.6));
}

/* Canonical section title/subtitle size zero-specificity default was moved to top of typography tokens block to resolve specificity conflicts with h2 browser base reset styles. */
.ws-type-body      { font-family: var(--ws-font-body);      font-style: var(--style-body);      font-weight: var(--ws-font-weight-body, inherit);      letter-spacing: var(--ws-letter-spacing-body, inherit);      line-height: var(--ws-line-height-body, inherit); }
.ws-type-buttons   { font-family: var(--ws-font-buttons);   font-style: var(--style-buttons);   font-weight: var(--ws-font-weight-buttons, inherit);   letter-spacing: var(--ws-letter-spacing-buttons, inherit);   line-height: var(--ws-line-height-buttons, inherit); }
.ws-type-navbar    { font-family: var(--ws-font-navbar);    font-style: var(--style-navbar);    font-weight: var(--ws-font-weight-navbar, inherit);    letter-spacing: var(--ws-letter-spacing-navbar, inherit);    line-height: var(--ws-line-height-navbar, inherit); }
.ws-type-badge     { font-family: var(--ws-font-badge);     font-style: var(--style-badge);     font-weight: var(--ws-font-weight-badge, inherit);     letter-spacing: var(--ws-letter-spacing-badge, inherit);    line-height: var(--ws-line-height-badge, inherit); }
.ws-type-label     { font-family: var(--ws-font-label);     font-style: var(--style-label);     font-weight: var(--ws-font-weight-label, inherit);     letter-spacing: var(--ws-letter-spacing-label, inherit);     line-height: var(--ws-line-height-label, inherit); }
.ws-type-other     { font-family: var(--ws-font-other);     font-style: var(--style-other);     font-weight: var(--ws-font-weight-other, inherit);     letter-spacing: var(--ws-letter-spacing-other, inherit);     line-height: var(--ws-line-height-other, inherit); }

/* =========================================
   7. Checkatrade Badge Block (Websly 5.1 Premier)
   ========================================= */
.ws-checkatrade-block {
    overflow: hidden;
    width: 100%;
}

.ws-checkatrade-inner {
    width: 100%;
    max-width: var(--theme-max-width, 1280px);
    margin: 0 auto;
    padding: 0 var(--space-md, 1.5rem);
}

.ws-checkatrade-flex-wrap {
    display: flex;
    align-items: center;
    gap: 2rem;
    width: 100%;
}

/* Layout: Inline Strip */
.ws-layout-inline-strip .ws-checkatrade-flex-wrap {
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: clamp(1rem, 2vw, 2rem) 0;
}

/* Layout: Feature Card */
.ws-layout-feature-card {
    display: flex;
    justify-content: center;
    align-items: center;
}
.ws-layout-feature-card .ws-checkatrade-flex-wrap {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    padding: clamp(2rem, 5vw, 4rem);
    background: var(--bg-surface);
    border-radius: var(--radius-card, 1.5rem);
    border: 1px solid var(--border-subtle, rgba(128,128,128,0.15));
    max-width: 800px;
    margin: 0 auto;
}

/* Layout: Trust Emblem (Logo Centric) */
.ws-layout-trust-emblem .ws-checkatrade-flex-wrap {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.25rem;
}
.ws-layout-trust-emblem .ws-checkatrade-badge-container {
    padding: 2.5rem;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.ws-layout-trust-emblem .ws-checkatrade-logo-wrap {
    height: 60px;
    width: auto;
}
.ws-layout-trust-emblem .ws-checkatrade-img {
    max-height: 60px;
}
.ws-layout-trust-emblem .ws-emblem-content {
    margin-top: 1rem;
}
.ws-layout-trust-emblem .ws-checkatrade-title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    letter-spacing: -0.03em;
}


/* Content Styling */
.ws-checkatrade-title {
    font-family: var(--font-titles);
    font-size: clamp(1.25rem, 2.5vw, 1.875rem);
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    color: var(--theme-text);
    line-height: 1.2;
}

.ws-checkatrade-subtitle {
    font-size: clamp(0.875rem, 1vw, 1rem);
    opacity: 0.7;
    margin: 0;
    font-family: var(--font-body);
}

/* Badge Container — uses surface tokens for automatic dark/light adaptation */
.ws-checkatrade-badge-container {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem 2rem;
    text-decoration: none !important;
    transition: all 0.4s var(--ease-smooth, cubic-bezier(0.2, 1, 0.3, 1));
    overflow: hidden;
    z-index: 1;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle, rgba(128,128,128,0.15));
    border-radius: var(--radius-card, 1.25rem);
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    color: var(--text-base);
    flex-shrink: 0;
    min-width: 180px;
}

.ws-checkatrade-badge-container:hover {
    border-color: var(--theme-accent, #00a651);
}

/* Radius Profiles */
.ws-radius-sharp { border-radius: 4px; }
.ws-radius-curved { border-radius: 16px; }
.ws-radius-pill { border-radius: 100px; }

/* Elements */
.ws-checkatrade-tagline {
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, #888);
    opacity: 0.8;
    line-height: 1;
    white-space: nowrap;
}

.ws-checkatrade-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    flex-shrink: 0;
    transition: height 0.3s ease;
}
.ws-checkatrade-svg {
    height: 1.5rem;
    width: auto;
    display: block;
}
.ws-checkatrade-img {
    height: 3.5rem; /* Increased size to take up most of the card */
    width: auto;
    display: block;
    object-fit: contain;
}

/* ─────────────────────────────────────────────────────────────────────────────
   HERO ULTRA PREMIUM LAYOUTS — Adopted External Layout System
   Tokens and layout utilities for marquee-cinematic, bento-grid-hero,
   and editorial-magazine hero layouts.
   ───────────────────────────────────────────────────────────────────────────── */

/* Bento Grid Hero */
.ws-bento-card {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.ws-bento-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 56px -12px rgba(0, 0, 0, 0.18);
}
.ws-bento-card--main {
    background: color-mix(in srgb, var(--bg-theme-surface, rgba(15,15,20,0.92)) 85%, transparent);
}

/* Marquee strip — GPU composited for smooth animation */
.ws-marquee-strip {
    will-change: transform;
    overflow: hidden;
}
.ws-marquee-track {
    display: flex;
    will-change: transform;
}

/* Editorial Magazine — vertical line accent */
@media (min-width: 768px) {
    .ws-editorial-accent-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        padding-top: 0.75rem;
        flex-shrink: 0;
        width: 2px;
        min-height: 180px;
    }
}

/* Stat Split Hero — oversized gradient number */
.ws-stat-split-number {
    display: block;
    user-select: none;
    opacity: 0.92;
}

/* Terminal Cinematic — cursor blink */
@keyframes ws-terminal-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}
.ws-terminal-cursor {
    display: inline-block;
    width: 0.55em;
    height: 1.1em;
    background: var(--theme-accent);
    animation: ws-terminal-blink 1.2s step-end infinite;
    vertical-align: text-bottom;
    margin-left: 2px;
}

/* Floating Island Hero — card hover lift */
.ws-floating-island-card {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.ws-floating-island-card:hover {
    transform: translateY(-4px);
}

/* --- Footer Global Badge --- */
.ws-footer-badge {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
    display: inline-block;
}

.ws-footer-badge:hover {
    transform: translateY(-4px) scale(1.02);
    filter: brightness(1.1);
}

.ws-footer-badge img {
    display: block;
    height: auto;
    object-fit: contain;
}

/* Correction for specific layouts to ensure alignment */
.mb-6.flex.items-center.gap-6 > .ws-footer-badge {
    margin-top: 0 !important;
}

.flex.items-center.gap-4 > .ws-footer-badge {
    margin-top: 0 !important;
}

.flex.items-center.gap-6.mt-4.md\:mt-0 > .ws-footer-badge {
    margin-top: 0 !important;
}

.ws-badge-pos-bottom_center {
    margin-top: 3rem;
    opacity: 0.8;
}

.ws-badge-pos-bottom_center:hover {
    opacity: 1;
}
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ██  PREMIUM TEXT UTILITIES (2026)
   ══════════════════════════════════════════════════════════════════════════════ */

/* Gradient Text — uses --grad-heading custom property */
.ws-gradient-text {
    background: var(--grad-heading, var(--theme-grad-brand));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* Reusable inline gradient text — set --ws-text-grad on the element (inline or via utility).
   Works on <span> accents inside flowing text; does not break line wrapping. */
.ws-text-grad {
    background-image: var(--ws-text-grad, var(--theme-grad-brand));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* Stay inline so multi-word accents wrap naturally with the surrounding text */
    display: inline;
}

/* Display typography utilities */
.ws-text-display-sm { font-size: var(--text-display-sm); line-height: 1.1; letter-spacing: -0.02em; }
.ws-text-display-md { font-size: var(--text-display-md); line-height: 1.05; letter-spacing: -0.025em; }
.ws-text-display-lg { font-size: var(--text-display-lg); line-height: 1.0; letter-spacing: -0.03em; }
.ws-text-display-xl { font-size: var(--text-display-xl); line-height: 0.95; letter-spacing: -0.035em; }
.ws-text-display-2xl { font-size: var(--text-display-2xl); line-height: 0.9; letter-spacing: -0.04em; }

/* Overline / Caption utility */
.ws-overline {
    font-size: var(--text-overline);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* Stroke text (outline only, no fill) */
.ws-text-stroke {
    -webkit-text-stroke: 2px currentColor;
    -webkit-text-fill-color: transparent;
}
.ws-text-stroke-accent {
    -webkit-text-stroke: 2px var(--theme-accent);
    -webkit-text-fill-color: transparent;
}

/* Text balance for headings (prevents orphans) */
.ws-text-balance {
    text-wrap: balance;
}

/* Premium letter spacing presets */
.ws-tracking-tight { letter-spacing: -0.03em; }
.ws-tracking-tighter { letter-spacing: -0.05em; }
.ws-tracking-wide { letter-spacing: 0.05em; }
.ws-tracking-wider { letter-spacing: 0.1em; }
.ws-tracking-widest { letter-spacing: 0.2em; }