/* ============================================================
   Aurora Network Solutions — Design Tokens
   Colors, type, spacing, radii, shadows, motion.
   Reference these vars from any page or component.
   ============================================================ */

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

:root {
  /* ----- Surfaces (dark canvas is default) ----- */
  --bg-deep:     #0A0E1F;   /* the night-sky base, behind everything */
  --bg-elev-1:   #131A30;   /* cards / elevated panels */
  --bg-elev-2:   #1B2342;   /* hover / nested surface */
  --bg-elev-3:   #242C4D;   /* inputs, contrast bumps */

  /* ----- Foreground ----- */
  --fg-1:        #F5EFE3;   /* primary cream — body & headings */
  --fg-2:        #A8B0C4;   /* secondary — descriptive text */
  --fg-3:        #5C6580;   /* tertiary / dim — captions, metadata */
  --fg-on-aurora:#0A0E1F;   /* text on aurora-gradient buttons */

  /* ----- Borders ----- */
  --border-quiet: rgba(245, 239, 227, 0.08);
  --border-soft:  rgba(245, 239, 227, 0.16);
  --border-strong:rgba(245, 239, 227, 0.32);

  /* ----- The aurora palette (signature accents) ----- */
  --aurora-green:   #3DDC8C;
  --aurora-teal:    #2EB8C6;
  --aurora-blue:    #4A8FE7;
  --aurora-purple:  #8B5CF6;
  --aurora-magenta: #C04AB8;
  --aurora-coral:   #F36B6B;
  --aurora-amber:   #F4A261;

  /* ----- Semantic ----- */
  --success: var(--aurora-green);
  --info:    var(--aurora-blue);
  --warning: var(--aurora-amber);
  --danger:  var(--aurora-coral);

  /* ----- The aurora ribbon (THE signature motif) ----- */
  --aurora-ribbon:
    linear-gradient(110deg,
      #3DDC8C 0%,
      #2EB8C6 22%,
      #4A8FE7 45%,
      #8B5CF6 68%,
      #C04AB8 85%,
      #F36B6B 100%);

  /* A subtler, cooler subset for backgrounds and dividers */
  --aurora-cool:
    linear-gradient(110deg, #3DDC8C 0%, #4A8FE7 50%, #8B5CF6 100%);

  /* Hero protection gradient — sit photography behind this */
  --protection-gradient:
    linear-gradient(180deg, rgba(10,14,31,0) 0%, rgba(10,14,31,0.85) 100%);

  /* ----- Type ----- */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (modular 1.25, slight tweaks at the top) */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  40px;
  --text-4xl:  56px;
  --text-5xl:  72px;
  --text-6xl:  96px;
  --text-7xl:  120px;   /* the hero "Secure. Connected. Hassle-Free." moment */

  /* Line heights */
  --leading-tight:   1.05;   /* huge display headlines */
  --leading-snug:    1.15;   /* H1 / H2 */
  --leading-normal:  1.5;    /* body */
  --leading-relaxed: 1.65;   /* long-form */

  /* Tracking */
  --tracking-display: -0.02em;  /* big display, slightly tightened */
  --tracking-heading: -0.01em;
  --tracking-body:    0;
  --tracking-eyebrow: 0.08em;   /* uppercase eyebrow labels */

  /* ----- Spacing (4-pt base) ----- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ----- Radius ----- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  20px;     /* default card */
  --radius-xl:  28px;
  --radius-full: 9999px;  /* buttons / pills / capsules */

  /* ----- Shadows (glow-leaning, not drop) ----- */
  --shadow-card:
    0 1px 2px rgba(0,0,0,0.4),
    0 12px 32px rgba(20,12,60,0.35);
  --shadow-card-hover:
    0 1px 2px rgba(0,0,0,0.4),
    0 18px 48px rgba(20,12,60,0.48);
  --shadow-modal:
    0 8px 12px rgba(0,0,0,0.4),
    0 32px 80px rgba(10,8,40,0.6);

  /* Aurora glows — for accents and primary CTAs */
  --glow-blue:    0 0 40px rgba(74,143,231,0.4);
  --glow-purple:  0 0 40px rgba(139,92,246,0.4);
  --glow-green:   0 0 40px rgba(61,220,140,0.35);
  --glow-aurora:
    0 0 32px rgba(74,143,231,0.25),
    0 0 64px rgba(139,92,246,0.18);

  /* ----- Motion ----- */
  --ease-aurora:   cubic-bezier(0.32, 0.72, 0, 1);  /* confident ease-out */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-micro:     200ms;
  --dur-component: 320ms;
  --dur-entrance:  600ms;

  /* ----- Layout ----- */
  --container-max: 1240px;
  --gutter:        24px;
  --nav-h-desktop: 72px;
  --nav-h-mobile:  56px;
}

/* ============================================================
   Semantic helpers — class-style tokens
   Use these directly on elements, or copy into your own classes.
   ============================================================ */

html { color-scheme: dark; }

body, .ans-body {
  background: var(--bg-deep);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ----- Display & headings ----- */
.ans-display-hero {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(56px, 9vw, var(--text-7xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
}
.ans-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 6vw, var(--text-5xl));
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
}
.ans-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4vw, var(--text-4xl));
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-heading);
  color: var(--fg-1);
}
.ans-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-heading);
  color: var(--fg-1);
}
.ans-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}
.ans-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--aurora-blue);
}
.ans-body-lg {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}
.ans-body-md {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}
.ans-caption {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-3);
}
.ans-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0;
  color: var(--fg-2);
}

/* The signature aurora-gradient text treatment (use sparingly — one phrase per page) */
.ans-text-aurora {
  background: var(--aurora-ribbon);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  background-size: 200% 100%;
  animation: ans-aurora-drift 12s var(--ease-aurora) infinite alternate;
}
@keyframes ans-aurora-drift {
  0%   { background-position:   0% 50%; }
  100% { background-position: 100% 50%; }
}

/* ----- Buttons ----- */
.ans-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 48px;
  padding: 0 var(--space-6);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  letter-spacing: 0;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background var(--dur-micro) var(--ease-aurora),
    border-color var(--dur-micro) var(--ease-aurora),
    box-shadow var(--dur-component) var(--ease-aurora),
    filter var(--dur-micro) var(--ease-aurora);
  text-decoration: none;
  white-space: nowrap;
}
.ans-btn-primary {
  background: var(--aurora-ribbon);
  /* no-repeat + 1px oversize kills the wrapped edge slivers (see
     .btn--primary in site.css). Replaces the old 200% slide setup. */
  background-repeat: no-repeat;
  background-size: calc(100% + 2px) calc(100% + 2px);
  background-position: center;
  color: var(--fg-on-aurora);
  box-shadow: var(--glow-aurora);
}
.ans-btn-primary:hover {
  filter: brightness(1.06);
  background-position: 100% 50%;
  box-shadow: var(--glow-aurora), 0 0 60px rgba(139,92,246,0.35);
}
.ans-btn-primary:active { filter: brightness(0.96); }

.ans-btn-secondary {
  background: transparent;
  color: var(--fg-1);
  border-color: var(--border-soft);
}
.ans-btn-secondary:hover {
  background: var(--bg-elev-1);
  border-color: var(--border-strong);
}
.ans-btn-ghost {
  background: transparent;
  color: var(--fg-1);
  border-color: transparent;
}
.ans-btn-ghost:hover { background: var(--bg-elev-1); }

.ans-btn-sm { height: 36px; padding: 0 var(--space-4); font-size: var(--text-sm); }
.ans-btn-lg { height: 56px; padding: 0 var(--space-8); font-size: var(--text-md); }

/* ----- Cards ----- */
.ans-card {
  background: var(--bg-elev-1);
  border: 1px solid var(--border-quiet);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-8);
  transition: box-shadow var(--dur-component) var(--ease-aurora),
              border-color var(--dur-component) var(--ease-aurora);
}
.ans-card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--border-soft);
}
.ans-card-aurora-edge {
  position: relative;
}
.ans-card-aurora-edge::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--aurora-cool);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  opacity: 0.9;
}

/* ----- Inputs ----- */
.ans-input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 var(--space-4);
  background: var(--bg-elev-2);
  color: var(--fg-1);
  border: 1px solid var(--border-quiet);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color var(--dur-micro) var(--ease-aurora),
              box-shadow var(--dur-micro) var(--ease-aurora);
}
.ans-input::placeholder { color: var(--fg-3); }
.ans-input:focus {
  outline: none;
  border-color: var(--aurora-blue);
  box-shadow: 0 0 0 2px rgba(74,143,231,0.25);
}

/* ----- Chips / badges ----- */
.ans-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 28px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--bg-elev-2);
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  border: 1px solid var(--border-quiet);
}

/* ----- Divider ----- */
.ans-divider {
  height: 1px;
  width: 100%;
  background: var(--border-quiet);
  border: 0;
}
.ans-divider-aurora {
  height: 1px;
  width: 100%;
  background: var(--aurora-ribbon);
  opacity: 0.6;
  border: 0;
}

/* ----- Container ----- */
.ans-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ----- Starfield background motif (sparse, low-opacity) ----- */
.ans-starfield {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(245,239,227,0.6), transparent 60%),
    radial-gradient(1px 1px at 78% 32%, rgba(245,239,227,0.5), transparent 60%),
    radial-gradient(1px 1px at 32% 72%, rgba(245,239,227,0.45), transparent 60%),
    radial-gradient(2px 2px at 88% 78%, rgba(245,239,227,0.35), transparent 60%),
    radial-gradient(1px 1px at 56% 14%, rgba(245,239,227,0.45), transparent 60%),
    radial-gradient(1px 1px at 22% 48%, rgba(245,239,227,0.4), transparent 60%),
    radial-gradient(1px 1px at 68% 88%, rgba(245,239,227,0.5), transparent 60%);
}

/* ----- Focus ring (apply to any focusable) ----- */
.ans-focus:focus-visible {
  outline: 2px solid var(--aurora-blue);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}