/**
 * Websly Preset Bridge — companion CSS
 * ====================================
 * Gives the standard WordPress palette + font-size slug classes their VALUES,
 * mapped to Websly's live design tokens. So any harvested block pattern that
 * uses `has-{slug}-color` / `has-{slug}-background-color` / `has-{slug}-font-size`
 * renders in Websly's Customizer colours + type with no per-pattern edits.
 *
 * Loaded on the frontend (dep: websly-tokens) and the editor canvas
 * (add_editor_style) by inc/websly-preset-bridge.php.
 *
 * KEEP the slug list in sync with websly_preset_bridge_palette() /
 * websly_preset_bridge_font_sizes() in inc/websly-preset-bridge.php.
 *
 * Single-class selectors only — so block-specific styles and the per-family
 * `.ws-fam-*` skin can still override. No !important.
 *
 * @since 2026-06-01 (Family Harvest Pipeline) — see HOW-TO-STEAL §7.4
 */

/* ============ Spacing presets ============
 * Harvested patterns reference --wp--preset--spacing--{slug} (named, e.g. Ollie)
 * and --wp--preset--spacing--{NN} (numeric, e.g. Twenty Twenty-Four/Five).
 * Define them here or sections lose their vertical rhythm. Fluid where it matters. */
:root {
    --wp--preset--spacing--xx-small: 0.5rem;
    --wp--preset--spacing--x-small:  0.75rem;
    --wp--preset--spacing--small:    1rem;
    --wp--preset--spacing--medium:   clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
    --wp--preset--spacing--large:    clamp(2.5rem, 1.8rem + 3vw, 4rem);
    --wp--preset--spacing--x-large:  clamp(3.5rem, 2.4rem + 4.7vw, 6rem);
    --wp--preset--spacing--xx-large: clamp(4.5rem, 2.9rem + 6.8vw, 8rem);
    --wp--preset--spacing--10: 0.5rem;
    --wp--preset--spacing--20: 0.75rem;
    --wp--preset--spacing--30: 1rem;
    --wp--preset--spacing--40: 1.5rem;
    --wp--preset--spacing--50: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
    --wp--preset--spacing--60: clamp(2.5rem, 1.8rem + 3vw, 4rem);
    --wp--preset--spacing--70: clamp(3.5rem, 2.4rem + 4.7vw, 6rem);
    --wp--preset--spacing--80: clamp(4.5rem, 2.9rem + 6.8vw, 8rem);
}

/* ============ Colour preset vars ============
 * Define --wp--preset--color--{slug} so patterns that reference colours INLINE
 * (e.g. border-color:var(--wp--preset--color--accent)) resolve to Websly tokens,
 * not just the .has-*-color classes. The converter aliases custom slugs → these. */
:root {
    --wp--preset--color--base:       var(--page-bg-base, var(--theme-bg));
    --wp--preset--color--base-2:     var(--page-bg-surface, var(--theme-surface));
    --wp--preset--color--base-3:     var(--page-bg-subtle, var(--theme-surface-subtle));
    --wp--preset--color--contrast:   var(--page-text-strong, var(--theme-text));
    --wp--preset--color--contrast-2: var(--page-text-base, var(--theme-text));
    --wp--preset--color--contrast-3: var(--page-text-muted, var(--theme-text));
    --wp--preset--color--accent:     var(--theme-accent);
    --wp--preset--color--accent-1:   var(--theme-accent);
    --wp--preset--color--accent-2:   var(--theme-accent-secondary, var(--theme-accent));
    --wp--preset--color--accent-3:   var(--theme-accent-tertiary, var(--theme-surface-subtle));
    --wp--preset--color--accent-4:   var(--theme-accent-weak, var(--theme-accent));
    --wp--preset--color--accent-5:   var(--theme-accent-strong, var(--theme-accent));
    --wp--preset--color--accent-6:   var(--theme-accent);
    --wp--preset--color--primary:    var(--theme-accent);
    --wp--preset--color--secondary:  var(--theme-accent-secondary, var(--theme-accent));
    --wp--preset--color--tertiary:   var(--theme-surface-subtle, var(--theme-surface));
    /* Extra slugs found in harvested patterns (were UNMAPPED → bad contrast) */
    --wp--preset--color--main-accent: var(--theme-accent);
    --wp--preset--color--neutral:     var(--page-bg-subtle, var(--theme-surface-subtle));
    --wp--preset--color--inline:      var(--theme-accent);
}

/* ============ Text colour ============ */
.has-base-color        { color: var(--page-bg-base, var(--theme-bg)); }
.has-base-2-color      { color: var(--page-bg-surface, var(--theme-surface)); }
.has-base-3-color      { color: var(--page-bg-subtle, var(--theme-surface-subtle)); }
.has-contrast-color    { color: var(--page-text-strong, var(--theme-text)); }
.has-contrast-2-color  { color: var(--page-text-base, var(--theme-text)); }
.has-contrast-3-color  { color: var(--page-text-muted, var(--theme-text)); }
.has-accent-color,
.has-accent-1-color,
.has-primary-color     { color: var(--theme-accent); }
.has-accent-2-color,
.has-secondary-color   { color: var(--theme-accent-secondary, var(--theme-accent)); }
.has-accent-3-color,
.has-tertiary-color    { color: var(--theme-accent-tertiary, var(--theme-surface-subtle)); }
.has-accent-4-color    { color: var(--theme-accent-weak, var(--theme-accent)); }
.has-accent-5-color    { color: var(--theme-accent-strong, var(--theme-accent)); }
.has-accent-6-color    { color: var(--theme-accent); }
/* Extra slugs found in harvested patterns (were UNMAPPED → inherited/invisible) */
.has-main-accent-color,
.has-inline-color      { color: var(--theme-accent); }
.has-neutral-color     { color: var(--page-text-muted, var(--theme-text)); }

/* ============ Background colour ============ */
.has-base-background-color        { background-color: var(--page-bg-base, var(--theme-bg)); }
.has-base-2-background-color      { background-color: var(--page-bg-surface, var(--theme-surface)); }
.has-base-3-background-color      { background-color: var(--page-bg-subtle, var(--theme-surface-subtle)); }
.has-contrast-background-color    { background-color: var(--page-text-strong, var(--theme-text)); }
.has-contrast-2-background-color  { background-color: var(--page-text-base, var(--theme-text)); }
.has-contrast-3-background-color  { background-color: var(--page-text-muted, var(--theme-text)); }
.has-accent-background-color,
.has-accent-1-background-color,
.has-primary-background-color     { background-color: var(--theme-accent); }
.has-accent-2-background-color,
.has-secondary-background-color   { background-color: var(--theme-accent-secondary, var(--theme-accent)); }
.has-accent-3-background-color,
.has-tertiary-background-color    { background-color: var(--theme-accent-tertiary, var(--theme-surface-subtle)); }
.has-accent-4-background-color    { background-color: var(--theme-accent-weak, var(--theme-accent)); }
.has-accent-5-background-color    { background-color: var(--theme-accent-strong, var(--theme-accent)); }
.has-accent-6-background-color    { background-color: var(--theme-accent); }
.has-main-accent-background-color { background-color: var(--theme-accent); }
.has-neutral-background-color     { background-color: var(--page-bg-subtle, var(--theme-surface-subtle)); }

/* ============ Border colour ============ */
.has-base-2-border-color   { border-color: var(--theme-border-subtle, var(--page-bg-surface)); }
.has-base-3-border-color   { border-color: var(--theme-border-subtle, var(--page-bg-subtle)); }
.has-contrast-border-color { border-color: var(--theme-border-strong, var(--page-text-strong)); }
.has-tertiary-border-color { border-color: var(--theme-accent-tertiary, var(--theme-border-subtle)); }
.has-accent-border-color,
.has-accent-1-border-color,
.has-accent-2-border-color,
.has-accent-3-border-color,
.has-accent-4-border-color,
.has-accent-5-border-color,
.has-accent-6-border-color,
.has-primary-border-color  { border-color: var(--theme-accent); }

/* ============ Font sizes ============
 * Fluid clamps on Websly's type scale (≈360→1440px viewport).
 * KEEP IN SYNC with websly_preset_bridge_font_sizes() in the PHP module. */
.has-x-small-font-size  { font-size: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem); }
.has-small-font-size    { font-size: clamp(0.875rem, 0.84rem + 0.16vw, 0.95rem); }
.has-medium-font-size   { font-size: clamp(1rem, 0.95rem + 0.22vw, 1.125rem); }
.has-large-font-size    { font-size: clamp(1.25rem, 1.08rem + 0.74vw, 1.5rem); }
.has-x-large-font-size  { font-size: clamp(1.75rem, 1.34rem + 1.74vw, 2.25rem); }
.has-xx-large-font-size { font-size: clamp(2.5rem, 1.85rem + 2.83vw, 3.5rem); }