/**
 * WB Listora — design variables (compiled output)
 *
 * GENERATED by bin/build-css.mjs — do NOT edit directly.
 * Edit the source files in src/ and run `npm run build:css`.
 *
 * @package WBListora
 */

/* === src/variables/colors.css === */
/**
 * WB Listora — v2 colors token layer
 *
 * Single source of truth for ALL color values used across the plugin.
 * Blocks reference these tokens; blocks NEVER hardcode hex literals
 * and NEVER define their own color tokens.
 *
 * @since 1.0.5 (v2 token system — runs in parallel with v1 tokens
 *               in shared.css during migration; v1 removed in Phase 4)
 */

:root {
	/* === Brand === */
	--listora-primary:        var(--wp--preset--color--primary, #2271b1);
	--listora-primary-hover:  #135e96;
	--listora-primary-fg:     #ffffff;

	/* === Semantic status — base / bg / fg triplet === */
	--listora-success:    #16a34a;
	--listora-success-bg: #ecfdf5;
	--listora-success-fg: #15803d;

	--listora-warning:    #d97706;
	--listora-warning-bg: #fef3c7;
	--listora-warning-fg: #b45309;

	--listora-danger:     #dc2626;
	--listora-danger-bg:  #fef2f2;
	--listora-danger-fg:  #b91c1c;

	--listora-info:       #2563eb;
	--listora-info-bg:    #eff6ff;
	--listora-info-fg:    #1d4ed8;

	--listora-premium:    #7c3aed;
	--listora-premium-bg: #f3e8ff;
	--listora-premium-fg: #6d28d9;

	--listora-favorite:   var(--wp--preset--color--vivid-red, #cf2e2e);
	--listora-rating:     var(--wp--preset--color--luminous-vivid-amber, #f5a623);

	/* === Surface (backgrounds) === */
	--listora-bg-base:     var(--wp--preset--color--base, #ffffff);
	--listora-bg-surface:  color-mix(in srgb, var(--listora-bg-elevated) 95%, #1a1a1a);
	--listora-bg-elevated: #ffffff;
	--listora-bg-muted:    var(--wp--preset--color--contrast-4, #f5f5f5);
	--listora-bg-inverse:  #1a1a1a;

	/* === Border === */
	--listora-border-default: var(--wp--preset--color--contrast-3, #e0e0e0);
	--listora-border-subtle:  #e2e8f0;
	--listora-border-strong:  #c3c4c7;
	--listora-border-divider: #f0f0f0;

	/* === wp-admin compatibility palette ===
	   Used by admin CSS (`assets/css/admin*.css`) only. These tokens match
	   the WordPress core admin design language so the plugin's admin chrome
	   harmonises with native wp-admin elements (settings tables, list
	   tables, postbox headers). Do NOT use on customer-facing surfaces. */
	--listora-wp-admin-text:           #1d2327; /* wp-admin body/heading text */
	--listora-wp-admin-text-strong:    #1e1e1e;
	--listora-wp-admin-text-muted:     #50575e; /* wp-admin secondary text */
	--listora-wp-admin-text-faint:     #787c82; /* wp-admin description / placeholder */
	--listora-wp-admin-text-disabled:  #757575;
	--listora-wp-admin-border:         #dcdcde; /* wp-admin native border */
	--listora-wp-admin-bg-row-hover:   #f0f0f1;
	--listora-wp-admin-link:           #0073aa; /* wp-admin legacy link blue */

	/* === Listora admin-extended neutrals ===
	   Granular shades for the Listora admin UI (between WP-admin and
	   listora-bg-*). Use when WP-admin tokens are too neutral and the
	   listora frontend palette is too saturated. */
	--listora-admin-bg-subtle:    #f7f7f5; /* Listora admin card bg, light */
	--listora-admin-bg-tint:      #f0f6fc; /* WP info-tint background */
	--listora-admin-bg-soft:      #f1f5f9; /* Slate-50 — secondary surface */
	--listora-admin-bg-paper:     #f5f5f5;
	--listora-admin-bg-tertiary:  #f0f0ed; /* Listora admin tertiary surface */
	--listora-admin-border-faint: #ddd;    /* legacy WP border alias */
}

/* === src/variables/spacing.css === */
/**
 * WB Listora — v2 spacing token layer
 *
 * Numeric scale (1..16) replaces the legacy named scale
 * (--listora-gap-xs..3xl). Predictable arithmetic: each step
 * is approximately the previous step + 4px (rem-based).
 *
 * Migration map for shared.css consumers (search-replace, Phase 2):
 *   --listora-gap-xs   → --listora-space-1   (0.25rem / 4px)
 *   --listora-gap-sm   → --listora-space-2   (0.5rem / 8px)
 *   --listora-gap-md   → --listora-space-4   (1rem / 16px)
 *   --listora-gap-lg   → --listora-space-6   (1.5rem / 24px)
 *   --listora-gap-xl   → --listora-space-8   (2rem / 32px)
 *   --listora-gap-2xl  → --listora-space-12  (3rem / 48px)
 *   --listora-gap-3xl  → --listora-space-16  (4rem / 64px)
 *
 * @since 1.0.5 (v2)
 */

:root {
	/* === Spacing scale — rem-based === */
	--listora-space-1:  0.25rem;   /* 4px  */
	--listora-space-2:  0.5rem;    /* 8px  */
	--listora-space-3:  0.75rem;   /* 12px */
	--listora-space-4:  1rem;      /* 16px */
	--listora-space-5:  1.25rem;   /* 20px */
	--listora-space-6:  1.5rem;    /* 24px */
	--listora-space-8:  2rem;      /* 32px */
	--listora-space-12: 3rem;      /* 48px */

	/* === Semantic aliases for the most-common slots === */
	--listora-grid-gap:              var(--listora-space-6);
	--listora-card-padding:          var(--listora-space-4);
	--listora-card-gap:              var(--listora-space-3);
	--listora-form-control-padding:  var(--listora-space-3);

	/* === Tap target minimum (a11y) === */
	--listora-tap-target: 44px;
}

/* === src/variables/typography.css === */
/**
 * WB Listora — v2 typography token layer
 *
 * Resolves the legacy --listora-text-* namespace overload (used
 * for both size AND foreground color). Splits into:
 *
 *   --listora-text-size-{xs..4xl}   (size)
 *   --listora-fg-{default,strong,muted,faint,inverse,...}   (color)
 *
 * Migration map (search-replace, Phase 2):
 *   --listora-text-xs (size)   → --listora-text-size-xs
 *   --listora-text-sm (size)   → --listora-text-size-sm
 *   --listora-text-base (size) → --listora-text-size-base
 *   --listora-text-lg (size)   → --listora-text-size-lg
 *   --listora-text-xl (size)   → --listora-text-size-xl
 *   --listora-text-2xl (size)  → --listora-text-size-2xl
 *   --listora-text-3xl (size)  → --listora-text-size-3xl
 *   (new)                       → --listora-text-size-4xl
 *
 *   --listora-text (color)     → --listora-fg-default
 *   --listora-text-strong      → --listora-fg-strong
 *   --listora-text-secondary   → --listora-fg-muted
 *   --listora-text-muted       → --listora-fg-faint
 *   --listora-text-faint       → --listora-fg-faint
 *   --listora-text-inverse     → --listora-fg-inverse
 *
 * @since 1.0.5 (v2)
 */

:root {
	/* === Type size scale — rem-based === */
	--listora-text-size-xs:   0.75rem;    /* 12px */
	--listora-text-size-sm:   0.875rem;   /* 14px */
	--listora-text-size-base: 1rem;       /* 16px */
	--listora-text-size-lg:   1.125rem;   /* 18px */
	--listora-text-size-xl:   1.25rem;    /* 20px */
	--listora-text-size-2xl:  1.5rem;     /* 24px */
	--listora-text-size-3xl:  1.875rem;   /* 30px */

	/* === Line heights === */
	--listora-line-tight:   1.25;
	--listora-line-snug:    1.375;
	--listora-line-base:    1.5;

	/* === Font weights === */
	--listora-weight-normal:   400;
	--listora-weight-medium:   500;
	--listora-weight-semibold: 600;
	--listora-weight-bold:     700;

	/* === Letter spacing === */
	--listora-tracking-wide:  0.01em;

	/* === Foreground (text) colors — semantic === */
	--listora-fg-default:    var(--wp--preset--color--contrast, #1a1a1a);
	--listora-fg-strong:     #1a1a1a;
	--listora-fg-muted:      var(--wp--preset--color--contrast-2, #555555);
	--listora-fg-faint:      var(--wp--preset--color--contrast-3, #999999);
	--listora-fg-inverse:    #ffffff;
	--listora-fg-danger:     var(--listora-danger-fg);
}

/* === src/variables/radius.css === */
/**
 * WB Listora — v2 radius token layer
 *
 * Border-radius scale + semantic aliases.
 *
 * @since 1.0.5 (v2)
 */

:root {
	--listora-radius-sm:   6px;
	--listora-radius-md:   10px;
	--listora-radius-lg:   14px;
	--listora-radius-xl:   20px;
	--listora-radius-full: 9999px;

	/* === Semantic aliases === */
	--listora-card-radius:   var(--listora-radius-md);
	--listora-input-radius:  var(--listora-radius-sm);
	--listora-button-radius: var(--listora-radius-sm);
	--listora-pill-radius:   var(--listora-radius-full);
	--listora-modal-radius:  var(--listora-radius-lg);
}

/* === src/variables/shadow.css === */
/**
 * WB Listora — v2 shadow token layer
 *
 * Elevation scale + focus ring + semantic aliases.
 *
 * @since 1.0.5 (v2)
 */

:root {
	--listora-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
	--listora-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
	--listora-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
	--listora-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
	--listora-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

	/* === Focus ring — 2px inner halo + 2px brand ring === */
	--listora-focus-ring: 0 0 0 2px var(--listora-bg-elevated), 0 0 0 4px var(--listora-primary);

	/* === Semantic aliases === */
	--listora-card-shadow-hover: var(--listora-shadow-lg);
	--listora-modal-shadow:      var(--listora-shadow-xl);
}

/* === src/variables/motion.css === */
/**
 * WB Listora — v2 motion token layer
 *
 * Transition durations + easing curves. Respects prefers-reduced-motion.
 *
 * @since 1.0.5 (v2)
 */

:root {
	--listora-transition-fast: 0.1s ease;
	--listora-transition-base: 0.2s ease;
	--listora-transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

	/* === Easing curves === */
	--listora-ease-out:    cubic-bezier(0, 0, 0.2, 1);
	--listora-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--listora-transition-fast: 0.01ms ease;
		--listora-transition-base: 0.01ms ease;
		--listora-transition-slow: 0.01ms ease;
	}
}