/* ============================================================
   Sostratus brand foundation, derived from @sostratus/design-tokens
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300..700&display=swap');

:root {
  /* surfaces */
  --bg:        #0B0B0D;
  --bg-deep:   #070708;
  --paper:     #141418;
  --card:      #111115;
  --card-2:    #16161c;
  --header-bg: #08080A;

  /* brand */
  --primary:   #a78bfa;   /* light violet */
  --accent:    #9180d4;   /* muted violet */
  --violet-deep:#6d28d9;  /* logo fill */
  --chip-text: #bdb0f6;
  --code:      #c084fc;

  /* text */
  --tx:        #ECEAF4;
  --tx-2:      #B0AFB8;
  --tx-3:      #706F7A;
  --tx-4:      #56555E;

  /* lines */
  --divider:   rgba(242,242,244,0.08);
  --divider-2: rgba(242,242,244,0.05);
  --hair:      rgba(242,242,244,0.12);

  /* status */
  --ok:   #34d399;
  --warn: #f0a060;
  --err:  #f06080;
  --info: #60bce0;

  /* type */
  --sans: 'Afacad', system-ui, sans-serif;
  --mono: 'Google Sans Code', 'JetBrains Mono', ui-monospace, monospace;

  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 22px;

  --glass-bg: rgba(17,17,21,0.65);
  --glass-border: rgba(242,242,244,0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- shared primitives used across directions ---- */
.mono { font-family: var(--mono); }

.kicker {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}

.eyebrow-dot::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--primary);
  margin-right: 9px;
  vertical-align: middle;
  box-shadow: 0 0 10px var(--primary);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  background: rgba(145,128,212,0.13);
  color: var(--chip-text);
  border: 1px solid rgba(145,128,212,0.25);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  padding: 13px 22px;
  border-radius: var(--r-md);
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--primary);
  color: #1c1c21;
  box-shadow: 0 0 0 0 rgba(167,139,250,0);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(167,139,250,0.28);
}
.btn-ghost {
  background: transparent;
  color: var(--tx);
  border-color: var(--hair);
}
.btn-ghost:hover { border-color: var(--accent); color: #fff; }

.logo-mark { display: block; }

/* topology / dashboard mock helpers */
.grid-bg {
  background-image:
    linear-gradient(rgba(242,242,244,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242,242,244,0.035) 1px, transparent 1px);
  background-size: 40px 40px;
}
.noise-glow {
  background:
    radial-gradient(60% 50% at 70% 30%, rgba(145,128,212,0.18), transparent 70%),
    radial-gradient(50% 60% at 20% 80%, rgba(109,40,217,0.14), transparent 70%);
}

.hairline { height: 1px; background: var(--divider); border: 0; }