/* ═══════════════════════════════════════════════════════
   Joticle Design System — CSS Custom Properties
   All tokens use --joticle-* prefix
   ═══════════════════════════════════════════════════════ */

:root {
    /* ─── Typography ─── */
    --joticle-font: 'Nunito', sans-serif;
    --joticle-font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ─── Accent / Brand ─── */
    --joticle-accent: #8b5cf6;
    --joticle-accent-dark: #7c3aed;
    --joticle-accent-gradient: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);

    /* ─── Sidebar ─── */
    --joticle-sidebar-bg: #1e1b2e;
    --joticle-sidebar-width: 260px;
    --joticle-sidebar-text: #94a3b8;
    --joticle-sidebar-text-active: #ffffff;
    --joticle-sidebar-item-active: rgba(139, 92, 246, 0.15);
    --joticle-sidebar-border-active: #8b5cf6;

    /* ─── Header ─── */
    --joticle-header-bg: #ffffff;
    --joticle-header-height: 64px;

    /* ─── Body ─── */
    --joticle-body-bg: #f8fafc;

    /* ─── Cards ─── */
    --joticle-card-bg: #ffffff;
    --joticle-card-border: #e2e8f0;
    --joticle-card-radius: 12px;
    --joticle-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

    /* ─── Text ─── */
    --joticle-text-primary: #1e293b;
    --joticle-text-secondary: #64748b;
    --joticle-text-muted: #94a3b8;

    /* ─── Beta Banner ─── */
    --joticle-beta-bg: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);

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

    /* ─── Spacing ─── */
    --joticle-space-xs: 0.25rem;
    --joticle-space-sm: 0.5rem;
    --joticle-space-md: 1rem;
    --joticle-space-lg: 1.5rem;
    --joticle-space-xl: 2rem;
    --joticle-space-2xl: 3rem;

    /* ─── Radius ─── */
    --joticle-radius-sm: 6px;
    --joticle-radius-md: 8px;
    --joticle-radius-lg: 12px;
    --joticle-radius-xl: 16px;

    /* ─── Buttons ─── */
    --joticle-btn-primary: #3b82f6;
    --joticle-btn-primary-hover: #2563eb;

    /* ─── Transitions ─── */
    --joticle-transition: all 0.2s ease;
    --joticle-transition-slow: all 0.3s ease;

    /* ─── Admin Nav ─── */
    --admin-nav-bg: #0A4D7A;
    --admin-nav-accent: #6FA64A;
}