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

:root {
  --color-primary-50:  #f1f1fa;
  --color-primary-100: #e0e1f4;
  --color-primary-200: #c8c9ec;
  --color-primary-300: #a4a6df;
  --color-primary-400: #8b8dd5;
  --color-primary-500: #7275cc;
  --color-primary-600: #5a5fbb;
  --color-primary-700: #4d52a4;
  --color-primary-800: #404685;
  --color-primary-900: #383c69;
  --color-primary-950: #232444;
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.theme-base .background,
.theme-simple .background,
.theme-split .background {
  background-color: #fafafb;
  background-image:
    radial-gradient(circle at 8% 12%, rgba(240, 125, 37, 0.10) 0%, transparent 38%),
    radial-gradient(circle at 92% 18%, rgba(192, 132, 252, 0.10) 0%, transparent 40%),
    radial-gradient(circle at 50% 95%, rgba(3, 216, 255, 0.08) 0%, transparent 45%);
  background-attachment: fixed;
}

.theme-split .side-background {
  position: relative;
  overflow: hidden;

  background-color: transparent;
  background-image:
    radial-gradient(ellipse 65% 55% at 30% 35%, rgba(240, 125, 37, 0.55), transparent 70%),
    radial-gradient(ellipse 65% 55% at 75% 70%, rgba(192, 132, 252, 0.50), transparent 70%),
    radial-gradient(ellipse 70% 55% at 55% 50%, rgba(3, 216, 255, 0.40), transparent 70%),
    linear-gradient(135deg, rgba(240, 125, 37, 0.10) 0%, rgba(192, 132, 252, 0.14) 50%, rgba(3, 216, 255, 0.10) 100%);
  background-repeat: no-repeat;
  animation: aurora 28s ease-in-out infinite alternate;
}

@keyframes aurora {
  from { background-position: 25% 30%, 80% 75%, 50% 50%, 0 0; }
  to   { background-position: 40% 45%, 65% 55%, 60% 50%, 0 0; }
}

.theme-split .side-background::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 900'%3E%3Cdefs%3E%3ClinearGradient id='hg' gradientUnits='userSpaceOnUse' x1='90' y1='290' x2='610' y2='450'%3E%3Cstop offset='0' stop-color='%23f07d25'/%3E%3Cstop offset='0.4' stop-color='%23e05a9e'/%3E%3Cstop offset='0.65' stop-color='%23c084fc'/%3E%3Cstop offset='1' stop-color='%236dd5ed'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg font-family='Inter, system-ui, -apple-system, sans-serif' text-anchor='middle' fill='url(%23hg)'%3E%3Ctext x='350' y='360' font-size='64' font-weight='800' letter-spacing='-1.5'%3EUnlimited devices.%3C/text%3E%3Ctext x='350' y='435' font-size='64' font-weight='800' letter-spacing='-1.5'%3EUnlimited data.%3C/text%3E%3C/g%3E%3Cg font-family='Inter, system-ui, -apple-system, sans-serif' text-anchor='middle' fill='rgb(71,85,105)' font-size='20' opacity='0.9'%3E%3Ctext x='350' y='510'%3EAs many devices as you need.%3C/text%3E%3Ctext x='350' y='540'%3EAs much data as they produce.%3C/text%3E%3C/g%3E%3Ctext x='350' y='620' font-family='Inter, system-ui, -apple-system, sans-serif' text-anchor='middle' font-size='24' font-weight='500' fill='rgb(15,23,42)' opacity='0.95'%3EThe bigger your fleet, the better Connhex gets.%3C/text%3E%3C/svg%3E");
}