/* ============================================================
   AMPLAI — Colors & Type
   Brand: cobalt blue + electric green + teal accent
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---------- Brand colors (from AMPLAI Branding.txt) ---------- */
  --amp-cobalt:      #004aad;   /* Colour 1 - primary brand */
  --amp-green:       #71dd11;   /* Colour 2 - energy / action accent */
  --amp-teal:        #18c5cc;   /* Colour 3 - secondary accent */

  /* Cobalt scale (tinted/shaded around #004aad) */
  --amp-cobalt-50:   #eaf2ff;
  --amp-cobalt-100:  #cfe0ff;
  --amp-cobalt-200:  #9ac0ff;
  --amp-cobalt-300:  #5e99ff;
  --amp-cobalt-400:  #2a72e8;
  --amp-cobalt-500:  #004aad;   /* = --amp-cobalt */
  --amp-cobalt-600:  #003d91;
  --amp-cobalt-700:  #003073;
  --amp-cobalt-800:  #002355;
  --amp-cobalt-900:  #001736;

  /* Green scale */
  --amp-green-50:    #f1fbe2;
  --amp-green-100:   #ddf6bd;
  --amp-green-200:   #bff089;
  --amp-green-300:   #9ce74f;
  --amp-green-400:   --amp-green;
  --amp-green-500:   #71dd11;
  --amp-green-600:   #5bb80c;
  --amp-green-700:   #458d09;
  --amp-green-800:   #336808;
  --amp-green-900:   #234807;

  /* Teal scale */
  --amp-teal-50:     #e4fafb;
  --amp-teal-100:    #bdf2f4;
  --amp-teal-200:    #86e7ea;
  --amp-teal-300:    #47d6db;
  --amp-teal-400:    #18c5cc;   /* = --amp-teal */
  --amp-teal-500:    #12a8af;
  --amp-teal-600:    #0f878d;
  --amp-teal-700:    #0c6a6f;
  --amp-teal-800:    #094e52;
  --amp-teal-900:    #063438;

  /* Neutrals — slightly cool, to sit with cobalt */
  --amp-ink:         #0a1530;   /* near-black, blue-cast */
  --amp-slate-900:   #111a33;
  --amp-slate-800:   #1f2a4a;
  --amp-slate-700:   #3a4566;
  --amp-slate-600:   #5a6486;
  --amp-slate-500:   #7b85a6;
  --amp-slate-400:   #a3abc3;
  --amp-slate-300:   #c6cbdb;
  --amp-slate-200:   #dde1ec;
  --amp-slate-100:   #eef1f7;
  --amp-slate-50:    #f6f8fc;
  --amp-white:       #ffffff;

  /* Semantic — status */
  --amp-success:     var(--amp-green-600);
  --amp-success-bg:  var(--amp-green-50);
  --amp-warning:     #e89b1a;
  --amp-warning-bg:  #fff4dd;
  --amp-danger:      #d63650;
  --amp-danger-bg:   #fce6ea;
  --amp-info:        var(--amp-teal-500);
  --amp-info-bg:     var(--amp-teal-50);

  /* Semantic — foreground / background tokens */
  --fg-1:            var(--amp-ink);          /* primary text */
  --fg-2:            var(--amp-slate-700);    /* body/secondary */
  --fg-3:            var(--amp-slate-500);    /* muted / captions */
  --fg-4:            var(--amp-slate-400);    /* disabled / placeholder */
  --fg-on-brand:     #ffffff;                 /* text on cobalt/green/teal */
  --fg-accent:       var(--amp-cobalt-500);   /* links, primary accent text */

  --bg-1:            #ffffff;                 /* page */
  --bg-2:            var(--amp-slate-50);     /* subtle surface */
  --bg-3:            var(--amp-slate-100);    /* recessed / hover wells */
  --bg-brand:        var(--amp-cobalt-500);
  --bg-brand-soft:   var(--amp-cobalt-50);
  --bg-accent-green: var(--amp-green-500);
  --bg-accent-teal:  var(--amp-teal-400);

  /* Borders & dividers */
  --border-1:        var(--amp-slate-200);
  --border-2:        var(--amp-slate-300);
  --border-focus:    var(--amp-cobalt-500);
  --divider:         var(--amp-slate-200);

  /* ---------- Typography ---------- */
  --font-display:    'Nunito', 'Quicksand', ui-rounded, system-ui, sans-serif;
  --font-body:       'DM Sans', 'Nunito', system-ui, -apple-system, sans-serif;
  --font-mono:       'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Weights */
  --fw-regular:      400;
  --fw-medium:       500;
  --fw-semibold:     600;
  --fw-bold:         700;
  --fw-black:        900;

  /* Line heights */
  --lh-tight:        1.05;
  --lh-snug:         1.2;
  --lh-normal:       1.45;
  --lh-relaxed:      1.65;

  /* Letter spacing */
  --ls-tight:        -0.02em;
  --ls-snug:         -0.01em;
  --ls-normal:       0;
  --ls-wide:         0.04em;
  --ls-wider:        0.08em;   /* for small caps eyebrows */

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

  /* ---------- Radii — the brand leans ROUND ---------- */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-pill: 999px;

  /* ---------- Shadows — soft, cobalt-tinted ---------- */
  --shadow-xs:  0 1px 2px rgba(10, 21, 48, 0.06);
  --shadow-sm:  0 2px 6px rgba(10, 21, 48, 0.08);
  --shadow-md:  0 6px 18px rgba(10, 21, 48, 0.10);
  --shadow-lg:  0 14px 40px rgba(10, 21, 48, 0.14);
  --shadow-xl:  0 24px 60px rgba(0, 74, 173, 0.18);
  --shadow-focus: 0 0 0 3px rgba(0, 74, 173, 0.25);
  --shadow-focus-green: 0 0 0 3px rgba(113, 221, 17, 0.28);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.32, 0, 0.67, 0);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;
}

/* ============================================================
   Base element styles — import this CSS and get h1–h6, p, code,
   buttons etc for free.
   ============================================================ */

html, body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display / Headings — rounded geometric Nunito, heavy weights */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(2.5rem, 5vw, 4.5rem);   /* 40–72px */
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(2rem, 3.5vw, 3rem);     /* 32–48px */
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1.5rem, 2.4vw, 2rem);   /* 24–32px */
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 1.25rem;                       /* 20px */
  line-height: var(--lh-snug);
}

h5, .h5 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 1rem;
  line-height: var(--lh-snug);
}

h6, .h6, .eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: 0.75rem;                       /* 12px */
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--amp-cobalt-500);
}

p, .body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.lead {
  font-family: var(--font-body);
  font-size: 1.25rem;
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

small, .small, .caption {
  font-size: 0.8125rem;      /* 13px */
  color: var(--fg-3);
}

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

code {
  background: var(--bg-3);
  padding: 0.1em 0.4em;
  border-radius: var(--r-xs);
  color: var(--amp-cobalt-700);
}

a {
  color: var(--fg-accent);
  text-decoration: none;
  font-weight: var(--fw-medium);
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--amp-cobalt-400); text-decoration: underline; text-underline-offset: 3px; }

hr {
  border: none;
  border-top: 1px solid var(--divider);
  margin: var(--s-8) 0;
}

::selection {
  background: var(--amp-green-200);
  color: var(--amp-cobalt-900);
}