/*
  Design tokens for jointops.ai. Calm navy, blue and teal on white. No orange.
  styles.css reads only these names, so a palette change belongs here.
*/
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("/fonts/InstrumentSans-latin-wght.woff2") format("woff2");
}

:root {
  /* Surfaces */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-tint: #f3f8fb;
  --color-tint-strong: #e3eff6;
  --color-tint-teal: #e6f4f3;
  --color-navy: #0d2438;
  --color-navy-2: #143450;

  /* Text */
  --color-ink: #0d2438;
  --color-muted: #4b6072;
  --color-on-accent: #ffffff;
  --color-on-navy: #dbe7f0;

  /* Accent: the button colour and the highlight colour */
  --color-accent: #12426b;
  --color-accent-hover: #0d2f4e;
  --color-highlight: #0f6b70;
  --color-sky: #2f7fb8;

  /* Lines and states */
  --color-line: #dfe8ee;
  --color-line-strong: #c8d6e0;
  --color-focus: #2f7fb8;
  --color-error: #a32638;
  --color-ok: #0f6b70;

  /* Skeleton shown in a screenshot frame until the image exists */
  --skel-from: #e6f1f6;
  --skel-mid: #f6fafb;
  --skel-to: #d9ecee;
  --skel-grid: rgb(18 66 107 / 7%);

  /* Type */
  --font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text-display: clamp(2.6rem, 1.6rem + 4.4vw, 5rem);
  --text-h2: clamp(2rem, 1.45rem + 2.3vw, 3.25rem);
  --text-h3: 1.25rem;
  --text-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --text-body: 1.0625rem;
  --text-small: 0.9375rem;
  --text-label: 0.8125rem;

  /* Shape */
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 28px;
  --shadow-card: 0 1px 2px rgb(13 36 56 / 5%), 0 8px 24px rgb(13 36 56 / 6%);
  --shadow-frame: 0 2px 4px rgb(13 36 56 / 6%), 0 24px 64px -12px rgb(13 36 56 / 22%);
  --shadow-phone: 0 2px 6px rgb(13 36 56 / 14%), 0 28px 56px -10px rgb(13 36 56 / 38%);

  /* Layout */
  --width-page: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --space-section: clamp(3.25rem, 7.5vw, 6.5rem);
}