/* ============================================================
   StayStack — Colors & Type
   The intelligence layer for hospitality.
   ============================================================ */

/* ---- Webfonts (Google Fonts substitutions, flagged in README) ---- */
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ====== COLORS ====== */

  /* — Warm hospitality neutrals (the "room") — */
  --cream-50:   #FBF7F0;   /* poster background, page canvas */
  --cream-100:  #F4EEE3;   /* cards, panels */
  --cream-200:  #ECE3D2;   /* hover surface */
  --sand-300:   #D9CDB5;   /* dividers, soft borders */
  --stone-400:  #B6A88D;   /* muted accents */
  --walnut-600: #6B5840;   /* warm dark text accents */
  --walnut-800: #2E2519;   /* deep wood */

  /* — Signal blues (the "intelligence") — */
  --signal-950: #061E4F;   /* deep navy — primary logo color */
  --signal-900: #0B3680;   /* nav, deep brand surface */
  --signal-800: #0B4CCB;   /* cobalt — primary action */
  --signal-700: #1F6FE5;   /* royal blue — wave anchor */
  --signal-600: #3A8CF2;   /* clean blue — wave mid */
  --signal-500: #65B7F5;   /* sky — wave light */
  --signal-300: #9CD4FF;   /* pale signal — wave tip */
  --signal-100: #E6F2FF;   /* signal tint backgrounds */

  /* — Type / mono — */
  --ink-1000:   #0B0B0B;   /* headline ink */
  --ink-900:    #161616;   /* body text */
  --ink-700:    #3A3A38;   /* secondary text */
  --ink-500:    #6B6A66;   /* tertiary / captions */
  --ink-300:    #B3B0A8;   /* placeholder / disabled */

  /* — Pure / utility — */
  --white:      #FFFFFF;
  --black:      #000000;

  /* — Semantic accents (use sparingly; brand is mostly blue + neutrals) — */
  --rust-600:   #B65A33;   /* warmth accent (matches walnut moods) */
  --olive-600:  #6F7A3F;   /* muted olive */
  --success:    #2F8A5C;
  --warning:    #C98A2B;
  --danger:     #B23A3A;

  /* ====== SEMANTIC SURFACES ====== */
  --bg-page:        var(--cream-50);
  --bg-surface:     var(--cream-100);
  --bg-surface-2:   var(--white);
  --bg-inverse:     var(--signal-950);
  --bg-signal-tint: var(--signal-100);

  --fg-default:     var(--ink-1000);
  --fg-muted:       var(--ink-700);
  --fg-subtle:      var(--ink-500);
  --fg-inverse:     var(--cream-50);
  --fg-link:        var(--signal-800);

  --border-soft:    rgba(11, 11, 11, 0.08);
  --border-default: rgba(11, 11, 11, 0.14);
  --border-strong:  rgba(11, 11, 11, 0.28);

  /* ====== TYPE ====== */
  --font-display: "Hanken Grotesk", "Söhne", "Inter", system-ui, -apple-system, sans-serif;
  --font-body:    "Hanken Grotesk", "Söhne", "Inter", system-ui, -apple-system, sans-serif;
  --font-wordmark:"Source Sans 3", "Source Sans Pro", "Hanken Grotesk", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Display scale — calm, generous, never bold-heavy */
  --fs-d1: clamp(56px, 8.5vw, 128px);   /* hero "Find the signal." */
  --fs-d2: clamp(44px, 6vw, 88px);      /* poster headline */
  --fs-d3: clamp(36px, 4.4vw, 64px);    /* section headers */

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

  /* Line-heights */
  --lh-display: 1.02;
  --lh-heading: 1.15;
  --lh-body:    1.55;
  --lh-tight:   1.25;

  /* Weights — keep light for displays, regular for body */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* Tracking */
  --tr-tight:   -0.025em;
  --tr-normal:  0;
  --tr-wide:    0.04em;
  --tr-eyebrow: 0.12em;

  /* ====== RADII ====== */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  24px;     /* pill cards, integration chips (see ref poster) */
  --r-2xl: 32px;
  --r-pill: 999px;

  /* ====== SHADOWS — soft, warm, never harsh ====== */
  --shadow-xs: 0 1px 2px rgba(11, 30, 79, 0.06);
  --shadow-sm: 0 2px 8px rgba(11, 30, 79, 0.07);
  --shadow-md: 0 8px 24px rgba(11, 30, 79, 0.09);
  --shadow-lg: 0 18px 48px rgba(11, 30, 79, 0.12);
  --shadow-pill: 0 6px 18px rgba(11, 30, 79, 0.10);

  /* ====== SPACING (4pt scale) ====== */
  --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;

  /* ====== MOTION ====== */
  --ease-calm:  cubic-bezier(.22, 1, .36, 1);   /* primary easing — resonant, settled */
  --ease-glide: cubic-bezier(.4, 0, .2, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 380ms;
  --dur-4: 620ms;
  --dur-wave: 9s;     /* wave drift loop */
}

/* ====================================================================
   SEMANTIC ELEMENT STYLES
   Apply via class or by reset-targeting tags inside a .ss-typography scope
   ==================================================================== */

.ss-typography,
.ss-typography body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-default);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ss-display-1, .ss-typography h1.display {
  font-family: var(--font-display);
  font-size: var(--fs-d1);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-display);
  color: var(--ink-1000);
  text-wrap: balance;
}
.ss-display-2 {
  font-family: var(--font-display);
  font-size: var(--fs-d2);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-display);
  color: var(--ink-1000);
  text-wrap: balance;
}
.ss-display-3 {
  font-family: var(--font-display);
  font-size: var(--fs-d3);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-heading);
  color: var(--ink-1000);
}

.ss-h1, .ss-typography h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-heading);
  color: var(--ink-1000);
}
.ss-h2, .ss-typography h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  letter-spacing: -0.015em;
  line-height: var(--lh-heading);
  color: var(--ink-1000);
}
.ss-h3, .ss-typography h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  color: var(--ink-1000);
}
.ss-h4, .ss-typography h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  color: var(--ink-900);
}

.ss-body-lg, .ss-typography .lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--fg-default);
}
.ss-body, .ss-typography p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-default);
  text-wrap: pretty;
}
.ss-body-sm {
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: var(--fg-muted);
}
.ss-caption {
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--fg-subtle);
  letter-spacing: 0.01em;
}
.ss-eyebrow {
  font-size: 12px;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--signal-800);
}
.ss-mono, .ss-typography code, .ss-typography pre {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-900);
}

/* ==== POSTER-CALIBRE HEADLINE ==== */
/* Use for hero "Find the signal." moments. Light weight, generous tracking,
   left-aligned with negative space above. */
.ss-poster-headline {
  font-family: var(--font-display);
  font-size: clamp(64px, 9.5vw, 152px);
  font-weight: var(--fw-light);
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: var(--ink-1000);
  text-wrap: balance;
}