/* ============================================================
   DELTAPLEX — Colors & Type
   Enterprise data fusion platform · Stripe/Linear aesthetic
   ============================================================ */

/* ----------- Fonts ----------- */
/* Primary: Inter (wordmark uses weight 300 / Light)
   Mono: JetBrains Mono for code / data readouts        */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ============== COLORS — Brand ============== */
  --dp-indigo-50:  #eef2ff;
  --dp-indigo-100: #e0e7ff;
  --dp-indigo-200: #c7d2fe;
  --dp-indigo-300: #a5b4fc;
  --dp-indigo-400: #818cf8;   /* Light Indigo — dark-mode Δ */
  --dp-indigo-500: #6366f1;   /* Primary Indigo — brand */
  --dp-indigo-600: #4f46e5;
  --dp-indigo-700: #4338ca;
  --dp-indigo-800: #3730a3;
  --dp-indigo-900: #1e1b4b;   /* Deep indigo for hero gradients */

  /* ============== COLORS — Neutrals (Slate) ============== */
  --dp-white:      #ffffff;
  --dp-slate-50:   #f8fafc;
  --dp-slate-100:  #f1f5f9;   /* Light Slate — dark-bg wordmark */
  --dp-slate-200:  #e2e8f0;
  --dp-slate-300:  #cbd5e1;
  --dp-slate-400:  #94a3b8;
  --dp-slate-500:  #64748b;
  --dp-slate-600:  #475569;
  --dp-slate-700:  #334155;
  --dp-slate-800:  #1e293b;
  --dp-slate-900:  #0f172a;   /* Dark BG — hero, splash */
  --dp-slate-950:  #020617;

  /* Warm neutrals (used sparingly for body text pairing) */
  --dp-gray-400:   #9ca3af;   /* Muted Gray — taglines, subtitles */
  --dp-gray-500:   #6b7280;
  --dp-gray-600:   #4b5563;
  --dp-gray-700:   #374151;
  --dp-gray-900:   #111827;   /* Near Black — primary wordmark color */
  --dp-border:     #e5e7eb;   /* Border Gray */

  /* ============== COLORS — Semantic ============== */
  --dp-success:    #10b981;
  --dp-success-bg: #ecfdf5;
  --dp-warning:    #f59e0b;
  --dp-warning-bg: #fffbeb;
  --dp-error:      #ef4444;
  --dp-error-bg:   #fef2f2;
  --dp-info:       #0ea5e9;
  --dp-info-bg:    #f0f9ff;

  /* Data-viz accents (for streaming/telemetry dashboards) */
  --dp-stream-1:   #6366f1;  /* indigo — primary */
  --dp-stream-2:   #06b6d4;  /* cyan — ingest */
  --dp-stream-3:   #10b981;  /* emerald — healthy */
  --dp-stream-4:   #f59e0b;  /* amber — throttled */
  --dp-stream-5:   #ec4899;  /* pink — error / diff */

  /* ============== SEMANTIC TOKENS — Light ============== */
  --fg1: #111827;        /* primary text */
  --fg2: #374151;        /* body */
  --fg3: #6b7280;        /* secondary */
  --fg-muted: #9ca3af;   /* tertiary / tagline */
  --fg-brand: #6366f1;

  --bg1: #ffffff;        /* canvas */
  --bg2: #f8fafc;        /* surface / alt rows */
  --bg3: #f1f5f9;        /* subtle panel */
  --bg-brand: #6366f1;
  --bg-brand-subtle: #eef2ff;

  --border-1: #e5e7eb;   /* default hairline */
  --border-2: #cbd5e1;   /* emphasized / focus ring track */
  --border-brand: #a5b4fc;

  /* ============== TYPE ============== */
  --font-sans: 'Inter', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-wordmark: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Sizes — product UI */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;
  --text-5xl:  48px;
  --text-6xl:  60px;
  --text-7xl:  72px;

  /* Line heights */
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Tracking — tight for display, wide for uppercase labels/wordmark */
  --tracking-tightest: -0.04em;
  --tracking-tight:    -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.15em;     /* small-caps labels */
  --tracking-widest:   0.25em;     /* wordmark */
  --tracking-tagline:  0.4em;      /* REAL · TIME · STREAMING */

  /* Weights */
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ============== SPACING (4px scale) ============== */
  --sp-0: 0;
  --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;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ============== RADII ============== */
  --radius-xs:   3px;    /* inline chips, tiny */
  --radius-sm:   4px;    /* inputs, small buttons */
  --radius-md:   6px;    /* buttons, pills, small cards */
  --radius-lg:   8px;    /* cards, panels */
  --radius-xl:   12px;   /* prominent cards */
  --radius-2xl:  16px;   /* hero surfaces */
  --radius-full: 9999px;

  /* ============== SHADOWS — subtle, Stripe/Linear style ============== */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 1px rgba(15, 23, 42, 0.03);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.06), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 32px -8px rgba(15, 23, 42, 0.10), 0 4px 8px -2px rgba(15, 23, 42, 0.05);
  --shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, 0.18);
  --shadow-brand: 0 6px 20px -4px rgba(99, 102, 241, 0.35);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.5);
  --ring-focus: 0 0 0 3px rgba(99, 102, 241, 0.25);

  /* ============== MOTION ============== */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    320ms;

  /* ============== GRADIENTS — Brand ============== */
  --gradient-hero: linear-gradient(180deg, #0f172a 0%, #1e1b4b 100%);
  --gradient-hero-diag: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
  --gradient-flow: linear-gradient(90deg, #6366f1 0%, rgba(99,102,241,0) 100%);
  --gradient-flow-dark: linear-gradient(90deg, #818cf8 0%, rgba(129,140,248,0) 100%);
  --gradient-mesh: radial-gradient(at 20% 0%, rgba(99,102,241,0.18) 0%, transparent 50%),
                   radial-gradient(at 80% 20%, rgba(129,140,248,0.12) 0%, transparent 50%),
                   radial-gradient(at 60% 80%, rgba(99,102,241,0.08) 0%, transparent 50%);
}

/* ============== DARK THEME ============== */
[data-theme="dark"] {
  --fg1: #f1f5f9;
  --fg2: #cbd5e1;
  --fg3: #94a3b8;
  --fg-muted: #64748b;
  --fg-brand: #818cf8;

  --bg1: #0f172a;
  --bg2: #1e293b;
  --bg3: #334155;
  --bg-brand: #6366f1;
  --bg-brand-subtle: rgba(99,102,241,0.12);

  --border-1: #1e293b;
  --border-2: #334155;
  --border-brand: #4338ca;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

.dp-wordmark {
  font-family: var(--font-wordmark);
  font-weight: var(--fw-light);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg1);
}

.dp-tagline {
  font-family: var(--font-sans);
  font-weight: var(--fw-normal);
  letter-spacing: var(--tracking-tagline);
  text-transform: uppercase;
  font-size: var(--text-xs);
  color: var(--fg-muted);
}

.dp-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-size: 11px;
  color: var(--fg-brand);
}

.dp-h1, h1.dp {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: clamp(44px, 6vw, 72px);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tightest);
  color: var(--fg1);
}

.dp-h2, h2.dp {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: clamp(32px, 4vw, 48px);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}

.dp-h3, h3.dp {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}

.dp-h4, h4.dp {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--fg1);
}

.dp-body, p.dp {
  font-family: var(--font-sans);
  font-weight: var(--fw-normal);
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
}

.dp-body-sm {
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg3);
}

.dp-lead {
  font-size: var(--text-xl);
  line-height: var(--lh-normal);
  color: var(--fg3);
  font-weight: var(--fw-normal);
}

.dp-code, code.dp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg3);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--fg1);
}

.dp-kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 6px;
  background: var(--bg1);
  border: 1px solid var(--border-2);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  color: var(--fg2);
}