/* =========================================================================
   DEVIX SOLUTIONS — Visual Identity v2 (DX monogram)
   Dark navy premium · Blue / Cyan / Violet · Tech / SaaS / IA / Cloud
   Same --dx-* token names as v1 so existing markup re-skins cleanly.
   Official gradient: linear-gradient(135deg,#38BDF8,#2563EB,#7C3AED)
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Sora:wght@600;700;800&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");

:root {
  /* ---------- Canvas & surfaces (dark navy) ---------- */
  --dx-canvas:        #060B16;
  --dx-canvas-deep:   #020617;
  --dx-surface:       #0C1426;
  --dx-elevated:      #142035;
  --dx-overlay:       #1C2942;
  --dx-scrim:         rgba(2, 6, 23, 0.74);

  /* glass surfaces */
  --dx-glass:         rgba(18, 28, 51, 0.55);
  --dx-glass-strong:  rgba(20, 32, 58, 0.72);

  /* ---------- Borders ---------- */
  --dx-border-subtle:  rgba(255, 255, 255, 0.06);
  --dx-border-default: rgba(255, 255, 255, 0.10);
  --dx-border-strong:  rgba(255, 255, 255, 0.16);
  --dx-border-focus:   rgba(59, 130, 246, 0.55);

  /* ---------- Foreground ---------- */
  --dx-fg-primary:    #F8FAFC;
  --dx-fg-secondary:  #CBD5E1;
  --dx-fg-tertiary:   #94A3B8;
  --dx-fg-muted:      #64748B;
  --dx-fg-on-accent:  #FFFFFF;

  /* ---------- Signature accent · primary blue ---------- */
  --dx-accent:        #2563EB;
  --dx-accent-hover:  #3B82F6;
  --dx-accent-press:  #1D4ED8;
  --dx-accent-soft:   rgba(37, 99, 235, 0.16);
  --dx-accent-glow:   rgba(56, 189, 248, 0.50);

  /* ---------- Secondary accent · violet ---------- */
  --dx-accent-2:      #7C3AED;
  --dx-accent-2-soft: rgba(124, 58, 237, 0.16);
  --dx-accent-2-glow: rgba(124, 58, 237, 0.45);

  /* ---------- Tertiary · cyan glow ---------- */
  --dx-cyan:          #22D3EE;
  --dx-cyan-2:        #38BDF8;
  --dx-cyan-soft:     rgba(34, 211, 238, 0.14);

  /* The DEVIX gradient — brand moments (mark, X, CTAs, key details) */
  --dx-gradient:      linear-gradient(135deg, #38BDF8 0%, #2563EB 45%, #7C3AED 100%);
  --dx-gradient-soft: linear-gradient(135deg, rgba(56,189,248,0.18), rgba(124,58,237,0.18));

  /* ---------- System status ---------- */
  --dx-success:       #22C55E;
  --dx-success-soft:  rgba(34, 197, 94, 0.14);
  --dx-warning:       #F59E0B;
  --dx-warning-soft:  rgba(245, 158, 11, 0.16);
  --dx-danger:        #EF4444;
  --dx-danger-soft:   rgba(239, 68, 68, 0.16);
  --dx-info:          #38BDF8;
  --dx-info-soft:     rgba(56, 189, 248, 0.16);

  /* ---------- Typography ---------- */
  --dx-font-display:  "Space Grotesk", "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dx-font-wordmark: "Sora", "Space Grotesk", system-ui, -apple-system, sans-serif;
  --dx-font-ui:       "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --dx-font-mono:     "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --dx-fs-2xs: 11px;  --dx-fs-xs: 12px;  --dx-fs-sm: 13px;  --dx-fs-base: 14px;
  --dx-fs-md: 16px;   --dx-fs-lg: 18px;  --dx-fs-xl: 22px;  --dx-fs-2xl: 28px;
  --dx-fs-3xl: 36px;  --dx-fs-4xl: 48px; --dx-fs-5xl: 64px; --dx-fs-6xl: 88px;
  --dx-fs-7xl: 120px;

  --dx-fw-regular: 400; --dx-fw-medium: 500; --dx-fw-semibold: 600; --dx-fw-bold: 700;

  --dx-lh-display: 1.04; --dx-lh-tight: 1.14; --dx-lh-snug: 1.34; --dx-lh-body: 1.6;

  --dx-track-display: -0.03em; --dx-track-tight: -0.01em; --dx-track-normal: 0;
  --dx-track-wide: 0.06em; --dx-track-eyebrow: 0.18em;

  /* ---------- Spacing (4px base) ---------- */
  --dx-1: 4px; --dx-2: 8px; --dx-3: 12px; --dx-4: 16px; --dx-5: 20px; --dx-6: 24px;
  --dx-7: 32px; --dx-8: 40px; --dx-9: 48px; --dx-10: 64px; --dx-11: 80px; --dx-12: 96px;
  --dx-13: 128px; --dx-14: 160px;

  /* ---------- Radii ---------- */
  --dx-r-xs: 6px; --dx-r-sm: 8px; --dx-r-md: 10px; --dx-r-lg: 14px;
  --dx-r-xl: 20px; --dx-r-2xl: 24px; --dx-r-3xl: 32px; --dx-r-full: 9999px;

  /* ---------- Elevation ---------- */
  --dx-ring-1: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(255,255,255,0.06);
  --dx-ring-2: inset 0 1px 0 rgba(255,255,255,0.07), 0 0 0 1px rgba(255,255,255,0.09);
  --dx-shadow-sm: 0 1px 2px rgba(0,0,0,0.35), 0 1px 1px rgba(0,0,0,0.24);
  --dx-shadow-md: 0 8px 24px rgba(0,0,0,0.42), 0 2px 6px rgba(0,0,0,0.30);
  --dx-shadow-lg: 0 24px 54px rgba(2,6,23,0.60), 0 6px 18px rgba(0,0,0,0.40);
  --dx-shadow-xl: 0 44px 104px rgba(2,6,23,0.68), 0 12px 32px rgba(0,0,0,0.46);
  --dx-shadow-accent: 0 14px 42px rgba(37,99,235,0.40), 0 0 0 1px rgba(56,189,248,0.24);

  /* ---------- Motion ---------- */
  --dx-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dx-ease-in:  cubic-bezier(0.5, 0, 0.75, 0);
  --dx-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dx-dur-fast: 120ms; --dx-dur-base: 220ms; --dx-dur-slow: 320ms; --dx-dur-page: 480ms;

  /* ---------- Layout ---------- */
  --dx-content-max: 1200px;
  --dx-wide-max: 1320px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--dx-font-ui);
  font-size: var(--dx-fs-base);
  line-height: var(--dx-lh-body);
  color: var(--dx-fg-primary);
  background: var(--dx-canvas);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(37,99,235,0.34); color: #fff; }
a { color: inherit; text-decoration: none; }

/* ---------- Semantic type ---------- */
.dx-eyebrow { font-family: var(--dx-font-ui); font-size: var(--dx-fs-2xs); font-weight: 600;
  letter-spacing: var(--dx-track-eyebrow); text-transform: uppercase; color: var(--dx-fg-tertiary); }
.dx-mono, code, kbd, samp { font-family: var(--dx-font-mono); font-feature-settings: "tnum"; }

.dx-accent { color: var(--dx-accent); }
.dx-accent-2 { color: var(--dx-accent-2); }
.dx-grad-text { background: var(--dx-gradient); -webkit-background-clip: text;
  background-clip: text; color: transparent; }
.dx-dim { color: var(--dx-fg-tertiary); }

/* ---------- Live node pulse ---------- */
@keyframes dx-pulse {
  0% { transform: scale(1); opacity: 0.85; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}
.dx-live { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--dx-cyan-2); box-shadow: 0 0 12px var(--dx-accent-glow); }
.dx-live::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--dx-cyan-2); animation: dx-pulse 1.8s var(--dx-ease-out) infinite; }

@media (prefers-reduced-motion: reduce) {
  .dx-live::after { animation: none; }
}