/* ============================================================
   CSS Custom Properties — Marlora Labs
   ============================================================ */

:root {
  /* Brand */
  --brand-primary:  #1e6ff1;
  --brand-secondary: #00c8ff;
  --brand-gradient: linear-gradient(135deg, #1e6ff1 0%, #00c8ff 100%);
  --brand-gradient-text: linear-gradient(135deg, #60a5fa 0%, #22d3ee 100%);

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  /* Radius */
  --r-sm:   0.375rem;
  --r-md:   0.5rem;
  --r-lg:   0.75rem;
  --r-xl:   1rem;
  --r-2xl:  1.5rem;
  --r-full: 9999px;

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

  /* Z-index */
  --z-nav:     100;
  --z-modal:   200;
  --z-loading: 300;
}

/* ── Dark Mode (default) ── */
[data-theme="dark"] {
  --bg-base:     #070b14;
  --bg-surface:  #0d1224;
  --bg-elevated: #111827;
  --bg-card:     #131d2e;
  --bg-hover:    #1a2540;

  --text-primary:   #f0f4ff;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;
  --text-inverse:   #070b14;

  --border-subtle:  rgba(99,179,237,0.08);
  --border-default: rgba(99,179,237,0.15);
  --border-strong:  rgba(99,179,237,0.30);

  --shadow-sm: 0 1px 3px rgba(0,0,0,.45);
  --shadow-md: 0 4px 16px rgba(0,0,0,.45);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.55);
  --shadow-xl: 0 16px 64px rgba(0,0,0,.65);
  --shadow-glow:        0 0 40px rgba(30,111,241,.18);
  --shadow-glow-strong: 0 0 80px rgba(30,111,241,.28);

  --nav-bg:  rgba(7,11,20,.82);
  --code-bg: #080e1c;

  --tag-bg:   rgba(30,111,241,.12);
  --tag-text: #60a5fa;
}

/* ── Light Mode ── */
[data-theme="light"] {
  --bg-base:     #f6f8fd;
  --bg-surface:  #ffffff;
  --bg-elevated: #eef2fb;
  --bg-card:     #ffffff;
  --bg-hover:    #eef2fb;

  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #94a3b8;
  --text-inverse:   #f0f4ff;

  --border-subtle:  rgba(15,23,42,.06);
  --border-default: rgba(15,23,42,.12);
  --border-strong:  rgba(15,23,42,.24);

  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,.09);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.11);
  --shadow-xl: 0 16px 64px rgba(0,0,0,.13);
  --shadow-glow:        0 0 40px rgba(30,111,241,.10);
  --shadow-glow-strong: 0 0 80px rgba(30,111,241,.15);

  --nav-bg:  rgba(246,248,253,.88);
  --code-bg: #f1f5f9;

  --tag-bg:   rgba(30,111,241,.08);
  --tag-text: #2563eb;
}