/* ═══════════════════════════════════════════════
   JEEJO DIGITAL — Design Tokens (CSS Variables)
   ═══════════════════════════════════════════════ */

:root {
  /* ── Colors: Core ──────────────────────────── */
  --jd-bg-deep:        #0B0D19;
  --jd-bg-surface:     #020305;
  --jd-bg-card:        rgba(2, 3, 5, 0.6);
  --jd-bg-card-solid:  #020305;
  --jd-bg-hover:       #121526;

  /* ── Colors: Brand Accent ──────────────────── */
  --jd-cyan:           #00F2FE;
  --jd-purple:         #7A00FF;
  --jd-pink:           #FF0055;
  --jd-green:          #00D9A6;
  --jd-orange:         #FF8C00;
  --jd-blue:           #4D9FFF;
  --jd-gradient-primary: linear-gradient(135deg, var(--jd-pink), var(--jd-purple));

  /* ── Colors: Text ──────────────────────────── */
  --jd-text-primary:   #E8EAFF;
  --jd-text-secondary: #8E9AA8;
  --jd-text-muted:     #5A6180;
  --jd-text-inverse:   #0B0D19;

  /* ── Colors: Borders ───────────────────────── */
  --jd-border-subtle:  rgba(0, 242, 254, 0.12);
  --jd-border-medium:  rgba(0, 242, 254, 0.25);
  --jd-border-strong:  rgba(0, 242, 254, 0.4);

  /* ── Colors: Badges ────────────────────────── */
  --jd-badge-live-bg:      rgba(0, 217, 78, 0.12);
  --jd-badge-live-color:   #00D94E;
  --jd-badge-live-border:  rgba(0, 217, 78, 0.3);
  --jd-badge-dev-bg:       rgba(77, 159, 255, 0.12);
  --jd-badge-dev-color:    #4D9FFF;
  --jd-badge-dev-border:   rgba(77, 159, 255, 0.3);
  --jd-badge-internal-bg:  rgba(157, 78, 221, 0.12);
  --jd-badge-internal-color: #9D4EDD;
  --jd-badge-internal-border: rgba(157, 78, 221, 0.3);

  /* ── Typography ────────────────────────────── */
  --jd-font-family:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --jd-font-mono:      'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --jd-fs-xs:   0.75rem;    /* 12px */
  --jd-fs-sm:   0.875rem;   /* 14px */
  --jd-fs-base: 1rem;       /* 16px */
  --jd-fs-lg:   1.125rem;   /* 18px */
  --jd-fs-xl:   1.25rem;    /* 20px */
  --jd-fs-2xl:  1.5rem;     /* 24px */
  --jd-fs-3xl:  2rem;       /* 32px */
  --jd-fs-4xl:  2.5rem;     /* 40px */
  --jd-fs-5xl:  3.5rem;     /* 56px */
  --jd-fs-hero: clamp(2.2rem, 5vw, 3.8rem);

  --jd-fw-light:     300;
  --jd-fw-regular:   400;
  --jd-fw-semibold:  600;
  --jd-fw-bold:      700;
  --jd-fw-extrabold: 800;
  --jd-fw-black:     900;

  --jd-lh-tight:  1.15;
  --jd-lh-normal: 1.6;
  --jd-lh-loose:  1.8;

  --jd-ls-tight:  -0.02em;
  --jd-ls-normal:  0;
  --jd-ls-wide:    0.05em;
  --jd-ls-wider:   0.1em;
  --jd-ls-widest:  0.2em;

  /* ── Spacing ───────────────────────────────── */
  --jd-space-2xs:  4px;
  --jd-space-xs:   8px;
  --jd-space-sm:   12px;
  --jd-space-md:   16px;
  --jd-space-lg:   24px;
  --jd-space-xl:   32px;
  --jd-space-2xl:  48px;
  --jd-space-3xl:  64px;
  --jd-space-4xl:  96px;
  --jd-space-5xl:  128px;

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

  /* ── Shadows & Glows ───────────────────────── */
  --jd-shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.3);
  --jd-shadow-md:    0 8px 24px rgba(0, 0, 0, 0.4);
  --jd-shadow-lg:    0 16px 48px rgba(0, 0, 0, 0.5);
  --jd-shadow-xl:    0 24px 64px rgba(0, 0, 0, 0.6);
  --jd-glow-cyan:    0 0 30px rgba(0, 242, 254, 0.15);
  --jd-glow-purple:  0 0 30px rgba(157, 78, 221, 0.15);
  --jd-glow-pink:    0 0 30px rgba(255, 0, 127, 0.15);

  /* ── Glass Effect ──────────────────────────── */
  --jd-glass-bg:     rgba(14, 17, 30, 0.55);
  --jd-glass-border: rgba(255, 255, 255, 0.06);
  --jd-glass-blur:   blur(20px);

  /* ── Transitions ───────────────────────────── */
  --jd-ease-out:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --jd-ease-spring:  cubic-bezier(0.4, 0, 0.2, 1);
  --jd-ease-bounce:  cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --jd-duration-fast:   150ms;
  --jd-duration-base:   300ms;
  --jd-duration-slow:   500ms;
  --jd-transition-base: var(--jd-duration-base) var(--jd-ease-spring);

  /* ── Layout ────────────────────────────────── */
  --jd-container-sm:  640px;
  --jd-container-md:  768px;
  --jd-container-lg:  1024px;
  --jd-container-xl:  1200px;
  --jd-container-2xl: 1400px;
  --jd-header-height: 72px;
}

/* ═══════════════════════════════════════════════
   LIGHT MODE PALETTE
   ═══════════════════════════════════════════════ */
[data-theme="light"] {
  --jd-bg-deep:        #F4F6FA;
  --jd-bg-surface:     #FFFFFF;
  --jd-bg-card:        rgba(255, 255, 255, 0.85);
  --jd-bg-card-solid:  #FFFFFF;
  --jd-bg-hover:       #E8ECF2;

  --jd-cyan:           #0891B2;
  --jd-purple:         #7C3AED;
  --jd-pink:           #DB2777;
  --jd-green:          #059669;
  --jd-orange:         #D97706;
  --jd-blue:           #2563EB;
  --jd-gradient-primary: linear-gradient(135deg, var(--jd-pink), var(--jd-purple));

  --jd-text-primary:   #1A1D2E;
  --jd-text-secondary: #4B5563;
  --jd-text-muted:     #9CA3AF;
  --jd-text-inverse:   #F4F6FA;

  --jd-border-subtle:  rgba(0, 0, 0, 0.08);
  --jd-border-medium:  rgba(0, 0, 0, 0.15);
  --jd-border-strong:  rgba(0, 0, 0, 0.25);

  --jd-badge-live-bg:      rgba(5, 150, 105, 0.1);
  --jd-badge-live-color:   #059669;
  --jd-badge-live-border:  rgba(5, 150, 105, 0.25);
  --jd-badge-dev-bg:       rgba(37, 99, 235, 0.1);
  --jd-badge-dev-color:    #2563EB;
  --jd-badge-dev-border:   rgba(37, 99, 235, 0.25);
  --jd-badge-internal-bg:  rgba(124, 58, 237, 0.1);
  --jd-badge-internal-color: #7C3AED;
  --jd-badge-internal-border: rgba(124, 58, 237, 0.25);

  --jd-shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.06);
  --jd-shadow-md:    0 8px 24px rgba(0, 0, 0, 0.08);
  --jd-shadow-lg:    0 16px 48px rgba(0, 0, 0, 0.1);
  --jd-shadow-xl:    0 24px 64px rgba(0, 0, 0, 0.12);
  --jd-glow-cyan:    0 0 30px rgba(8, 145, 178, 0.1);
  --jd-glow-purple:  0 0 30px rgba(124, 58, 237, 0.1);
  --jd-glow-pink:    0 0 30px rgba(219, 39, 119, 0.1);

  --jd-glass-bg:     rgba(255, 255, 255, 0.7);
  --jd-glass-border: rgba(0, 0, 0, 0.06);
  --jd-glass-blur:   blur(20px);
}

/* ═══════════════════════════════════════════════
   MIDNIGHT BLUE PALETTE
   ═══════════════════════════════════════════════ */
[data-theme="midnight"] {
  --jd-bg-deep:        #0A1628;
  --jd-bg-surface:     #0F1D32;
  --jd-bg-card:        rgba(15, 29, 50, 0.7);
  --jd-bg-card-solid:  #0F1D32;
  --jd-bg-hover:       #152540;

  --jd-cyan:           #38BDF8;
  --jd-purple:         #A78BFA;
  --jd-pink:           #F472B6;
  --jd-green:          #34D399;
  --jd-orange:         #FBBF24;
  --jd-blue:           #60A5FA;
  --jd-gradient-primary: linear-gradient(135deg, #F472B6, #A78BFA);

  --jd-text-primary:   #CBD5E1;
  --jd-text-secondary: #64748B;
  --jd-text-muted:     #475569;
  --jd-text-inverse:   #0A1628;

  --jd-border-subtle:  rgba(56, 189, 248, 0.1);
  --jd-border-medium:  rgba(56, 189, 248, 0.2);
  --jd-border-strong:  rgba(56, 189, 248, 0.35);

  --jd-badge-live-bg:      rgba(52, 211, 153, 0.12);
  --jd-badge-live-color:   #34D399;
  --jd-badge-live-border:  rgba(52, 211, 153, 0.3);
  --jd-badge-dev-bg:       rgba(96, 165, 250, 0.12);
  --jd-badge-dev-color:    #60A5FA;
  --jd-badge-dev-border:   rgba(96, 165, 250, 0.3);
  --jd-badge-internal-bg:  rgba(167, 139, 250, 0.12);
  --jd-badge-internal-color: #A78BFA;
  --jd-badge-internal-border: rgba(167, 139, 250, 0.3);

  --jd-shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.4);
  --jd-shadow-md:    0 8px 24px rgba(0, 0, 0, 0.5);
  --jd-shadow-lg:    0 16px 48px rgba(0, 0, 0, 0.6);
  --jd-shadow-xl:    0 24px 64px rgba(0, 0, 0, 0.7);
  --jd-glow-cyan:    0 0 30px rgba(56, 189, 248, 0.12);
  --jd-glow-purple:  0 0 30px rgba(167, 139, 250, 0.12);
  --jd-glow-pink:    0 0 30px rgba(244, 114, 182, 0.12);

  --jd-glass-bg:     rgba(15, 29, 50, 0.6);
  --jd-glass-border: rgba(255, 255, 255, 0.05);
  --jd-glass-blur:   blur(20px);
}