/* ========================================
   AgentTrust ID — Graph Cloud Design System
   Shared marketing tokens and brand primitives.
   Keep dashboard Graph Cloud tokens in web/src/design/presets/graph-cloud.ts aligned.
   ======================================== */

:root {
  --bg-canvas: #061127;
  --bg-base: #08162f;
  --bg-elevated: #0d1d3d;
  --surface: rgba(15, 30, 58, 0.92);
  --surface-muted: rgba(18, 38, 72, 0.84);
  --surface-strong: rgba(24, 48, 90, 0.92);
  --surface-inset: #0b1a35;
  --border: rgba(129, 167, 255, 0.22);
  --border-strong: rgba(87, 133, 255, 0.38);
  --border-soft: rgba(129, 167, 255, 0.1);
  --text-primary: #eef4ff;
  --text-secondary: #c5d1ea;
  --text-muted: #8ea0c4;
  --brand: #5a86ff;
  --brand-hover: #7ba0ff;
  --brand-active: #335fe3;
  --brand-contrast: var(--bg-canvas);
  --brand-tint: rgba(79, 124, 255, 0.16);
  --brand-glow: rgba(79, 124, 255, 0.28);
  --accent: #8fdfff;
  --accent-tint: rgba(126, 217, 255, 0.18);
  --success: #4fd68f;
  --danger: #f88095;
  --warning: #f6c05b;
  --info: #8fdfff;
  --success-soft: rgba(66, 204, 132, 0.14);
  --danger-soft: rgba(242, 112, 139, 0.14);
  --warning-soft: rgba(242, 177, 74, 0.14);
  --info-soft: rgba(126, 217, 255, 0.1);
  --gradient-brand: linear-gradient(135deg, #4f7cff 0%, #7ed9ff 100%);
  --gradient-brand-hover: linear-gradient(135deg, #6890ff 0%, #99e3ff 100%);
  --gradient-app:
    radial-gradient(circle at 80% 0%, rgba(79, 124, 255, 0.18), transparent 42%),
    radial-gradient(circle at 10% 100%, rgba(126, 217, 255, 0.12), transparent 42%),
    linear-gradient(180deg, #08162f 0%, #061127 100%);
  --gradient-mesh:
    linear-gradient(rgba(129, 167, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(129, 167, 255, 0.045) 1px, transparent 1px);
  --shadow-sm: 0 12px 30px rgba(2, 7, 20, 0.24);
  --shadow-md: 0 24px 52px rgba(2, 7, 20, 0.32);
  --shadow-lg: 0 36px 84px rgba(2, 7, 20, 0.4);
  --shadow-glow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 4px 12px rgba(79, 124, 255, 0.28);
  --shadow-glow-hover: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 8px 20px rgba(79, 124, 255, 0.4);
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --font-body: 'Manrope', 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', ui-monospace, monospace;
  --container: 1200px;
  --container-narrow: 800px;
  --section-pad-y: clamp(56px, 7vw, 88px);
  --section-pad-x: clamp(20px, 5vw, 32px);
  --mesh-section-opacity: 0.12;
  --focus-ring: 0 0 0 3px rgba(79, 124, 255, 0.5);
}

.logo-mark {
  background: var(--gradient-brand);
  color: var(--bg-canvas);
  box-shadow: var(--shadow-glow);
}

.logo-text {
  color: var(--text-primary);
}

.logo-text span {
  color: var(--accent);
}

.nav-cta,
.btn-primary,
.button-primary,
.not-found .button-primary,
.legal-doc .button-primary {
  background: var(--gradient-brand);
  color: var(--bg-canvas);
  box-shadow: var(--shadow-glow);
}

.nav-cta:hover,
.btn-primary:hover,
.btn-primary:focus-visible,
.button-primary:hover,
.not-found .button-primary:hover,
.legal-doc .button-primary:hover {
  background: var(--gradient-brand-hover);
  color: var(--bg-canvas);
  box-shadow: var(--shadow-glow-hover);
}

.mesh-bg::before {
  background: var(--gradient-mesh);
  background-size: 64px 64px;
  opacity: var(--mesh-section-opacity);
}