/* ============================================================
   ForumHub — Design Tokens / CSS Variables
   File: assets/css/variables.css
   ============================================================ */

:root {
    /* ── Brand (overridden by PHP at runtime) ─────────────── */
    --color-primary:       #6c63ff;
    --color-primary-rgb:   108, 99, 255;
    --color-secondary:     #ff6584;

    /* ── Surface ─────────────────────────────────────────── */
    --surface-bg:          #f5f5f7;
    --surface-card:        #ffffff;
    --surface-muted:       #ececf0;
    --surface-hover:       #e8e8ef;

    /* ── Border ──────────────────────────────────────────── */
    --border-color:        #e0e0e8;
    --border-radius-sm:    8px;
    --border-radius-md:    12px;
    --border-radius-lg:    18px;
    --border-radius-pill:  9999px;

    /* ── Typography ──────────────────────────────────────── */
    --font-head:           'Plus Jakarta Sans', sans-serif;
    --font-body:           'Plus Jakarta Sans', sans-serif;
    --text-primary:        #111114;
    --text-secondary:      #55555f;
    --text-muted:          #88889a;
    --text-inverse:        #ffffff;

    /* ── Shadows ─────────────────────────────────────────── */
    --shadow-sm:           0 1px 4px rgba(0,0,0,0.06);
    --shadow-md:           0 2px 8px rgba(0,0,0,0.08);
    --shadow-lg:           0 8px 32px rgba(0,0,0,0.12);

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

    /* ── Layout ──────────────────────────────────────────── */
    --nav-height:          64px;
    --max-width:           1200px;
    --sidebar-width:       300px;

    /* ── Transitions ─────────────────────────────────────── */
    --transition-fast:     0.15s ease;
    --transition-base:     0.2s ease;
    --transition-slow:     0.35s ease;

    /* ── Status Colors ───────────────────────────────────── */
    --color-success:       #10b981;
    --color-warning:       #f59e0b;
    --color-danger:        #ef4444;
    --color-info:          #3b82f6;
}