/* =========================================================================
   Sound Strategies — Foundations
   Colors + Type + Spacing + Motion tokens
   ========================================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Neue Haas Grotesk";
  src: url("fonts/NeueHaasGroteskTextPro-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk";
  src: url("fonts/NeueHaasGroteskTextPro-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk";
  src: url("fonts/NeueHaasGroteskTextPro-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk";
  src: url("fonts/NeueHaasGroteskTextPro-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Brand Palette (core) ---------- */
  --ss-signal:      #0BA6EE;   /* primary blue  — "Signal" */
  --ss-amp:         #FFC000;   /* amber/gold    — "Amplitude" */
  --ss-ink:         #313030;   /* near-black    — "Ink" */
  --ss-fog:         #C7C9CB;   /* cool grey     — "Fog" */

  /* ---------- Extended neutrals ---------- */
  --ss-stage:       #0A0A0B;   /* deep black for stage/hero sections */
  --ss-paper:       #FFFFFF;
  --ss-paper-warm:  #FAFAF7;   /* subtle warm off-white */
  --ss-mist:        #F2F3F5;   /* ultra-light surface */
  --ss-line:        #E4E6E9;   /* hairline border */
  --ss-mute:        #6B6E73;   /* body-secondary grey */

  /* ---------- Signal scale (blue) ---------- */
  --signal-50:  #E6F6FE;
  --signal-100: #C2E9FC;
  --signal-200: #8FD6F9;
  --signal-300: #4FBDF4;
  --signal-400: #0BA6EE;  /* base */
  --signal-500: #0991D3;
  --signal-600: #0A79B0;
  --signal-700: #0B5E88;
  --signal-800: #0D4261;

  /* ---------- Amp scale (gold) ---------- */
  --amp-50:  #FFF8E0;
  --amp-100: #FFEDAD;
  --amp-200: #FFDC6B;
  --amp-300: #FFC000;  /* base */
  --amp-400: #E5A800;
  --amp-500: #B87F00;
  --amp-600: #8A5E00;

  /* ---------- Ink scale (charcoal) ---------- */
  --ink-900: #0A0A0B;
  --ink-800: #1A1A1C;
  --ink-700: #2A2A2C;
  --ink-600: #313030;  /* base */
  --ink-500: #4A4A4C;
  --ink-400: #6B6E73;
  --ink-300: #9A9DA2;
  --ink-200: #C7C9CB;
  --ink-100: #E4E6E9;
  --ink-50:  #F2F3F5;

  /* ---------- Semantic roles ---------- */
  --fg-1: var(--ss-ink);
  --fg-2: var(--ink-500);
  --fg-3: var(--ss-mute);
  --fg-disabled: var(--ink-300);
  --fg-on-dark: var(--ss-paper);
  --fg-on-dark-2: rgba(255,255,255,0.72);
  --fg-on-dark-3: rgba(255,255,255,0.52);
  --fg-brand: var(--ss-signal);
  --fg-accent: var(--ss-amp);

  --bg-page: var(--ss-paper);
  --bg-warm: var(--ss-paper-warm);
  --bg-surface: var(--ss-mist);
  --bg-inverse: var(--ss-stage);
  --bg-brand: var(--ss-signal);
  --bg-accent: var(--ss-amp);

  --border: var(--ss-line);
  --border-strong: var(--ink-200);
  --border-on-dark: rgba(255,255,255,0.14);

  /* ---------- Type ---------- */
  --font-sans: "Neue Haas Grotesk", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid display sizes (desktop-first for hi-fi marketing) */
  --fs-display-xl: clamp(64px, 9vw, 148px);   /* hero wordmark */
  --fs-display-lg: clamp(48px, 6.2vw, 104px); /* section hero */
  --fs-display-md: clamp(40px, 4.8vw, 80px);  /* section titles */
  --fs-h1:         clamp(36px, 4vw, 64px);
  --fs-h2:         clamp(28px, 2.8vw, 44px);
  --fs-h3:         22px;
  --fs-h4:         18px;
  --fs-body-lg:    19px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --fs-eyebrow:    11px;  /* uppercased labels */

  --lh-tight:   1.02;
  --lh-display: 1.04;
  --lh-heading: 1.12;
  --lh-body:    1.55;
  --lh-loose:   1.7;

  /* Tracking tuned for Haas Grotesk */
  --tr-display: -0.035em;  /* tight, confident */
  --tr-heading: -0.02em;
  --tr-body:    -0.005em;
  --tr-eyebrow: 0.16em;    /* caps */
  --tr-mono:    0;

  /* ---------- Spacing (8pt base with a 4 rung) ---------- */
  --s-0: 0;
  --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;
  --s-11: 160px;

  /* ---------- Radii — deliberately restrained ---------- */
  --r-0: 0;
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 18px;    /* cards */
  --r-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 2px rgba(10,10,11,0.04), 0 2px 6px rgba(10,10,11,0.04);
  --shadow-2: 0 2px 4px rgba(10,10,11,0.05), 0 8px 24px rgba(10,10,11,0.06);
  --shadow-3: 0 4px 8px rgba(10,10,11,0.06), 0 18px 48px rgba(10,10,11,0.10);
  --shadow-signal: 0 10px 28px rgba(11,166,238,0.28);
  --shadow-amp:    0 10px 28px rgba(255,192,0,0.28);
  --shadow-focus:  0 0 0 3px rgba(11,166,238,0.35);

  /* ---------- Motion ---------- */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);   /* confident, slight overshoot-free */
  --ease-entry:    cubic-bezier(0.16, 1, 0.3, 1);    /* out-expo: fast in, settles */
  --ease-exit:     cubic-bezier(0.7, 0, 0.84, 0);

  /* ---------- Layout ---------- */
  --container: 1360px;
  --container-tight: 1120px;
  --gutter: clamp(20px, 4vw, 64px);
}

/* =========================================================================
   Base semantic styles — apply by tag so content writers don't need classes
   ========================================================================= */
html { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-page); }
body { font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--tr-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); font-weight: 700; text-wrap: balance; }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); font-weight: 700; text-wrap: balance; }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; font-weight: 700; }
h4, .h4 { font-size: var(--fs-h4); line-height: 1.3; font-weight: 700; }

.display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-tight); letter-spacing: var(--tr-display); font-weight: 700; }
.display-lg { font-size: var(--fs-display-lg); line-height: var(--lh-display); letter-spacing: var(--tr-display); font-weight: 700; }
.display-md { font-size: var(--fs-display-md); line-height: var(--lh-display); letter-spacing: var(--tr-display); font-weight: 700; }

p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-1); text-wrap: pretty; }
.lede { font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: var(--fg-2); }
small, .caption { font-size: var(--fs-caption); color: var(--fg-3); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fg-2);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: currentColor;
}

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: var(--tr-mono);
}

a { color: var(--fg-brand); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

::selection { background: var(--ss-amp); color: var(--ss-ink); }