/* Hush design tokens for hush-media.dev
   Self-hosted fonts: the site makes no third-party requests. */

@font-face {
  font-family: "Instrument Sans";
  src: url("./fonts/InstrumentSans-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand constants */
  --hush-spruce-700: #17544D;  /* Deep Spruce: closing call to action, share image */
  --hush-spruce-600: #1F6F65;  /* Spruce: accent on light, primary button */
  --hush-spruce-500: #2A8073;  /* Tile: icon only */
  --hush-spruce-300: #6CC4B4;  /* Shallows: accent on dark */
  --hush-ink: #17201E;
  --hush-fog: #E6ECEA;
  --hush-on-spruce-muted: #CFEAE3;  /* secondary text on Deep Spruce, 6.9:1 */

  /* Icon fades (solid, never opacity) */
  --hush-fade-1: #83B5AE;
  --hush-fade-2: #599C92;

  /* Light surface tokens (the site is light, with one dark band for privacy) */
  --hush-canvas: #F1F4F3;
  --hush-surface: #FFFFFF;
  --hush-text: #17201E;
  --hush-text-2: #3B4643;     /* body copy on canvas, 8.9:1 */
  --hush-muted: #56625F;      /* 5.7:1 on canvas */
  --hush-line: #DCE3E0;
  --hush-line-soft: #E3E9E7;
  --hush-accent: #1F6F65;
  --hush-accent-soft: #DDEFEA;
  --hush-track-off: #8C9794;

  /* Dark band (privacy section) */
  --hush-night: #111615;
  --hush-deep: #1A201F;
  --hush-ridge: #2B3431;
  --hush-lichen: #9AA6A2;
  --hush-dark-body: #B5C0BC;

  /* Type */
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-ui: system-ui, -apple-system, "Segoe UI", sans-serif; /* inside the demo's fake page only */

  --fs-display: clamp(2.75rem, 5.6vw, 4.5rem);  /* 600, line-height 1.02, tracking -0.035em */
  --fs-h2: clamp(2rem, 3.6vw, 2.75rem);         /* 600, line-height 1.1, tracking -0.025em */
  --fs-cta: clamp(2.25rem, 4.4vw, 3.5rem);      /* 600, line-height 1.05, tracking -0.03em */
  --fs-h3: 1.3125rem;                           /* 21px, 600 */
  --fs-lead: 1.1875rem;                         /* 19px / 30px */
  --fs-body: 1.0625rem;                         /* 17px / 28px */
  --fs-small: 0.875rem;                         /* 14px */
  --fs-eyebrow: 0.8125rem;                      /* 13px, 600, uppercase, +0.08em */

  /* Shape and motion */
  --radius-card: 20px;
  --radius-button: 13px;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --content-max: 1240px;
}