/* =======================================================================
   KLSV Unified Design Tokens — v2.0 (/normalize pass)
   
   Single source of truth. Both --site-* (theme) and --klsv-* (mu-plugins)
   now point to the same canonical values.
   
   HOW TO USE:
   - Theme files    → use --site-* tokens (backward compatible)
   - MU-plugin files → use --klsv-ui-* tokens (backward compatible)
   - New code        → prefer --klsv-ui-* (canonical)
   ======================================================================= */

:root {
    /* ── Canonical palette ── */
    --klsv-ui-bg: #f6f2ea;
    --klsv-ui-bg-soft: #fffaf3;
    --klsv-ui-bg-muted: #efe8dc;
    --klsv-ui-bg-hero: #ebe3d5;
    --klsv-ui-text: #1f2622;
    --klsv-ui-text-muted: #66706a;
    --klsv-ui-border: rgba(71, 82, 74, 0.14);
    --klsv-ui-border-strong: rgba(71, 82, 74, 0.24);
    --klsv-ui-accent: #7c8b7a;
    --klsv-ui-accent-strong: #526255;
    --klsv-ui-accent-soft: rgba(124, 139, 122, 0.12);
    --klsv-ui-accent-glow: rgba(124, 139, 122, 0.28);
    --klsv-ui-success: #4d7f63;

    /* ── Radius scale ── */
    --klsv-ui-radius-xs: 6px;
    --klsv-ui-radius-sm: 8px;
    --klsv-ui-radius-md: 14px;
    --klsv-ui-radius-lg: 20px;
    --klsv-ui-radius-xl: 28px;
    --klsv-ui-radius-2xl: 32px;
    --klsv-ui-radius-pill: 999px;

    /* ── Elevation ── */
    --klsv-ui-shadow-1: 0 12px 28px rgba(68, 54, 34, 0.07);
    --klsv-ui-shadow-2: 0 18px 42px rgba(68, 54, 34, 0.10);
    --klsv-ui-shadow-3: 0 24px 54px rgba(68, 54, 34, 0.14);
    --klsv-ui-shadow-soft: 0 16px 40px rgba(68, 54, 34, 0.08);

    /* ── Layout ── */
    --klsv-ui-container: 1400px;
    --klsv-ui-transition: 180ms ease-out;

    /* ── Typography ── */
    --klsv-font-display: 'Fraunces', 'DM Serif Display', Georgia, 'Times New Roman', serif;
    --klsv-font-body: 'Manrope', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ── Bridge: --site-* aliases (backward compat for theme files) ── */
    --site-bg: var(--klsv-ui-bg);
    --site-panel: var(--klsv-ui-bg-soft);
    --site-panel-soft: var(--klsv-ui-bg-muted);
    --site-text: var(--klsv-ui-text);
    --site-muted: var(--klsv-ui-text-muted);
    --site-line: var(--klsv-ui-border);
    --site-line-strong: var(--klsv-ui-border-strong);
    --site-accent: var(--klsv-ui-accent);
    --site-accent-soft: var(--klsv-ui-accent-soft);
    --site-accent-glow: var(--klsv-ui-accent-glow);
    --site-radius-xl: var(--klsv-ui-radius-xl);
    --site-radius-lg: var(--klsv-ui-radius-lg);
    --site-radius-md: var(--klsv-ui-radius-md);
    --site-shadow: var(--klsv-ui-shadow-2);
    --site-shadow-hover: var(--klsv-ui-shadow-3);
    --site-container: var(--klsv-ui-container);
}

:root {
    --klsv-layout-head-gap-desktop: 24px;
    --klsv-layout-head-gap-tablet: 18px;
    --klsv-layout-head-gap-mobile: 14px;
    --klsv-layout-head-primary-fr: 1.72fr;
    --klsv-layout-head-aside-min: 280px;
    --klsv-layout-head-aside-fr: 0.88fr;
    --klsv-layout-panel-padding-desktop: 16px;
    --klsv-layout-panel-padding-tablet: 14px;
    --klsv-layout-panel-padding-mobile: 12px;
    --klsv-layout-panel-radius: 24px;
    --klsv-layout-panel-radius-tight: 22px;
    --klsv-layout-control-height: 54px;
    --klsv-layout-chip-height: 44px;
    --klsv-layout-chip-columns-desktop: 3;
    --klsv-layout-chip-columns-mobile: 1;
    --klsv-layout-summary-min-height: 84px;
    --klsv-layout-card-width: 238px;
    --klsv-layout-card-gap-desktop: 24px;
    --klsv-layout-card-gap-mobile: 18px;
    --klsv-layout-card-radius: 22px;
    --klsv-layout-card-meta-gap: 10px;
    --klsv-layout-card-badge-height: 30px;
    --klsv-layout-card-image-ratio: 1 / 1;
}


:root {
    --klsv-state-badge-height: 30px;
    --klsv-state-badge-gap: 8px;
    --klsv-state-badge-padding-x: 12px;
    --klsv-state-badge-radius: 999px;
    --klsv-state-badge-font-size: 12px;
    --klsv-state-badge-font-weight: 800;
    --klsv-state-badge-letter-spacing: 0.04em;
    --klsv-state-badge-shadow: var(--klsv-ui-shadow-1);
    --klsv-state-badge-z: 3;
    --klsv-state-bg-neutral: rgba(16, 16, 16, 0.94);
    --klsv-state-border-neutral: rgba(212, 175, 55, 0.24);
    --klsv-state-text-neutral: #526255;
    --klsv-state-bg-new: rgba(16, 16, 16, 0.94);
    --klsv-state-border-new: rgba(212, 175, 55, 0.24);
    --klsv-state-text-new: #526255;
    --klsv-state-bg-busy: rgba(55, 55, 60, 0.96);
    --klsv-state-border-busy: rgba(255, 255, 255, 0.16);
    --klsv-state-text-busy: #ffffff;
    --klsv-state-bg-vip: linear-gradient(180deg, rgba(226, 191, 90, 0.98), rgba(191, 151, 52, 0.98));
    --klsv-state-border-vip: rgba(212, 175, 55, 0.42);
    --klsv-state-text-vip: #111111;
    --klsv-state-bg-featured: rgba(94, 61, 20, 0.96);
    --klsv-state-border-featured: rgba(226, 191, 90, 0.32);
    --klsv-state-text-featured: #f6dfa1;
    --klsv-state-bg-online: rgba(18, 48, 28, 0.96);
    --klsv-state-border-online: rgba(87, 208, 120, 0.30);
    --klsv-state-text-online: #bbf0c9;
}


:root {
    /* ── Phase 1 semantic surfaces ───────────────────────────── */
    --klsv-ui-surface-1: linear-gradient(180deg, rgba(255, 250, 243, 0.98), rgba(247, 241, 232, 0.98));
    --klsv-ui-surface-2: linear-gradient(180deg, rgba(251, 246, 239, 0.98), rgba(241, 234, 223, 0.98));
    --klsv-ui-surface-3: linear-gradient(180deg, rgba(244, 237, 228, 0.98), rgba(236, 228, 215, 0.98));
    --klsv-ui-surface-soft: rgba(255, 255, 255, 0.62);
    --klsv-ui-text-strong: #232a26;
    --klsv-ui-text-soft: rgba(31, 38, 34, 0.84);
    --klsv-ui-text-faint: rgba(31, 38, 34, 0.58);
    --klsv-ui-border-soft: rgba(71, 82, 74, 0.08);
    --klsv-ui-border-accent: rgba(124, 139, 122, 0.18);
    --klsv-ui-ring: 0 0 0 1px rgba(124, 139, 122, 0.10);
    --klsv-ui-section-gap: 24px;
    --klsv-ui-section-gap-tight: 18px;
    --klsv-ui-card-padding: 18px;
    --klsv-ui-card-padding-lg: 24px;
    --klsv-ui-eyebrow-size: 11px;
    --klsv-ui-heading-display: clamp(2rem, 4vw, 3.35rem);
    --klsv-ui-heading-xl: clamp(1.45rem, 2.3vw, 2.1rem);
    --klsv-ui-heading-lg: clamp(1.2rem, 1.7vw, 1.55rem);
    --klsv-ui-heading-md: 1rem;
    --klsv-ui-body-sm: 0.875rem;
    --klsv-ui-body-md: 0.975rem;
    --klsv-ui-body-lg: 1.05rem;
    --klsv-ui-chip-bg: rgba(255, 255, 255, 0.05);
    --klsv-ui-chip-border: rgba(255, 255, 255, 0.08);
    --klsv-ui-chip-text: rgba(246, 247, 249, 0.88);
    --klsv-ui-hero-grid: minmax(0, 1.3fr) minmax(300px, 0.7fr);
}