/* ================================================
   DESIGN SYSTEM — DARK MODE (default)
   ================================================ */
:root {
    /* Brand Colors */
    --primary:         #00e1ff;
    --secondary:       #00ffa6;
    --accent:          #00ffc3;

    /* Text */
    --text-color:       #eaeaea;
    --text-color-muted: #9aa8be;
    --text-color-dark:  #111;
    --white-color:      #ffffff;

    /* Backgrounds */
    --bg-color:         #0a0f1c;
    --bg-gradient:      linear-gradient(135deg, #0a0f1c 0%, #111d2f 100%);

    /* Surfaces */
    --card-bg:          rgba(255, 255, 255, 0.05);
    --inner-card-bg:    rgba(255, 255, 255, 0.08);
    --nav-bg:           rgba(10, 15, 28, 0.85);

    /* Borders & Shadows */
    --border-color:     rgba(0, 225, 255, 0.18);
    --shadow:           0 0 20px rgba(0, 225, 255, 0.25);
    --box-shadow:       0 4px 12px rgba(0, 0, 0, 0.25);

    /* Hover glow */
    --primary-hover:    #0ac0fa;
    --hover-glow:       0 0 20px rgba(0, 198, 255, 0.4);

    /* Action Colors */
    --danger-color:     #ef4444;
    --danger-glow:      0 0 15px rgba(239, 68, 68, 0.45);
    --warning-color:    #f59e0b;
    --success-color:    #22c55e;
    --info-color:       #00e1ff;

    /* Glass / form inputs */
    --glass-bg:         rgba(255, 255, 255, 0.85);
    --glass-border:     rgba(255, 255, 255, 0.6);
    --input-bg:         rgba(255, 255, 255, 0.07);
    --primary-gradient: linear-gradient(135deg, #00c6ff, #0072ff);

    /* ── Spacing (8px base grid) ── */
    --space-1:  0.25rem;   /*  4px */
    --space-2:  0.5rem;    /*  8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */

    /* ── Border Radius ── */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  24px;
    --radius-full: 9999px;

    /* ── Transitions ── */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* ── Typography ── */
    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.875rem;   /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg:   1.125rem;   /* 18px */
    --text-xl:   1.25rem;    /* 20px */
    --text-2xl:  1.5rem;     /* 24px */
    --text-3xl:  1.875rem;   /* 30px */
    --text-4xl:  2.25rem;    /* 36px */
    --text-5xl:  3rem;       /* 48px */

    /* ── Z-Index Scale ── */
    --z-base:     0;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-toast:    500;
}

/* ================================================
   LIGHT THEME OVERRIDES
   ================================================ */
body.light {
    /* Brand */
    --primary:          #0ea5e9;
    --secondary:        #13e8b8;
    --accent:           #0ea5e9;

    /* Text */
    --text-color:       #334155;
    --text-color-muted: #64748b;
    --text-color-dark:  #13adcc;

    /* Backgrounds */
    --bg-color:         #f8fafc;
    --bg-gradient:      linear-gradient(135deg, #f8fafc 0%, #e0f2fe 100%);

    /* Surfaces */
    --card-bg:          rgba(255, 255, 255, 0.95);
    --inner-card-bg:    #ffffff;
    --nav-bg:           rgba(255, 255, 255, 0.95);

    /* Borders & Shadows */
    --border-color:     rgba(2, 132, 199, 0.18);
    --shadow:           0 8px 25px rgba(2, 132, 199, 0.14);
    --box-shadow:       0 2px 8px rgba(2, 132, 199, 0.1);

    /* Hover glow */
    --primary-hover:    #0284c7;
    --hover-glow:       0 0 20px rgba(2, 132, 199, 0.3);

    /* Action Colors */
    --success-color:    #16a34a;
    --warning-color:    #d97706;
    --danger-color:     #dc2626;

    /* Input */
    --input-bg:         rgba(241, 245, 249, 0.9);
}