/**
 * GUL Theme Tokens — Runtime Override Layer
 *
 * Bridges the admin-controlled `--gul-token-*` custom properties (emitted
 * inline in <head> by class-theme-tokens.php) to the legacy `--gul-*`
 * brand variables and to selectors that still carry hardcoded hex values.
 *
 * Loaded with `gul-sections` as a dep so its cascade lands AFTER every
 * per-block stylesheet — last-rule-wins lets a single admin save flip
 * every hardcoded primary/accent color across the entire block library.
 *
 * Each var() includes a fallback identical to the GUL default so this
 * stylesheet is safe to load even when the inline <style id="gul-theme-tokens">
 * block is missing (e.g. uncached admin previews).
 */

:root {
    /* Re-bind legacy brand vars to admin-controlled tokens. */
    --gul-primary:       var( --gul-token-primary,      #0093fe );
    --gul-primary-dark:  var( --gul-token-primary-dark, #007bda );
    --gul-accent:        var( --gul-token-accent,       #fcb900 );
    --gul-accent-light:  var( --gul-token-accent,       #fcb900 );
    --gul-accent-dark:   var( --gul-token-accent-dark,  #ff9800 );
    --gul-ink:           var( --gul-token-ink,          #0a0a14 );
    --gul-muted:         var( --gul-token-muted,        #475569 );
    --gul-surface:       var( --gul-token-surface,      #ffffff );
    --gul-surface-alt:   var( --gul-token-surface-alt,  #f8fafc );
    --gul-link:          var( --gul-token-link,         #0093fe );
    --gul-link-hover:    var( --gul-token-link-hover,   #007bda );
    --gul-gradient-dir:  var( --gul-token-gradient-dir, 135deg );
}

/* ----------------------------------------------------------------------
 * Primary brand surfaces — buttons, badges, focus rings, link defaults.
 * ---------------------------------------------------------------------- */

.gul-btn--primary,
.gul-btn.is-primary,
.gul-cta-banner__btn--primary {
    background: var( --gul-primary );
    color: #ffffff;
}
.gul-btn--primary:hover,
.gul-btn.is-primary:hover,
.gul-cta-banner__btn--primary:hover {
    background: var( --gul-primary-dark );
}
.gul-btn--secondary,
.gul-btn.is-secondary {
    color: var( --gul-primary );
    border-color: var( --gul-primary );
}
.gul-btn--secondary:hover,
.gul-btn.is-secondary:hover {
    background: var( --gul-primary );
    color: #ffffff;
}

.gul-badge--cyan,
.gul-badge.is-cyan {
    background: color-mix( in srgb, var( --gul-primary ) 14%, #ffffff );
    color: var( --gul-primary-dark );
}
.gul-badge--orange,
.gul-badge.is-orange,
.gul-badge--accent {
    background: color-mix( in srgb, var( --gul-accent ) 18%, #ffffff );
    color: var( --gul-accent-dark, #ff9800 );
}

.gul-pill,
.gul-anchor-pills__pill.is-active {
    background: var( --gul-primary );
    color: #ffffff;
}

a:not(.gul-btn):not(.gul-pill) {
    color: var( --gul-link );
}
a:not(.gul-btn):not(.gul-pill):hover {
    color: var( --gul-link-hover );
}

:focus-visible {
    outline-color: var( --gul-primary );
}

/* ----------------------------------------------------------------------
 * Gradient text + gradient surfaces.
 * Original rule in design-system.css line 57 hardcoded the stops; this
 * layer overrides it whenever the user has saved custom tokens.
 * ---------------------------------------------------------------------- */

.gul-gradient-text,
.gul-section-title .gul-gradient-text {
    background: linear-gradient(
        var( --gul-gradient-dir ),
        var( --gul-primary )  0%,
        var( --gul-accent )  100%
    );
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
}

.gul-gradient-bg,
.gul-bg-gradient {
    background: linear-gradient(
        var( --gul-gradient-dir ),
        var( --gul-primary )      0%,
        var( --gul-primary-dark ) 100%
    );
}

.gul-cs-blue {
    background: linear-gradient(
        var( --gul-gradient-dir ),
        var( --gul-primary )      0%,
        var( --gul-primary-dark ) 100%
    );
}
.gul-cs-orange {
    background: linear-gradient(
        var( --gul-gradient-dir ),
        var( --gul-accent )      0%,
        var( --gul-accent-dark, #ff9800 ) 100%
    );
}

/* ----------------------------------------------------------------------
 * Glow shadows — refresh the rgba-baked shadows to track new primary.
 * ---------------------------------------------------------------------- */

:root {
    --gul-shadow-glow:        0 0 20px color-mix( in srgb, var( --gul-primary ) 40%, transparent );
    --gul-shadow-glow-accent: 0 0 20px color-mix( in srgb, var( --gul-accent )  40%, transparent );
}

/* ----------------------------------------------------------------------
 * Surface backgrounds — striped sections + cards.
 * ---------------------------------------------------------------------- */

.gul-section--alt,
.gul-bg-surface-alt {
    background-color: var( --gul-surface-alt );
}
.gul-card,
.gul-bg-surface {
    background-color: var( --gul-surface );
}

/* ----------------------------------------------------------------------
 * Editor-side parity — Gutenberg iframe needs the same overrides since
 * design-system.css loads inside it. enqueue_block_editor_assets handles
 * the file include; this block scopes nothing extra because :root inside
 * the editor iframe is the editor document's root.
 * ---------------------------------------------------------------------- */
