/* StayStack brand foundation — design tokens + base, faithful to the "Find the signal" system
   (core/brand-identity.md). Cream canvas, warm neutrals dominate, signal blues as the
   intelligence accent only, ink that is never pure black. Hanken Grotesk for everything except
   the logo wordmark (Source Sans 3) and metrics/code (JetBrains Mono). No emoji anywhere. */

@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700&family=Source+Sans+3:wght@600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* Canvas + warm neutrals (dominate text and large surfaces) */
  --cream-50: #fbf7f0;
  --cream-100: #f4eee3;
  --cream-200: #ece3d2;
  --sand-300: #d9cdb5;
  --stone-400: #b6a88d;
  --walnut-600: #6b5840;
  --walnut-800: #2e2519;

  /* Signal blues (intelligence accent only — waves, primary CTA, small accents) */
  --signal-950: #061e4f; /* deep navy / logo */
  --signal-900: #0b3680;
  --signal-800: #0b4ccb; /* cobalt — primary action */
  --signal-700: #1f6fe5; /* wave anchor */
  --signal-600: #3a8cf2;
  --signal-500: #65b7f5;
  --signal-300: #9cd4ff; /* pale tip */
  --signal-100: #e6f2ff; /* tint bg */

  /* Ink — never pure black */
  --ink-1000: #0b0b0b; /* headlines */
  --ink-900: #161616; /* body */
  --ink-700: #3a3a38; /* muted */
  --ink-500: #6b6a66; /* subtle */

  /* Type families */
  --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-logo: "Source Sans 3", var(--font-sans);
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radii (4pt scale) */
  --r-default: 12px;
  --r-feature: 18px;
  --r-hero: 24px;
  --r-pill: 999px;

  /* Hairline border + navy-tinted shadows (never black) */
  --hairline: 1px solid rgba(11, 11, 11, 0.08);
  --shadow-sm: 0 1px 2px rgba(11, 30, 79, 0.06), 0 1px 1px rgba(11, 30, 79, 0.04);
  --shadow-md: 0 8px 24px rgba(11, 30, 79, 0.1);
  --shadow-lg: 0 24px 60px rgba(11, 30, 79, 0.14);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 120ms;
  --t-base: 220ms;
  --t-slow: 380ms;
  --t-slower: 620ms;
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
}
body {
  font-family: var(--font-sans);
  color: var(--ink-900);
  background: var(--cream-50);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headlines: Hanken light at scale, ending with a period; sentence case. */
h1,
h2,
h3 {
  font-weight: 500;
  color: var(--ink-1000);
  letter-spacing: -0.02em;
  margin: 0 0 0.4em;
}
h1 {
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: -0.035em;
  line-height: 1.04;
}
p {
  color: var(--ink-900);
  line-height: 1.55;
}

/* Tiny eyebrow / meta label — the only place ALL CAPS is allowed. */
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--signal-800);
}

.mono {
  font-family: var(--font-mono);
}

/* Buttons / pills */
.btn {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--r-pill);
  padding: 11px 20px;
  border: 0;
  cursor: pointer;
  transition: background var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.btn-primary {
  background: var(--signal-800);
  color: #fff;
}
.btn-primary:hover {
  background: var(--signal-900);
}
.btn-ghost {
  background: transparent;
  color: var(--ink-900);
  border: var(--hairline);
}
.btn-ghost:hover {
  background: var(--cream-100);
}

/* Signal-wave canvas host: an absolutely-positioned layer that sits behind content. */
.ss-waves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.ss-waves canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* The logo lockup — the official StayStack-Icon.png (mark + wordmark) sized to the requested
   height (see img/README.md). The asset already contains the wordmark, so no text is paired. */
.ss-logo {
  display: inline-flex;
  align-items: center;
}
.ss-logo .ss-mark {
  display: block;
  width: auto;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}