/* =========================================================
   hello again — Foundations
   Colors + Typography tokens
   ========================================================= */

@font-face {
  font-family: 'Nexa';
  src: url('_ds/hello-again-design-system-kyra-019ddd7f-9a79-76c2-9b63-6b22e35c0f14/fonts/Nexa-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nexa';
  src: url('_ds/hello-again-design-system-kyra-019ddd7f-9a79-76c2-9b63-6b22e35c0f14/fonts/Nexa-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Brutal';
  src: url('_ds/hello-again-design-system-kyra-019ddd7f-9a79-76c2-9b63-6b22e35c0f14/fonts/BrutalType.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand core ----------
     The two anchor hues form the signature "smart → loyal" gradient.
     Smart (cyan/turquoise) sits on the left, loyal (light green) on the right.
  */
  --ha-smart:        #00A7E1;   /* cyan — "smart" end of the gradient */
  --ha-loyal:        #8BC753;   /* green — "loyal" end of the gradient */
  --ha-smart-mid:    #2B9AA8;   /* teal mid-step used as solo accent */

  /* Signature gradient (always left → right, always smart → loyal) */
  --ha-gradient:     linear-gradient(90deg, #00A7E1 0%, #8BC753 100%); /* @kind color */
  --ha-gradient-45:  linear-gradient(45deg, #00A7E1 0%, #8BC753 100%); /* @kind color */
  --ha-gradient-soft:linear-gradient(90deg, rgba(0,167,225,.12) 0%, rgba(139,199,83,.12) 100%); /* @kind color */

  /* ---------- Neutrals ---------- */
  --ha-ink:          #262D35;   /* Primary dark — body text on light, brand dark */
  --ha-ink-2:        #3A424D;   /* secondary text */
  --ha-ink-3:        #6B7380;   /* tertiary / captions */
  --ha-line:         #D5D8DD;   /* dividers, 1px borders */
  --ha-surface-3:    #F5F6F7;   /* light background tint */
  --ha-surface-2:    #F3F4F6;   /* card tint */
  --ha-surface-1:    #FAFBFC;   /* page bg on light */
  --ha-white:        #FFFFFF;

  /* ---------- Foreground tokens (semantic) ---------- */
  --fg-1: var(--ha-ink);
  --fg-2: var(--ha-ink-2);
  --fg-3: var(--ha-ink-3);
  --fg-on-brand: #FFFFFF;
  --fg-on-dark:  #FFFFFF;

  /* ---------- Background tokens ---------- */
  --bg-page:     var(--ha-surface-1);
  --bg-card:     var(--ha-white);
  --bg-muted:    var(--ha-surface-3);
  --bg-dark:     var(--ha-ink);
  --bg-brand:    var(--ha-gradient);

  /* ---------- Status (semantic, same hue family as brand) ---------- */
  --ok:          #5BAE3C;       /* slightly deeper than loyal for contrast */
  --ok-bg:       #EAF5DC;
  --warn:        #E8A33C;       /* warm, stays outside gradient */
  --warn-bg:     #FBEFD5;
  --danger:      #E24848;
  --danger-bg:   #FBE3E3;
  --info:        var(--ha-smart);
  --info-bg:     #D6F0FB;

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

  /* ---------- Radius ----------
     hello again uses generously rounded, capsule-heavy UI.
     Buttons and pills are fully pill-shaped; cards are 12–16px. */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;     /* default card radius */
  --radius-lg: 20px;     /* large cards, sheets */
  --radius-xl: 28px;
  --radius-pill: 999px;  /* buttons, chips, badges */

  /* ---------- Elevation ----------
     Soft, low-contrast shadows. Never dramatic drop-shadows.
     Color is a cool ink tint, never pure black. */
  --shadow-1: 0 1px 2px rgba(38, 45, 53, .06),
              0 1px 1px rgba(38, 45, 53, .04);
  --shadow-2: 0 4px 14px rgba(38, 45, 53, .08),
              0 1px 2px rgba(38, 45, 53, .04);
  --shadow-3: 0 12px 32px rgba(38, 45, 53, .12),
              0 2px 6px  rgba(38, 45, 53, .05);
  --shadow-brand: 0 10px 28px rgba(0, 167, 225, .25);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(.22, 1, .36, 1); /* @kind other */
  --ease-in-out:cubic-bezier(.65, 0, .35, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */

  /* ---------- Typography — families ---------- */
  --font-display: 'Nexa', 'Brutal', system-ui, sans-serif;
  --font-body:    'Brutal', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Typography — scale ----------
     Display uses Nexa Bold + tight letter-spacing. Body uses Nexa Light
     at 400 weight equivalent for long reading.
  */
  --fs-display-xl: clamp(44px, 6vw, 72px); /* @kind font */
  --fs-display-lg: clamp(36px, 4.5vw, 56px); /* @kind font */
  --fs-h1: 40px;
  --fs-h2: 30px;
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;

  --lh-tight: 1.08; /* @kind font */
  --lh-snug:  1.25; /* @kind font */
  --lh-normal:1.5; /* @kind font */
  --lh-loose: 1.65; /* @kind font */

  --tracking-tight: -0.02em; /* @kind font */
  --tracking-body:  0; /* @kind font */
  --tracking-caps:  0.08em; /* @kind font */

  /* ---------- Nexa optical-centering correction ----------
     Nexa's metrics: ascent 700 / descent 300 (unitsPerEm 1000) — and its cap
     height is ALSO exactly 700. So capitals completely fill the space above
     the baseline while the entire 0.3em descender slot below stays empty.

     Consequence: any cap-dominant string (buttons, badges, chips, nav labels,
     KPI numbers, uppercase overlines) that is vertically centred in a box
     lands too HIGH — the browser centres the 1em content box, not the ink.
     Measured at 200px: ink centre 69.8px above baseline vs box centre 40.0px
     = a 29.8px / 0.149em error. Mixed-case text WITH descenders is already
     centred correctly, so this is deliberately NOT a blanket metric override. */
  --nexa-cap-shift: 0.149em; /* @kind other */
}

/* ------------- Semantic element defaults ------------- */

html, body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--fg-1);
  background: var(--bg-page);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  margin: 0;
}

p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  margin: 0;
}
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-loose); }
.body-sm { font-size: var(--fs-body-sm); }
.caption {
  font-size: var(--fs-caption);
  color: var(--fg-3);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--ha-surface-2);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

/* Gradient text helper — use on highlighted words inside headlines.
   Wrap the emphasized word in <span class="ha-accent">…</span>. */
.gradient-text,
.ha-accent {
  background: var(--ha-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Slightly tighter to compensate for clipping artifacts at large sizes */
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   Nexa vertical centering — utilities
   ============================================================ */

/* Use on any Nexa element whose text is CAP-DOMINANT (no descenders) and is
   vertically centred inside a fixed-height box: buttons, badges, chips, pills,
   tab-bar labels, KPI numbers, uppercase overlines.
   `text-box` is the real fix (trims the line box to cap-top → baseline so
   centring uses the ink). The relative-position nudge is the fallback for
   engines without it, and works on inline and block elements alike. */
.ha-cap-center { text-box: trim-both cap alphabetic; }
@supports not (text-box: trim-both cap alphabetic) {
  .ha-cap-center { position: relative; top: var(--nexa-cap-shift); }
}

/* Nexa has ZERO headroom above its capitals (ascent == cap height), so
   capital umlauts — Ä Ö Ü, unavoidable in German — paint ~0.2em ABOVE the
   font's own ascent and get clipped by any `overflow: hidden` ancestor.
   Add this to a tight, clipped Nexa line that may contain capital umlauts. */
.ha-umlaut-safe { padding-top: 0.2em; }

/* The system's own cap-only text class benefits automatically. */
.caption { text-box: trim-both cap alphabetic; }
@supports not (text-box: trim-both cap alphabetic) {
  .caption { position: relative; top: var(--nexa-cap-shift); }
}

/* Page specific styles */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg-page); }
a { color: var(--ha-smart); text-decoration: none; }
a:hover { color: var(--ha-smart-mid); }
section[id] { scroll-margin-top: 96px; }
@keyframes ha-spin { from { transform: rotate(0deg); } to { transform: rotate(340deg); } }
@keyframes ha-pop { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: scale(1); } }

@media (min-width: 769px) {
  .hero-section {
    min-height: 100vh;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }
}