/* Sixtyfour brand tokens
 * Guidelines: https://www.sixtyfour.ai/brand
 * Machine-readable (W3C DTCG): https://www.sixtyfour.ai/brand/tokens.json
 *
 * CONSTRAINTS, because they are not derivable from the values below:
 *   - Typeface: Geist only. Regular (400) and Medium (500) only. No bold, no italic display styles, and no monospace family.
 *   - There is no accent colour. The palette is nine neutrals.
 *   - Container radius comes from the set below. Never 0 on a bordered or
 *     filled box, and never a fully rounded pill.
 *   - Sentence case throughout. No all-caps.
 */

:root {
  /* Typeface */
  --sf-font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Color */
  --sf-color-black: #000000;           /* Black — Maximum-contrast ink and full-bleed dark surfaces. */
  --sf-color-ink: #0A0A0A;             /* Ink — Primary text and the standard dark surface. */
  --sf-color-body: #555555;            /* Body — Long-form body copy. */
  --sf-color-muted: #737373;           /* Muted — Secondary and supporting text. */
  --sf-color-metadata: #9A9A9A;        /* Metadata — Timestamps, counts and de-emphasised labels. */
  --sf-color-border: #D4D4D4;          /* Border — Hairlines, dividers and container borders. */
  --sf-color-sunken: #E0E0E0;          /* Sunken — Recessed surfaces inside a card: media wells, code blocks, table headers. */
  --sf-color-canvas: #F5F5F5;          /* Canvas — The page background. */
  --sf-color-card: #FCFCFC;            /* Card — Raised surfaces on the canvas. */
  --sf-color-white: #FFFFFF;           /* White — Inputs, and ink on dark surfaces. */

  /* Radius */
  --sf-radius-4: 4px;
  --sf-radius-6: 6px;
  --sf-radius-7: 7px;
  --sf-radius-8: 8px;
  --sf-radius-12: 12px;
  --sf-radius-15: 15px;
  --sf-radius-16: 16px;
  --sf-radius-20: 20px;

  /* Typography */
  /* Page heading — Medium */
  --sf-text-page-heading-size: 52px;
  --sf-text-page-heading-line-height: 56px;
  --sf-text-page-heading-letter-spacing: -1.56px;
  --sf-text-page-heading-weight: 500;

  /* Section heading — Medium */
  --sf-text-section-heading-size: 33px;
  --sf-text-section-heading-line-height: 37px;
  --sf-text-section-heading-letter-spacing: -0.825px;
  --sf-text-section-heading-weight: 500;

  /* Subheading — Medium */
  --sf-text-subheading-size: 20px;
  --sf-text-subheading-line-height: 26px;
  --sf-text-subheading-letter-spacing: -0.3px;
  --sf-text-subheading-weight: 500;

  /* Intro — Regular */
  --sf-text-intro-size: 17px;
  --sf-text-intro-line-height: 28px;
  --sf-text-intro-letter-spacing: 0px;
  --sf-text-intro-weight: 400;

  /* Body — Regular */
  --sf-text-body-size: 16px;
  --sf-text-body-line-height: 27px;
  --sf-text-body-letter-spacing: 0px;
  --sf-text-body-weight: 400;

  /* Metadata — Regular */
  --sf-text-metadata-size: 14px;
  --sf-text-metadata-line-height: 20px;
  --sf-text-metadata-letter-spacing: 0px;
  --sf-text-metadata-weight: 400;

  /* Eyebrow — Medium */
  --sf-text-eyebrow-size: 13px;
  --sf-text-eyebrow-line-height: 18px;
  --sf-text-eyebrow-letter-spacing: -0.13px;
  --sf-text-eyebrow-weight: 500;
}