/* ============================================================
   Awesome Technologies — Colors & Typography
   Source of truth: Farbcodes.zip (AT corporate palette + AMP palette)
   ============================================================ */

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

:root {
  /* ---------- AMP product palette (primary brand axis) ---------- */
  --at-navy:        #21264E; /* RGB 33 38 78  — primary, headers, body bg dark */
  --at-navy-deep:   #161B3A; /* deeper variant for layered depth */
  --at-navy-soft:   #2E345E;
  --at-magenta:     #9D0490; /* RGB 157 4 144 — secondary accent, key CTAs */
  --at-cyan:        #00C5D5; /* RGB 0 197 213 — interactive, highlights */
  --at-mint:        #59FFF7; /* RGB 89 255 247 — energetic accent, glows */

  /* ---------- AT extended corporate palette ---------- */
  --at-yellow:      #FFFC6B; /* 255 252 107 */
  --at-amber:       #FFD66B; /* 255 214 107 */
  --at-sage:        #80C7B6; /* 128 199 182 */
  --at-mint-soft:   #9FD4D2; /* 159 212 210 */
  --at-teal-deep:   #008E8B; /* 0 142 139 */
  --at-coral:       #FC2B52; /* 252 43 82 */
  --at-pink:        #E7226D; /* 231 34 109 */
  --at-purple:      #6F2183; /* 111 33 131 */
  --at-violet:      #2E178C; /* 46 23 140 */

  /* ---------- Neutrals ---------- */
  --at-ink:         #0E1126;
  --at-graphite:    #2A2E45;
  --at-slate:       #5A6079;
  --at-mist:        #9CA1B5;
  --at-fog:         #C9CCD8;
  --at-cloud:       #E6E8EE;
  --at-paper:       #F5F6F9;
  --at-white:       #FFFFFF;

  /* ---------- Semantic foreground / background ---------- */
  --bg:             var(--at-white);
  --bg-elevated:    #FFFFFF;
  --bg-subtle:      var(--at-paper);
  --bg-muted:       var(--at-cloud);
  --bg-inverse:     var(--at-navy);
  --bg-deep:        var(--at-navy-deep);

  --fg:             var(--at-navy);
  --fg-strong:      var(--at-ink);
  --fg-muted:       var(--at-slate);
  --fg-subtle:      var(--at-mist);
  --fg-inverse:     var(--at-white);

  --border:         #DCDFE8;
  --border-strong:  #B7BCCA;
  --border-inverse: rgba(255, 255, 255, 0.14);

  /* Interaction */
  --accent:         var(--at-magenta);
  --accent-fg:      var(--at-white);
  --accent-hover:   #B5159E;
  --link:           var(--at-magenta);
  --link-on-dark:   var(--at-cyan);

  --focus-ring:     0 0 0 3px rgba(0, 197, 213, 0.55);

  /* Status */
  --success:        var(--at-teal-deep);
  --warning:        #C58A00;
  --danger:         var(--at-coral);
  --info:           var(--at-cyan);

  /* ---------- Typography ---------- */
  /* Jura is the closest free Google substitute for the geometric, modular
     letterforms in the Awesome Technologies wordmark (note: the real wordmark
     uses horizontal-cut "E"/"O" glyphs — Jura is similar in spirit but not
     identical). Substitution flagged in README. */
  --font-display:   'Jura', 'Avenir Next', 'Futura', system-ui, sans-serif;
  --font-sans:      'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — 1.25 modular */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  84px;

  --lh-tight: 1.1; /* @kind other */
  --lh-snug:  1.25; /* @kind other */
  --lh-base:  1.55; /* @kind other */
  --lh-loose: 1.7; /* @kind other */

  --tracking-display: 0.14em; /* @kind other */ /* the wordmark uses wide tracking */
  --tracking-eyebrow: 0.22em; /* @kind other */ /* nav links, eyebrow labels */
  --tracking-tight:  -0.01em; /* @kind other */
  --tracking-base:    0; /* @kind other */

  /* ---------- Spacing (4px base) ---------- */
  --s-0:   0; /* @kind spacing */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10: 128px;

  /* ---------- Radius ---------- */
  --r-xs:  2px;
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* ---------- Shadows / elevation ---------- */
  --sh-1: 0 1px 2px rgba(33, 38, 78, 0.06);
  --sh-2: 0 2px 8px rgba(33, 38, 78, 0.08), 0 1px 2px rgba(33, 38, 78, 0.06);
  --sh-3: 0 8px 24px rgba(33, 38, 78, 0.10), 0 2px 6px rgba(33, 38, 78, 0.06);
  --sh-4: 0 18px 48px rgba(33, 38, 78, 0.16), 0 4px 12px rgba(33, 38, 78, 0.08);
  --sh-glow-cyan: 0 0 32px rgba(0, 197, 213, 0.45);
  --sh-glow-mag:  0 0 32px rgba(157, 4, 144, 0.40);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0); /* @kind other */
  --ease-emphasis: cubic-bezier(0.2, 0.8, 0.2, 1.0); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */

  /* ---------- Brand gradients ---------- */
  --grad-night:   radial-gradient(120% 80% at 60% 30%, #3B1D6E 0%, #261649 35%, #161B3A 75%, #0E1126 100%); /* @kind color */
  --grad-aurora:  linear-gradient(135deg, #00C5D5 0%, #2E178C 55%, #9D0490 100%); /* @kind color */
  --grad-spark:   linear-gradient(135deg, #59FFF7 0%, #00C5D5 50%, #21264E 100%); /* @kind color */
}

/* ============================================================
   Element defaults — semantic baseline so plain HTML looks brand-correct
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--fg-strong);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-4xl); font-weight: 600; }
h2 { font-size: var(--fs-3xl); font-weight: 600; }
h3 { font-size: var(--fs-2xl); font-weight: 600; }
h4 { font-size: var(--fs-xl);  font-weight: 600; }
h5 { font-size: var(--fs-lg);  font-weight: 600; }
h6 { font-size: var(--fs-md);  font-weight: 600; }

/* Display headlines — wide tracking, geometric face for hero moments */
.display, .at-display {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}

p { margin: 0 0 var(--s-4); color: var(--fg); text-wrap: pretty; }
small, .text-sm { font-size: var(--fs-sm); }

a {
  color: var(--link);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { text-decoration: underline; text-decoration-thickness: 1px; }

/* Eyebrow / nav-style labels */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-muted);
  padding: 2px 6px;
  border-radius: var(--r-sm);
}

hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--at-magenta) 20%, var(--at-magenta) 80%, transparent);
  margin: var(--s-6) 0;
  opacity: 0.6;
}

::selection { background: var(--at-cyan); color: var(--at-navy); }

/* Focus */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}