/* =========================================================================
   Netholabs — Colors & Type tokens
   Brand font: Circular (supplied by user as circular-book.ttf).
   Only the "Book" (≈400) weight was provided; heavier weights fall back to
   Circular's nearest available alternate (Mulish), and italic accents use
   Fraunces light italic for the signature "imagination"-style treatment.
   Drop circular-medium.ttf / circular-bold.ttf into fonts/ and add matching
   @font-face blocks to unlock those weights.
   ========================================================================= */

@font-face {
  font-family: 'Circular';
  src: url('fonts/circular-book.ttf') format('truetype');
  font-weight: 100 600;   /* Book covers light → semibold visually */
  font-style: normal;
  font-display: swap;
}
@font-face {
  /* Reuse Book for heavier weights until real bold is supplied */
  font-family: 'Circular';
  src: url('fonts/circular-book.ttf') format('truetype');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;600;700&family=Fraunces:ital,opsz,wght@1,144,300;1,144,400&display=swap');

:root {
  /* ---------- Brand colors — drawn directly from butterfly-bg.png ---------- */
  --sky-100: #e9f2fb;          /* hazy horizon — top of gradient */
  --sky-200: #c6dcf2;
  --sky-300: #8fb8e6;
  --sky-400: #5d93d9;
  --sky-500: #2e6fc8;          /* mid-band brand blue */
  --sky-600: #1854b3;          /* primary brand blue (logo gradient end) */
  --sky-700: #0f3f93;          /* deep ocean */
  --sky-800: #0a2f74;
  --sky-900: #071f52;

  /* Logo gradient stops (measured from Logo.png) */
  --logo-grad-from: #dfe9f5;
  --logo-grad-to:   #1a7cff;

  /* ---------- Neutrals ---------- */
  --white:  #ffffff;
  --fg-1:   #ffffff;           /* on blue backgrounds */
  --fg-2:   rgba(255,255,255,0.78);
  --fg-3:   rgba(255,255,255,0.55);
  --fg-4:   rgba(255,255,255,0.30);
  --ink-1:  #0a1d3a;           /* on white backgrounds */
  --ink-2:  #3b527a;
  --ink-3:  #7689a5;

  /* ---------- Surfaces ---------- */
  --glass-fill:   rgba(255,255,255,0.12);
  --glass-fill-2: rgba(255,255,255,0.18);
  --glass-stroke: rgba(255,255,255,0.28);
  --glass-stroke-2: rgba(255,255,255,0.40);

  /* ---------- Type ---------- */
  --font-sans:    'Circular', 'Mulish', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-display: 'Circular', 'Mulish', sans-serif;
  --font-italic:  'Fraunces', 'Circular', serif; /* for accented italic words like "imagination" */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* Type scale — hero is huge per reference */
  --t-display:   clamp(52px, 7.5vw, 104px);
  --t-h1:        clamp(40px, 5vw, 72px);
  --t-h2:        clamp(32px, 3.6vw, 48px);
  --t-h3:        24px;
  --t-body-lg:   18px;
  --t-body:      16px;
  --t-small:     14px;
  --t-caption:   12px;
  --t-eyebrow:   11px;         /* uppercase tracked labels */

  --ls-tight:    -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.08em;
  --ls-wider:    0.18em;

  /* ---------- 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;

  /* ---------- Radii ---------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;
  --r-capsule: 999px;

  /* ---------- Shadows / elevation ---------- */
  --shadow-glass: 0 10px 40px rgba(7, 31, 82, 0.25), inset 0 1px 0 rgba(255,255,255,0.35);
  --shadow-soft:  0 8px 24px rgba(7, 31, 82, 0.18);
  --shadow-deep:  0 24px 60px rgba(7, 31, 82, 0.35);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 160ms;
  --t-base: 260ms;
  --t-slow: 520ms;
}

/* =========================================================================
   Semantic element styles — apply directly, or use as mixins
   ========================================================================= */
.h-display {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--t-display);
  line-height: 0.98;
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
.h-display em,
.h-display .accent {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 300;
  color: var(--fg-2);
}

.h1 { font: var(--fw-regular) var(--t-h1)/1.05 var(--font-display); letter-spacing: var(--ls-tight); }
.h2 { font: var(--fw-regular) var(--t-h2)/1.1 var(--font-display); letter-spacing: var(--ls-tight); }
.h3 { font: var(--fw-medium) var(--t-h3)/1.25 var(--font-sans); }
.body-lg { font: var(--fw-regular) var(--t-body-lg)/1.55 var(--font-sans); }
.body    { font: var(--fw-regular) var(--t-body)/1.6 var(--font-sans); }
.small   { font: var(--fw-regular) var(--t-small)/1.55 var(--font-sans); }
.eyebrow {
  font: var(--fw-semibold) var(--t-eyebrow)/1 var(--font-sans);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}

/* ---------- Capsule / pill primitives ---------- */
.capsule {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--glass-fill);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  color: var(--fg-1);
  font: var(--fw-medium) 14px/1 var(--font-sans);
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.capsule:hover { background: var(--glass-fill-2); }
.capsule:active { transform: scale(0.98); }