/*
 * Directory Pro — Design System Variables
 * File: public/css/dp-front.css
 * Description: CSS custom properties (design tokens) for the entire plugin front-end.
 *              Colour values are overridable from admin via inline style injected by PublicAssets.
 *
 * DESIGN: Airbnb-inspired — white dominant, generous spacing, refined shadows, premium feel.
 */

:root {
    /* ── Colours (admin-overridable via --dp-admin-* injected by PHP) ── */
    --dp-primary:       var(--dp-admin-primary,       #185FA5);
    --dp-primary-dark:  var(--dp-admin-primary-dark,  #0C447C);
    --dp-primary-light: var(--dp-admin-primary-light, #E8F0FE);
    --dp-accent:        var(--dp-admin-accent,        #E6892A);
    --dp-accent-dark:   var(--dp-admin-accent-dark,   #C4711E);
    --dp-accent-light:  #FFF3E6;
    --dp-bg:            var(--dp-admin-bg,            #F8F9FB);
    --dp-surface:       #FFFFFF;
    --dp-text:          #1A1A2E;
    --dp-text-muted:    #4B5563;
    --dp-text-light:    #9CA3AF;
    --dp-success:       #639922;
    --dp-danger:        #DC2626;
    --dp-warning:       #F59E0B;
    --dp-info:          #3B82F6;
    --dp-border:        #E2E6EA;

    /* ── Typography (minimum 14px, base 16px) ── */
    --dp-font:           system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --dp-font-size-xs:   0.875rem;   /* 14px — absolute minimum */
    --dp-font-size-sm:   0.9375rem;  /* 15px */
    --dp-font-size-base: 1rem;       /* 16px */
    --dp-font-size-lg:   1.125rem;   /* 18px */
    --dp-font-size-xl:   1.25rem;    /* 20px */
    --dp-font-size-2xl:  1.5rem;     /* 24px */
    --dp-font-size-3xl:  1.875rem;   /* 30px */
    --dp-font-size-4xl:  2.25rem;    /* 36px */

    /* ── Spacing scale (generous, Airbnb-like) ── */
    --dp-space-1:  0.25rem;   /*  4px */
    --dp-space-2:  0.5rem;    /*  8px */
    --dp-space-3:  0.75rem;   /* 12px */
    --dp-space-4:  1rem;      /* 16px */
    --dp-space-5:  1.25rem;   /* 20px */
    --dp-space-6:  1.5rem;    /* 24px */
    --dp-space-8:  2rem;      /* 32px */
    --dp-space-10: 2.5rem;    /* 40px */
    --dp-space-12: 3rem;      /* 48px */
    --dp-space-16: 4rem;      /* 64px */

    /* ── Layout ── */
    --dp-radius:      12px;
    --dp-radius-sm:   8px;
    --dp-radius-lg:   16px;
    --dp-radius-xl:   20px;
    --dp-radius-full: 9999px;

    /* Shadows: subtle, layered — Airbnb style */
    --dp-shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.04);
    --dp-shadow:      0 1px 3px rgba(0, 0, 0, 0.04), 0 6px 16px rgba(0, 0, 0, 0.06);
    --dp-shadow-md:   0 2px 6px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.08);
    --dp-shadow-lg:   0 4px 12px rgba(0, 0, 0, 0.08), 0 12px 36px rgba(0, 0, 0, 0.10);
    --dp-shadow-xl:   0 8px 28px rgba(0, 0, 0, 0.12), 0 20px 60px rgba(0, 0, 0, 0.14);

    --dp-container:   1400px;
    --dp-transition:  0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Z-index scale ── */
    --dp-z-dropdown: 100;
    --dp-z-sticky:   200;
    --dp-z-header:   1000;
    --dp-z-overlay:  1100;
    --dp-z-popup:    1200;
    --dp-z-toast:    1300;
}

/* ── Universal reset for all plugin elements ── */
[class^="dp-"],
[class*=" dp-"] {
    box-sizing: border-box;
    font-family: var(--dp-font);
    font-size: var(--dp-font-size-base);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Minimum font-size 14px absolute ── */
[class^="dp-"] *,
[class*=" dp-"] * {
    font-size: max(0.875rem, inherit);
}