/**
 * Pageify Design System — CSS Variables
 * Source of truth for all design tokens.
 * No Tailwind, no Bootstrap — custom only.
 */

:root {
    /* ── Primary ── */
    --pgf-primary: #2E5090;
    --pgf-primary-hover: #1E3A6E;
    --pgf-primary-light: #E8EEF5;
    --pgf-primary-ultra-light: #F4F7FB;

    /* ── Accent ── */
    --pgf-accent: #10B981;
    --pgf-accent-hover: #059669;
    --pgf-accent-light: #ECFDF5;

    /* ── GDPR ── */
    --pgf-gdpr: #8B5CF6;
    --pgf-gdpr-hover: #7C3AED;
    --pgf-gdpr-light: #F5F3FF;

    /* ── Backgrounds ── */
    --pgf-bg: #FFFFFF;
    --pgf-bg-alt: #F8FAFC;
    --pgf-bg-hover: #F1F5F9;

    /* ── Borders ── */
    --pgf-border: #E2E8F0;
    --pgf-border-focus: #2E5090;

    /* ── Text ── */
    --pgf-text: #1E293B;
    --pgf-text-secondary: #64748B;
    --pgf-text-muted: #64748B;
    --pgf-text-inverse: #FFFFFF;

    /* ── Semantic ── */
    --pgf-success: #10B981;
    --pgf-success-bg: #ECFDF5;
    --pgf-warning: #F59E0B;
    --pgf-warning-bg: #FFFBEB;
    --pgf-danger: #EF4444;
    --pgf-danger-bg: #FEF2F2;
    --pgf-info: #3B82F6;
    --pgf-info-bg: #EFF6FF;

    /* ── Spacing ── */
    --pgf-space-xs: 4px;
    --pgf-space-sm: 8px;
    --pgf-space-md: 16px;
    --pgf-space-lg: 24px;
    --pgf-space-xl: 32px;
    --pgf-space-2xl: 48px;

    /* ── Radii ── */
    --pgf-radius: 12px;
    --pgf-radius-sm: 8px;
    --pgf-radius-xs: 4px;
    --pgf-radius-full: 9999px;

    /* ── Shadows ── */
    --pgf-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
    --pgf-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --pgf-shadow-hover: 0 4px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    --pgf-shadow-lg: 0 12px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
    --pgf-shadow-modal: 0 24px 48px rgba(0,0,0,0.16), 0 8px 16px rgba(0,0,0,0.08);

    /* ── Layout ── */
    --pgf-sidebar-width: 260px;
    --pgf-sidebar-collapsed: 64px;
    --pgf-header-height: 56px;
    --pgf-max-width: 1280px;

    /* ── Typography ── */
    --pgf-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --pgf-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --pgf-font-size: 14px;
    --pgf-line-height: 1.5;

    /* ── Transitions ── */
    --pgf-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
    --pgf-transition-slow: 280ms cubic-bezier(0.4, 0, 0.2, 1);
    --pgf-transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Z-index ── */
    --pgf-z-dropdown: 100;
    --pgf-z-sticky: 200;
    --pgf-z-modal-backdrop: 300;
    --pgf-z-modal: 400;
    --pgf-z-toast: 500;
    --pgf-z-sidebar-overlay: 299;
    --pgf-z-sidebar: 300;
    --pgf-z-a11y-toggle: 9998;
    --pgf-z-a11y-panel: 9999;
    --pgf-z-a11y-close: 10000;
    --pgf-z-drag-ghost: 10001;
    --pgf-z-drag-toast: 10002;

    /* ── Breakpoints (for reference; use values directly in @media queries) ── */
    /* --pgf-bp-sm: 640px;   smartphone */
    /* --pgf-bp-md: 768px;   tablet portrait */
    /* --pgf-bp-lg: 1024px;  tablet landscape / small desktop */
    /* --pgf-bp-xl: 1280px;  desktop */
}