/**
 * Agent In Indore — Design System Tokens
 *
 * Shared CSS custom properties for public pages, dashboards, and admin panel.
 * No external frameworks. All plugin styles reference these tokens.
 */

/**
 * Scoped to plugin containers only — prevents bleeding into
 * Elementor / theme global styles on shortcode-embedded pages.
 */
.aii-public-wrap,
.aii-profile-wrap,
.aii-auth-screen,
.aii-auth-page,
.aii-dash-wrap,
body.wp-admin {
    /* ── Typography ─────────────────────────────────────────────── */
    --font-primary: 'Inter', system-ui, sans-serif;

    --text-xs:  0.75rem;
    --text-sm:  0.875rem;
    --text-base: 1rem;
    --text-lg:  1.125rem;
    --text-xl:  1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: clamp(1.5rem, 3vw, 1.875rem);
    --text-4xl: clamp(1.875rem, 4vw, 2.25rem);

    /* ── Spacing ────────────────────────────────────────────────── */
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-6:  1.5rem;
    --sp-8:  2rem;
    --sp-12: 3rem;
    --sp-16: 4rem;

    /* ── Border Radius ──────────────────────────────────────────── */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-full: 9999px;

    /* ── Shadows ─────────────────────────────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10);

    /* ── Transition ──────────────────────────────────────────────── */
    --transition: 150ms ease;

    /* ── Public Page Colors ──────────────────────────────────────── */
    --color-primary:       #047CD0;
    --color-primary-hover: #035DA0;
    --color-secondary:     #94C752;
    --color-text:          #083B5D;
    --color-text-muted:    #4A6B85;
    --color-bg:            #FDFDFD;
    --color-surface:       #FFFFFF;
    --color-border:        #C8DCF0;
    --color-success:       #16A34A;
    --color-error:         #DC2626;
    --color-warning:       #D97706;
    --color-star:          #F59E0B;

    /* ── Dashboard Colors (Agent + Manager) ──────────────────────── */
    --dash-sidebar:            #083B5D;
    --dash-sidebar-text:       #94B8D0;
    --dash-sidebar-active-bg:  #047CD0;
    --dash-sidebar-active-text:#FFFFFF;
    --dash-bg:                 #EEF5FB;
    --dash-surface:            #FFFFFF;
    --dash-border:             #C8DCF0;
    --dash-text:               #083B5D;
    --dash-text-muted:         #4A6B85;

    /* ── Admin Panel Colors ──────────────────────────────────────── */
    --admin-header:  #083B5D;
    --admin-nav-bg:  #083B5D;
    --admin-bg:      #FDFDFD;
    --admin-surface: #FFFFFF;
    --admin-border:  #C8DCF0;
    --admin-text:    #083B5D;
}

/*
 * Responsive Breakpoints (reference — use literal values in @media queries)
 * ──────────────────────────────────────────────────────────────────────────
 * Mobile:  default (< 640px)  — single column
 * Tablet:  >= 640px           — two columns, sidebar collapses to icons
 * Desktop: >= 1024px          — full layout, sidebar fixed 220px
 */