/* =========================================================================
   Asteroid Recruiting — Colors & Type
   Primary font: Montserrat (Google Fonts — loaded from CDN)
   ========================================================================= */

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

/* Montserrat — local brand font files (uploads/fonts/) */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100; font-display: swap;
  src: url('fonts/Montserrat-Thin.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 100; font-display: swap;
  src: url('fonts/Montserrat-ThinItalic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 200; font-display: swap;
  src: url('fonts/Montserrat-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 200; font-display: swap;
  src: url('fonts/Montserrat-ExtraLightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('fonts/Montserrat-Light.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 300; font-display: swap;
  src: url('fonts/Montserrat-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Montserrat-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/Montserrat-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/Montserrat-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('fonts/Montserrat-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/Montserrat-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 600; font-display: swap;
  src: url('fonts/Montserrat-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/Montserrat-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 700; font-display: swap;
  src: url('fonts/Montserrat-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('fonts/Montserrat-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 800; font-display: swap;
  src: url('fonts/Montserrat-ExtraBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('fonts/Montserrat-Black.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 900; font-display: swap;
  src: url('fonts/Montserrat-BlackItalic.ttf') format('truetype'); }

:root {
  /* ---------- BRAND CORE ---------- */
  /* Navy — the wordmark color, primary brand anchor */
  --brand-navy:        #103050;
  --brand-navy-deep:   #0A1F35;   /* logo shadow / darkest */
  --brand-navy-soft:   #1E4470;   /* hover states on navy */

  /* Teal — asteroid body highlights, "tech / AI" accent */
  --brand-teal:        #00A8A8;
  --brand-teal-deep:   #007890;
  --brand-teal-soft:   #6FD0CE;

  /* Orange — flame trail, the "velocity" / energy accent */
  --brand-orange:      #F07848;
  --brand-orange-warm: #F0A848;   /* lighter end of flame gradient */
  --brand-orange-deep: #D55A28;   /* pressed / focus state */

  /* Signature flame gradient (use sparingly — hero moments only) */
  --brand-flame:       linear-gradient(135deg, #F07848 0%, #F0A848 60%, #FFC97A 100%);
  --brand-cosmos:      linear-gradient(135deg, #0A1F35 0%, #103050 50%, #00A8A8 100%);

  /* ---------- NEUTRALS ---------- */
  --neutral-0:    #FFFFFF;
  --neutral-50:   #F7F8FA;   /* page background, soft */
  --neutral-100:  #EEF1F5;   /* card backgrounds, dividers */
  --neutral-200:  #DCE2EA;
  --neutral-300:  #B8C2CF;
  --neutral-400:  #8B97A8;
  --neutral-500:  #5E6C80;
  --neutral-600:  #3F4C5E;
  --neutral-700:  #2A3447;
  --neutral-800:  #1A2233;
  --neutral-900:  #0A1322;

  /* ---------- SEMANTIC FOREGROUND / BACKGROUND ---------- */
  --bg-page:      var(--neutral-50);
  --bg-surface:   var(--neutral-0);
  --bg-raised:    var(--neutral-0);
  --bg-sunken:    var(--neutral-100);
  --bg-inverse:   var(--brand-navy-deep);

  --fg-1:         var(--brand-navy);        /* primary text — body & headings */
  --fg-2:         var(--neutral-600);       /* secondary text */
  --fg-3:         var(--neutral-400);       /* tertiary / captions */
  --fg-on-dark:   #F2F5F9;                  /* text on navy/inverse */
  --fg-on-brand:  #FFFFFF;                  /* text on orange/teal */

  --border-subtle:  var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --border-focus:   var(--brand-teal);

  /* ---------- SEMANTIC STATUS ---------- */
  --status-success: #1B9E6B;
  --status-warning: #E0A024;
  --status-danger:  #D14545;
  --status-info:    var(--brand-teal);

  /* ---------- ELEVATION ---------- */
  --shadow-xs: 0 1px 2px rgba(10, 31, 53, 0.06);
  --shadow-sm: 0 2px 6px rgba(10, 31, 53, 0.08);
  --shadow-md: 0 8px 20px rgba(10, 31, 53, 0.10);
  --shadow-lg: 0 16px 40px rgba(10, 31, 53, 0.14);
  --shadow-xl: 0 28px 70px rgba(10, 31, 53, 0.18);
  --shadow-flame: 0 12px 32px rgba(240, 120, 72, 0.30);

  /* ---------- RADII ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- SPACING (4px base) ---------- */
  --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;

  /* ---------- TYPE — families ---------- */
  --font-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-display: 'Montserrat', system-ui, sans-serif; /* same family, heavier weights */

  /* ---------- TYPE — scale ---------- */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   32px;
  --fs-3xl:   42px;
  --fs-4xl:   56px;
  --fs-5xl:   72px;
  --fs-6xl:   96px;

  /* ---------- TYPE — weights ---------- */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;
  --fw-ultra:   900;

  /* ---------- TYPE — line-height ---------- */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  /* ---------- TYPE — letter-spacing ---------- */
  --ls-tighter: -0.025em;
  --ls-tight:   -0.015em;
  --ls-normal:  0em;
  --ls-wide:    0.04em;
  --ls-wider:   0.10em;   /* eyebrow / all-caps labels */
  --ls-widest:  0.18em;   /* the wordmark feel */

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.55, 0, 0.7, 0.2);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   400ms;
}

/* =========================================================================
   Semantic element styles
   ========================================================================= */

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

/* --- Headings --- */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

h4, .h4 {
  font-weight: var(--fw-semi);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

h5, .h5 {
  font-weight: var(--fw-semi);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  margin: 0;
}

h6, .h6 {
  font-weight: var(--fw-semi);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  margin: 0;
}

/* Display — for hero moments. Use sparingly. */
.display-xl {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-6xl);
  line-height: 0.95;
  letter-spacing: var(--ls-tighter);
}
.display-lg {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-5xl);
  line-height: 1.0;
  letter-spacing: var(--ls-tighter);
}

/* Body */
p, .body {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  margin: 0;
  text-wrap: pretty;
}
.body-lg { font-size: var(--fs-md); line-height: var(--lh-relaxed); }
.body-sm { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--fg-2); }

/* Eyebrow / label — the all-caps wide-tracked tag, echoes the wordmark */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--brand-teal-deep);
}

.caption {
  font-size: var(--fs-xs);
  color: var(--fg-3);
  line-height: var(--lh-normal);
}

/* Code */
code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--neutral-100);
  padding: 0.12em 0.4em;
  border-radius: var(--radius-xs);
  color: var(--brand-navy);
}

/* Links */
a {
  color: var(--brand-teal-deep);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
a:hover {
  color: var(--brand-orange-deep);
  border-bottom-color: currentColor;
}

/* Selection */
::selection {
  background: var(--brand-orange);
  color: #fff;
}