/* ═══════════════════════════════════════════════════════════════
   KissBooK Design System — Centralized CSS Variables
   All plugins share these tokens for consistency and theming.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ─── Z-Index Layers ─── */
    --kb-z-base:       1;
    --kb-z-above:      10;
    --kb-z-dropdown:   100;
    --kb-z-sticky:     500;
    --kb-z-fixed:      1000;
    --kb-z-modal-bg:   5000;
    --kb-z-modal:      5001;
    --kb-z-popup:      6000;
    --kb-z-toast:      7000;
    --kb-z-overlay:    8000;
    --kb-z-max:        9999;

    /* ─── Brand Colors ─── */
    --kb-primary:      #38bdf8;   /* Sky blue — main accent */
    --kb-primary-dark: #0ea5e9;   /* Deeper sky blue */
    --kb-secondary:    #22c55e;   /* Green — success/online */
    --kb-danger:       #ef4444;   /* Red — errors/alerts */
    --kb-danger-light: #f87171;   /* Light red */
    --kb-danger-dark:  #dc2626;   /* Dark red */
    --kb-danger-bg:    #fef2f2;   /* Red background tint */
    --kb-warning:      #f59e0b;   /* Amber — warnings */
    --kb-warning-light:#fcd34d;   /* Light amber */
    --kb-success:      #22c55e;   /* Green — success */
    --kb-success-alt:  #10b981;   /* Emerald — secondary success */
    --kb-success-light:#4ade80;   /* Light green */
    --kb-info:         #38bdf8;   /* Sky blue — info */
    --kb-accent:       #a855f7;   /* Purple — accent/special */
    --kb-accent-alt:   #8b5cf6;   /* Violet */
    --kb-pink:         #ec4899;   /* Pink */
    --kb-indigo:       #4f46e5;   /* Indigo */
    --kb-teal:         #1abc9c;   /* Teal */
    --kb-orange:       #d35400;   /* Orange */
    --kb-orange-light: #e17055;   /* Light orange */

    /* ─── Slate Palette (Dark Theme) ─── */
    --kb-slate-950:    #020617;
    --kb-slate-900:    #0f172a;
    --kb-slate-800:    #1e293b;
    --kb-slate-700:    #334155;
    --kb-slate-600:    #475569;
    --kb-slate-500:    #64748b;
    --kb-slate-400:    #94a3b8;
    --kb-slate-300:    #cbd5e1;
    --kb-slate-200:    #e2e8f0;
    --kb-slate-100:    #f1f5f9;
    --kb-slate-50:     #f8fafc;
    --kb-white:        #ffffff;
    --kb-black:        #000000;

    /* ─── Special Surfaces ─── */
    --kb-surface-dark: #2d1b4e;   /* Purple-dark for games */
    --kb-surface-warm: #f0e6d2;   /* Warm beige */
    --kb-surface-cool: #2d3436;   /* Cool gray */
    --kb-text-muted:   #636e72;   /* Muted text on light bg */
    --kb-brown:        #8b4513;   /* Brown accent */
    --kb-wp-bg:        #f0f0f1;   /* WordPress admin bg */

    /* ─── Extended Palette ─── */
    --kb-blue-400:     #60a5fa;   /* Toast info border */
    --kb-blue-500:     #3b82f6;   /* Friend button blue */
    --kb-blue-600:     #2980b9;   /* Fullscreen button */
    --kb-indigo-400:   #818cf8;   /* Dark mode links */
    --kb-indigo-500:   #6366f1;   /* Cookie banner gradient */
    --kb-violet-700:   #6d28d9;   /* Lobby gradient end */
    --kb-violet-500:   #7c3aed;   /* Admin field header */
    --kb-emerald-600:  #059669;   /* Game badge green */
    --kb-emerald-400:  #34d399;   /* Toast success border */
    --kb-yellow-500:   #eab308;   /* Confetti yellow */
    --kb-gold:         #ffd700;   /* Gold border effect */
    --kb-neon-green:   #00ff00;   /* Neon border effect */
    --kb-neon-cyan:    #00f3ff;   /* Neon glow cyan */
    --kb-neon-magenta: #ff00ff;   /* Neon glow magenta */
    --kb-coral:        #ff4757;   /* Swipe error */
    --kb-coral-light:  #ff6b6b;   /* Chat reaction red */
    --kb-rose-400:     #f472b6;   /* Invite voice color */
    --kb-red-900:      #7f1d1d;   /* Warning button bg */
    --kb-red-200:      #fecaca;   /* Danger light text */
    --kb-crimson:      #b32d2e;   /* Admin remove button */

    /* ─── Chat Reaction Gradients ─── */
    --kb-chat-lol-1:   #ee5a24;   /* LOL gradient start */
    --kb-chat-lol-2:   #ff6b6b;   /* LOL gradient end */
    --kb-chat-bravo-1: #2ecc71;   /* Bravo gradient start */
    --kb-chat-bravo-2: #4ecdc4;   /* Bravo gradient end */
    --kb-chat-omg-1:   #8e44ad;   /* OMG gradient start */
    --kb-chat-omg-2:   #9b59b6;   /* OMG gradient end */
    --kb-chat-think-1: #f39c12;   /* Think gradient start */
    --kb-chat-think-2: #fdcb6e;   /* Think gradient end */
    --kb-chat-eyes-1:  #0984e3;   /* Eyes gradient start */
    --kb-chat-eyes-2:  #74b9ff;   /* Eyes gradient end */
    --kb-chat-pop:     #ffeaa7;   /* Popcorn gradient */
    --kb-chat-fire-1:  #d63031;   /* Fire gradient start */
    --kb-chat-fire-2:  #ff7675;   /* Fire gradient end */
    --kb-chat-kiss-1:  #e84393;   /* Kiss gradient start */
    --kb-chat-kiss-2:  #fd79a8;   /* Kiss gradient end */
    --kb-chat-party-1: #6c5ce7;   /* Party gradient start */
    --kb-chat-party-2: #a29bfe;   /* Party gradient end */
    --kb-chat-crown-1: #f39c12;   /* Crown gradient start */
    --kb-chat-crown-2: #f5c518;   /* Crown gradient end */
    --kb-chat-ghost:   #dfe6e9;   /* Ghost gradient */
    --kb-chat-clown:   #fab1a0;   /* Clown gradient */

    /* ─── Neutral Grays ─── */
    --kb-gray-800:     #1f2937;   /* Dark overlay bg */
    --kb-gray-700:     #374151;   /* Border gray */
    --kb-gray-500:     #7f8c8d;   /* Muted text alt */
    --kb-gray-400:     #9ca3af;   /* Placeholder text */
    --kb-navy:         #2c3e50;   /* Dark text */
    --kb-warm-gray:    #d4c5b0;   /* Warm card bg */
    --kb-orange-400:   #e67e22;   /* Age badge color */
}