/* PageBuilder Pro — Design System Tokens v1.1 (Watermelons Theme) */

:root {
    /* ─── Color Palette ─────────────────────────────── */
    /* Watermelons accent reds (replaces blue primary) */
    --pb-blue-50: #fef1f3;
    --pb-blue-100: #fde2e7;
    --pb-blue-500: #ee3558;
    --pb-blue-600: #d92645;
    --pb-blue-700: #b31a36;

    /* Watermelons greys (warm light scale) */
    --pb-slate-50: #fafafa;
    --pb-slate-100: #f5f5f5;
    --pb-slate-200: #eeeeee;
    --pb-slate-300: #e3e3e3;
    --pb-slate-400: #999999;
    --pb-slate-500: #777777;
    --pb-slate-600: #666666;
    --pb-slate-700: #404040;
    --pb-slate-800: #202020;
    --pb-slate-900: #0a0a0a;

    --pb-green-50: #f0fdf4;
    --pb-green-500: #22c55e;
    --pb-green-600: #16a34a;
    --pb-red-50: #fef1f3;
    --pb-red-500: #ee3558;
    --pb-red-600: #d92645;
    --pb-amber-50: #fff7ed;
    --pb-amber-500: #ff8000;

    /* ─── Semantic Colors ───────────────────────────── */
    /* Canonical brand source. The design-token system emits --quire-color-brand-primary
       (class-pb-design-tokens.php); aliasing here — on the ALWAYS-loaded tokens.css, not
       just the opt-in atomic.css — means editing the brand token updates the primary color
       on every page regardless of the atomic-CSS setting. Falls back to the brand literal. */
    --pb-color-primary: var(--quire-color-brand-primary, #ee3558);
    --pb-color-primary-hover: var(--quire-color-brand-primary-hover, #d62a4a);
    --pb-color-primary-light: var(--pb-blue-50);
    --pb-color-bg: #ffffff;
    --pb-color-surface: var(--pb-slate-100);
    --pb-color-surface-hover: var(--pb-slate-200);
    --pb-color-border: var(--pb-slate-300);
    --pb-color-border-strong: var(--pb-slate-400);
    --pb-color-text: var(--pb-slate-900);
    --pb-color-text-secondary: var(--pb-slate-600);
    --pb-color-text-muted: var(--pb-slate-400);
    --pb-color-success: var(--pb-green-500);
    --pb-color-danger: var(--pb-red-500);
    --pb-color-warning: var(--pb-amber-500);
    --pb-color-focus-ring: rgba(238, 53, 88, 0.35);

    /* ─── Spacing (4px base scale) ──────────────────── */
    --pb-space-0: 0;
    --pb-space-1: 4px;
    --pb-space-2: 8px;
    --pb-space-3: 12px;
    --pb-space-4: 16px;
    --pb-space-5: 20px;
    --pb-space-6: 24px;
    --pb-space-8: 32px;
    --pb-space-10: 40px;
    --pb-space-12: 48px;
    --pb-space-16: 64px;

    /* ─── Typography Scale ──────────────────────────── */
    --pb-font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --pb-text-xs: 11px;
    --pb-text-sm: 13px;
    --pb-text-base: 14px;
    --pb-text-md: 16px;
    --pb-text-lg: 18px;
    --pb-text-xl: 20px;
    --pb-text-2xl: 24px;
    --pb-text-3xl: 32px;
    --pb-text-4xl: 48px;

    --pb-font-normal: 400;
    --pb-font-medium: 500;
    --pb-font-semibold: 600;
    --pb-font-bold: 700;
    --pb-font-extrabold: 800;

    --pb-leading-tight: 1.2;
    --pb-leading-normal: 1.5;
    --pb-leading-relaxed: 1.7;

    /* ─── Border Radius (Watermelons: sharper, minimal) ── */
    --pb-radius-sm: 0px;
    --pb-radius-md: 2px;
    --pb-radius-lg: 4px;
    --pb-radius-xl: 6px;
    --pb-radius-2xl: 8px;
    --pb-radius-full: 9999px;

    /* ─── Shadows (Watermelons: very subtle) ───────────── */
    --pb-shadow-xs: 0 1px 2px rgba(10, 10, 10, 0.03);
    --pb-shadow-sm: 0 1px 3px rgba(10, 10, 10, 0.05);
    --pb-shadow-md: 0 4px 12px rgba(10, 10, 10, 0.06);
    --pb-shadow-lg: 0 12px 32px rgba(10, 10, 10, 0.08);
    --pb-shadow-xl: 0 20px 60px rgba(10, 10, 10, 0.10);
    --pb-shadow-focus: 0 0 0 3px var(--pb-color-focus-ring);

    /* ─── Transitions ───────────────────────────────── */
    --pb-transition-fast: 0.15s ease;
    --pb-transition-base: 0.2s ease;
    --pb-transition-slow: 0.3s ease;
    --pb-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --pb-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── Dark Mode Token Overrides ─────────────────────── */
.pb-dark,
[data-theme="dark"] {
    --pb-color-bg: var(--pb-slate-900);
    --pb-color-surface: var(--pb-slate-800);
    --pb-color-surface-hover: var(--pb-slate-700);
    --pb-color-border: var(--pb-slate-700);
    --pb-color-border-strong: var(--pb-slate-600);
    --pb-color-text: var(--pb-slate-200);
    --pb-color-text-secondary: var(--pb-slate-400);
    --pb-color-text-muted: var(--pb-slate-500);
    --pb-color-primary-light: rgba(238, 53, 88, 0.15);
    --pb-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --pb-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --pb-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* ─── Prefers Dark Mode (frontend) ──────────────────── */
@media (prefers-color-scheme: dark) {
    .pb-pro-page[data-theme="auto"] {
        --pb-color-bg: var(--pb-slate-900);
        --pb-color-surface: var(--pb-slate-800);
        --pb-color-border: var(--pb-slate-700);
        --pb-color-text: var(--pb-slate-200);
        --pb-color-text-secondary: var(--pb-slate-400);
    }
}