/**
 * tokens.css — Portal Design System v3
 * Aligned with main souqalard.com brand tokens.
 * All tokens prefixed --p- to stay isolated from main site.
 */
:root {
    /* ── Brand palette — matched to main site ──────────────────────────────── */
    --p-primary:          #1a365d;       /* Exact match: main site --primary-color */
    --p-primary-mid:      #2a4a7f;       /* Exact match: main site --primary-light */
    --p-primary-light:    #3a6499;
    --p-primary-bg:       #eef3f9;
    --p-accent:           #059669;       /* Exact match: main site --accent-color */
    --p-accent-dark:      #065f46;       /* Exact match: main site --accent-dark */
    --p-accent-hover:     #047857;       /* Exact match: main site --accent-hover */
    --p-accent-bg:        #ecfdf5;
    --p-gold:             #b45309;       /* Exact match: main site --accent-gold */
    --p-gold-bg:          #fef9ec;       /* Exact match: main site --accent-gold-light */
    --p-indigo:           #4338ca;       /* Exact match: main site --accent-purple */
    --p-indigo-bg:        #eef2ff;

    /* ── Surfaces ───────────────────────────────────────────────────────────── */
    --p-bg:               #f8fafc;       /* Exact match: main site --light-bg */
    --p-surface:          #ffffff;
    --p-surface-2:        #f1f5f9;
    --p-surface-3:        #e8edf5;
    --p-border:           #e2e8f0;       /* Exact match: main site --border-color */
    --p-border-hover:     #cbd5e1;       /* Exact match: main site --border-hover */
    --p-border-focus:     #93c5fd;

    /* ── Text — matched to main site ───────────────────────────────────────── */
    --p-text:             #0f172a;       /* Exact match: main site --text-dark */
    --p-text-body:        #374151;       /* Exact match: main site --text-body */
    --p-text-muted:       #64748b;       /* Exact match: main site --text-muted */
    --p-text-light:       #94a3b8;
    --p-text-invert:      #ffffff;

    /* ── Feedback ───────────────────────────────────────────────────────────── */
    --p-success:          #059669;
    --p-success-bg:       #ecfdf5;       /* Exact match: main site --success-bg */
    --p-success-border:   #6ee7b7;
    --p-error:            #dc2626;
    --p-error-bg:         #fff1f2;       /* Exact match: main site --error-bg */
    --p-error-border:     #fecaca;
    --p-warning:          #d97706;
    --p-warning-bg:       #fffbeb;       /* Exact match: main site --warning-bg */
    --p-warning-border:   #fde68a;

    /* ── WhatsApp ───────────────────────────────────────────────────────────── */
    --p-wa:               #25D366;       /* Exact match: main site --whatsapp-color */
    --p-wa-dark:          #128c7e;       /* Exact match: main site --whatsapp-dark */
    --p-wa-bg:            #f0fdf4;

    /* ── Radii — matched to main site ──────────────────────────────────────── */
    --p-r-xs:     4px;
    --p-r-sm:     6px;                  /* Exact match: main site --radius-sm */
    --p-r-md:     10px;                 /* Exact match: main site --radius-md */
    --p-r-lg:     16px;                 /* Exact match: main site --radius-lg */
    --p-r-xl:     22px;                 /* Exact match: main site --radius-xl */
    --p-r-full:   9999px;               /* Exact match: main site --radius-pill */

    /* Shorthands */
    --p-radius:       var(--p-r-md);
    --p-radius-sm:    var(--p-r-sm);
    --p-radius-lg:    var(--p-r-lg);
    --p-accent-ring:  rgba(5,150,105,.12);

    /* ── Shadows — matched to main site ────────────────────────────────────── */
    --p-shadow-xs:  0 1px 2px  rgba(15,23,42,.06);
    --p-shadow-sm:  0 1px 3px rgba(0,0,0,.05), 0 4px 12px rgba(15,37,87,.06);
    --p-shadow-md:  0 4px 16px rgba(15,37,87,.08), 0 2px 6px rgba(0,0,0,.04);
    --p-shadow-lg:  0 8px 32px rgba(15,37,87,.10), 0 4px 10px rgba(0,0,0,.06);
    --p-shadow-xl:  0 20px 48px rgba(15,37,87,.14), 0 8px 16px rgba(0,0,0,.07);
    --p-shadow-card: 0 1px 3px rgba(0,0,0,.05), 0 4px 12px rgba(15,37,87,.06);
    --p-shadow-card-hover: 0 8px 32px rgba(15,37,87,.12), 0 2px 8px rgba(0,0,0,.06);

    /* ── Button-specific shadows — matched to main site ────────────────────── */
    --p-shadow-glow:       0 4px 20px rgba(6, 95, 70, 0.30);
    --p-shadow-glow-hover: 0 8px 28px rgba(6, 95, 70, 0.38), 0 3px 10px rgba(6, 95, 70, 0.22);

    /* ── Gradients — matched to main site ──────────────────────────────────── */
    --p-gradient-primary: linear-gradient(135deg, var(--p-accent-dark) 0%, var(--p-accent-hover) 100%);
    --p-gradient-navy:    linear-gradient(135deg, var(--p-primary) 0%, var(--p-primary-mid) 100%);

    /* ── Transitions — matched to main site ────────────────────────────────── */
    --p-transition:      0.25s ease;    /* Exact match: main site --transition-fast */
    --p-transition-fast: 0.15s ease;
    --p-transition-slow: 0.4s ease;    /* Matches main site --transition-medium */

    /* ── Typography — Poppins first, system fallback ───────────────────────── */
    --p-font:   'Poppins', -apple-system, 'Segoe UI', system-ui, BlinkMacSystemFont, sans-serif;
    --p-mono:   'SF Mono', 'Fira Code', 'Consolas', monospace;

    /* ── Spacing scale (multiples of 4px) ───────────────────────────────────── */
    --p-space-1:  4px;
    --p-space-2:  8px;
    --p-space-3:  12px;
    --p-space-4:  16px;
    --p-space-5:  20px;
    --p-space-6:  24px;
    --p-space-8:  32px;
    --p-space-10: 40px;
    --p-space-12: 48px;

    /* ── Navbar ─────────────────────────────────────────────────────────────── */
    --p-nav-height:  64px;

    /* ── Card ───────────────────────────────────────────────────────────────── */
    --p-card-radius: var(--p-r-lg);
}