/* ==========================================================================
   FruitStack — base.css
   Design tokens, reset, typography scale, layout primitives.
   Palette is derived from the FruitStack logo (Seed Grid concept 03).
   ========================================================================== */

/* --- Fonts (self-hosted, no external requests) --------------------------- */

@font-face {
  font-family: 'Jakarta';
  src: url('../fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Jakarta';
  src: url('../fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Jakarta';
  src: url('../fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'InterFS';
  src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'InterFS';
  src: url('../fonts/inter-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'InterFS';
  src: url('../fonts/inter-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PlexMono';
  src: url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PlexMono';
  src: url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
  /* Brand — taken from the FruitStack logo */
  --ink:            #0B1020;
  --ink-800:        #151b31;
  --ink-700:        #212842;
  --purple:         #6C5CE7;
  --purple-600:     #5a49d6;
  --purple-700:     #4a3ab8;
  --purple-300:     #a79cf2;
  --purple-100:     #ddd8fb;
  --teal:           #00D1C1;
  --teal-700:       #037068;
  --teal-100:       #d4f6f2;
  --orange:         #FF9F1C;
  --orange-700:     #925500;
  --orange-100:     #ffeed6;
  --mist:           #F1EDFF;
  --mist-deep:      #e6e0fb;
  --soft:           #FAFBFF;

  /* Neutrals */
  --white:          #ffffff;
  --gray-50:        #f6f7fa;
  --gray-100:       #eef0f6;
  --gray-200:       #e2e5ee;
  --gray-300:       #cdd2e0;
  --gray-500:       #7d849b;
  --gray-600:       #626a83;
  --gray-700:       #454c63;

  /* Semantic */
  --bg:             var(--soft);
  --fg:             var(--ink);
  --fg-muted:       var(--gray-600);
  --line:           var(--gray-200);
  --line-soft:      #edeff6;
  --accent:         var(--purple);

  /* Status (used by the interface mockups) */
  --status-ok:      #0a7a5e;
  --status-ok-bg:   #e2f6f0;
  --status-wait:    #8a5800;
  --status-wait-bg: #fdf0dc;
  --status-live:    var(--purple-700);
  --status-live-bg: var(--mist);

  /* Radius */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Shadow — one coherent system, all soft */
  --sh-1: 0 1px 2px rgba(11,16,32,.04), 0 2px 6px rgba(11,16,32,.04);
  --sh-2: 0 2px 4px rgba(11,16,32,.04), 0 8px 20px rgba(11,16,32,.06);
  --sh-3: 0 4px 10px rgba(11,16,32,.05), 0 18px 44px rgba(11,16,32,.09);
  --sh-4: 0 8px 18px rgba(11,16,32,.07), 0 34px 80px rgba(11,16,32,.13);
  --sh-ink: 0 10px 30px rgba(0,0,0,.28), 0 40px 90px rgba(0,0,0,.35);

  /* Spacing rhythm */
  --gutter: clamp(20px, 5vw, 56px);
  --shell: 1240px;
  --shell-narrow: 880px;
  --sec-y: clamp(72px, 9vw, 140px);
  --sec-y-tight: clamp(52px, 6vw, 92px);

  /* Type */
  --f-display: 'Jakarta', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-body: 'InterFS', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-mono: 'PlexMono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-display-xl: clamp(2.85rem, 6.2vw, 5.4rem);
  --t-display-l:  clamp(2.5rem, 5vw, 4.15rem);
  --t-h1:         clamp(2.2rem, 4vw, 3.35rem);
  --t-h2:         clamp(1.8rem, 3vw, 2.75rem);
  --t-h3:         clamp(1.3rem, 1.8vw, 1.75rem);
  --t-h4:         clamp(1.08rem, 1.2vw, 1.22rem);
  --t-lead:       clamp(1.1rem, 1.35vw, 1.3rem);
  --t-body:       clamp(1rem, 1.05vw, 1.09rem);
  --t-small:      .875rem;
  --t-label:      .72rem;
}

/* --- Reset --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 130px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
figure, blockquote { margin: 0; }

h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}
h3, h4 { font-weight: 700; letter-spacing: -.018em; line-height: 1.18; }
p { margin: 0; text-wrap: pretty; }

a { color: var(--purple-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--purple); }

::selection { background: var(--purple); color: #fff; }

:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Skip link ----------------------------------------------------------- */

.skip {
  position: absolute; left: 12px; top: -100px; z-index: 999;
  background: var(--ink); color: #fff; padding: 12px 20px;
  border-radius: var(--r-sm); font-weight: 600; text-decoration: none;
  transition: top .18s ease;
}
.skip:focus { top: 12px; color: #fff; }

/* --- Layout primitives --------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: var(--shell-narrow); }
.shell--wide { max-width: 1420px; }

.section { padding-block: var(--sec-y); position: relative; }
.section--tight { padding-block: var(--sec-y-tight); }
.section--pale { background: var(--mist); }
.section--soft { background: var(--white); }
.section--ink { background: var(--ink); color: #fff; }
.section--ink h1, .section--ink h2, .section--ink h3 { color: #fff; }
.section--ink a { color: var(--purple-300); }
.section--edge-top { border-top: 1px solid var(--line); }

/* --- Type helpers -------------------------------------------------------- */

.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--purple-700);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
}
.eyebrow::before {
  content: '';
  width: 22px; height: 1px;
  background: currentColor;
  opacity: .55;
  flex: none;
}
.eyebrow--plain::before { display: none; }
.section--ink .eyebrow { color: var(--teal); }

.display-xl { font-size: var(--t-display-xl); }
.display-l  { font-size: var(--t-display-l); }
.h1 { font-size: var(--t-h1); }
.h2 { font-size: var(--t-h2); }
.h3 { font-size: var(--t-h3); }
.h4 { font-size: var(--t-h4); font-family: var(--f-display); font-weight: 700; letter-spacing: -.015em; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--fg-muted);
}
.section--ink .lead { color: rgba(255,255,255,.72); }

.muted { color: var(--fg-muted); }
.section--ink .muted { color: rgba(255,255,255,.66); }

.mono {
  font-family: var(--f-mono);
  font-size: var(--t-small);
  letter-spacing: .02em;
}
.coord {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.section--ink .coord { color: rgba(255,255,255,.45); }

.measure { max-width: 62ch; }
.measure-sm { max-width: 48ch; }

/* --- Utilities ----------------------------------------------------------- */

.u-center { text-align: center; margin-inline: auto; }
.u-stack > * + * { margin-top: var(--gap, 18px); }
.u-hide { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Section heading block used across pages */
.sec-head { max-width: 46ch; margin-bottom: clamp(38px, 4.5vw, 68px); }
.sec-head--wide { max-width: 62ch; }
.sec-head .lead { margin-top: 22px; }
.sec-head--split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
}
.sec-head--split .lead { margin-top: 0; }
@media (max-width: 880px) {
  .sec-head--split { grid-template-columns: 1fr; align-items: start; gap: 22px; }
}

/* --- Motion -------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}