/* ================================================================
   AgePulse — Theme System (CSS Custom Properties)
   Dark mode default | Light mode via [data-theme="light"]
================================================================ */

:root {
    /* ── Background Layers ── */
    --bg-body:        #080d1a;
    --bg-body-alt:    #0c1221;
    --bg-card:        rgba(255,255,255,0.04);
    --bg-card-hover:  rgba(255,255,255,0.07);
    --bg-input:       rgba(255,255,255,0.07);
    --bg-input-focus: rgba(255,255,255,0.10);
    --bg-tag:         rgba(255,255,255,0.08);

    /* ── Text ── */
    --text-primary:   #f1f5f9;
    --text-secondary: rgba(241,245,249,0.70);
    --text-muted:     rgba(241,245,249,0.42);
    --text-on-accent: #ffffff;

    /* ── Accent Palette ── */
    --accent:         #7c6fff;
    --accent-light:   rgba(124,111,255,0.20);
    --accent-2:       #4facfe;
    --accent-3:       #f093fb;
    --accent-4:       #43e97b;

    /* ── Gradients ── */
    --grad-main:      linear-gradient(135deg,#7c6fff 0%,#4facfe 100%);
    --grad-warm:      linear-gradient(135deg,#f093fb 0%,#f5576c 100%);
    --grad-cool:      linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);
    --grad-green:     linear-gradient(135deg,#43e97b 0%,#38f9d7 100%);
    --grad-orange:    linear-gradient(135deg,#f7971e 0%,#ffd200 100%);
    --grad-purple:    linear-gradient(135deg,#a18cd1 0%,#fbc2eb 100%);
    --grad-rose:      linear-gradient(135deg,#f5576c 0%,#f093fb 100%);
    --grad-midnight:  linear-gradient(135deg,#2c3e50 0%,#4ca1af 100%);

    /* ── Status ── */
    --success:        #10b981;
    --success-bg:     rgba(16,185,129,0.12);
    --warning:        #f59e0b;
    --warning-bg:     rgba(245,158,11,0.12);
    --danger:         #ef4444;
    --danger-bg:      rgba(239,68,68,0.12);
    --info:           #06b6d4;
    --info-bg:        rgba(6,182,212,0.12);

    /* ── Glass System ── */
    --glass-bg:       rgba(255,255,255,0.04);
    --glass-border:   rgba(255,255,255,0.09);
    --glass-blur:     blur(24px) saturate(180%);

    /* ── Border ── */
    --border:         rgba(255,255,255,0.08);
    --border-subtle:  rgba(255,255,255,0.05);
    --border-active:  rgba(124,111,255,0.50);

    /* ── Chart Colors ── */
    --chart-grid:     rgba(255,255,255,0.06);
    --chart-text:     rgba(241,245,249,0.55);

    /* ── Shadows ── */
    --shadow-sm:      0 2px 8px  rgba(0,0,0,0.30);
    --shadow-md:      0 4px 24px rgba(0,0,0,0.40);
    --shadow-lg:      0 8px 48px rgba(0,0,0,0.55);
    --shadow-accent:  0 8px 32px rgba(124,111,255,0.35);
    --shadow-card:    0 0 0 1px rgba(255,255,255,0.06),
                      0 4px 24px rgba(0,0,0,0.35);

    /* ── Typography ── */
    --font-main:      Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display:   ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

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

    /* ── Border Radius ── */
    --r-xs:   6px;
    --r-sm:   8px;
    --r-md:   12px;
    --r-lg:   16px;
    --r-xl:   20px;
    --r-2xl:  24px;
    --r-3xl:  32px;
    --r-full: 9999px;

    /* ── Transitions ── */
    --t-fast:   150ms cubic-bezier(0.4,0,0.2,1);
    --t-normal: 300ms cubic-bezier(0.4,0,0.2,1);
    --t-slow:   500ms cubic-bezier(0.4,0,0.2,1);
    --t-spring: 400ms cubic-bezier(0.34,1.56,0.64,1);

    /* ── Z-index ── */
    --z-base:     1;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  500;
    --z-toast:    900;
}

/* ── LIGHT THEME ── */
[data-theme="light"] {
    --bg-body:        #eef2ff;
    --bg-body-alt:    #f0f4ff;
    --bg-card:        rgba(255,255,255,0.82);
    --bg-card-hover:  rgba(255,255,255,0.97);
    --bg-input:       rgba(255,255,255,0.90);
    --bg-input-focus: rgba(255,255,255,1.00);
    --bg-tag:         rgba(124,111,255,0.10);

    --text-primary:   #0f172a;
    --text-secondary: #334155;
    --text-muted:     #64748b;

    --glass-bg:       rgba(255,255,255,0.75);
    --glass-border:   rgba(255,255,255,0.90);

    --border:         rgba(0,0,0,0.08);
    --border-subtle:  rgba(0,0,0,0.04);
    --border-active:  rgba(124,111,255,0.45);

    --chart-grid:     rgba(0,0,0,0.06);
    --chart-text:     rgba(15,23,42,0.55);

    --shadow-sm:      0 2px 8px  rgba(0,0,0,0.08);
    --shadow-md:      0 4px 24px rgba(0,0,0,0.12);
    --shadow-lg:      0 8px 48px rgba(0,0,0,0.18);
    --shadow-accent:  0 8px 32px rgba(124,111,255,0.20);
    --shadow-card:    0 0 0 1px rgba(0,0,0,0.06),
                      0 4px 24px rgba(0,0,0,0.10);
}