/* Jiffy UI Engine — Theme Variables */
:root {
    /* ── Color Palette ── */
    --color-bg:          #0a0a0f;
    --color-surface:     rgba(255, 255, 255, 0.04);
    --color-surface-2:   rgba(255, 255, 255, 0.08);
    --color-surface-3:   rgba(255, 255, 255, 0.12);
    --color-border:      rgba(255, 255, 255, 0.08);
    --color-border-hover:rgba(255, 255, 255, 0.16);
    --color-text:        #e8e8ed;
    --color-text-muted:  rgba(255, 255, 255, 0.5);
    --color-text-faint:  rgba(255, 255, 255, 0.3);
    --color-heading:     #ffffff;

    /* Accent */
    --color-primary:     #6ea8fe;
    --color-primary-rgb: 110, 168, 254;
    --color-secondary:   #a78bfa;
    --color-secondary-rgb:167, 139, 250;
    --color-accent:      #34d399;
    --color-accent-rgb:  52, 211, 153;

    /* Status */
    --color-success:     #34d399;
    --color-warning:     #fbbf24;
    --color-danger:      #f87171;
    --color-info:        #60a5fa;

    /* ── Typography ── */
    --font-sans:         -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
    --font-mono:         'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    --font-size-xs:      0.75rem;
    --font-size-sm:      0.8125rem;
    --font-size-base:    0.9375rem;
    --font-size-md:      1rem;
    --font-size-lg:      1.125rem;
    --font-size-xl:      1.25rem;
    --font-size-2xl:     1.5rem;
    --font-size-3xl:     2rem;
    --font-size-4xl:     2.5rem;
    --font-weight-normal:400;
    --font-weight-medium:500;
    --font-weight-semi:  600;
    --font-weight-bold:  700;
    --line-height:       1.6;

    /* ── Spacing ── */
    --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;
    --space-16: 64px;

    /* ── Border Radius ── */
    --radius-sm:    6px;
    --radius-md:    10px;
    --radius-lg:    14px;
    --radius-xl:    20px;
    --radius-full:  9999px;

    /* Component-specific radii */
    --radius-panel: 14px;
    --radius-btn:   10px;
    --radius-input: 10px;
    --radius-pill:  9999px;

    /* ── Glass Effect ── */
    --glass-blur:        20px;
    --glass-bg:          rgba(255, 255, 255, 0.04);
    --glass-bg-hover:    rgba(255, 255, 255, 0.07);
    --glass-border:      rgba(255, 255, 255, 0.08);
    --glass-border-hover:rgba(255, 255, 255, 0.15);
    --glass-shadow:      0 8px 32px rgba(0, 0, 0, 0.3);

    /* ── Shadows ── */
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.25);
    --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 20px rgba(var(--color-primary-rgb), 0.15);

    /* ── Transitions ── */
    --ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast:   150ms;
    --duration-base:   250ms;
    --duration-slow:   400ms;

    /* ── Layout ── */
    --max-width:   1200px;
    --navbar-h:    60px;
    --sidebar-w:   260px;

    /* ── Background ── */
    --bg-image:    url(https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&q=80);
    --bg-overlay:  rgba(10, 10, 15, 0.85);
    --bg-position: center center;
    --bg-size:     cover;
    --bg-attachment:fixed;
}