/* FlexIT design tokens. Generated by scripts/build-tokens.mjs from design/tokens.json
   (a copy of the FlexIT Design System). Do not edit by hand: change the design system,
   copy its tokens.json to design/tokens.json, then run npm run tokens. */
:root{
  /* Colour */
  --paper:#f6f4ef; /* Page background for every page and section. FlexIT has no dark bands or dark sections. */
  --surface:#fffdf9; /* Record cards and other inspectable containers. Also the label colour on brand fills: 16.5:1 on brand, 12.9:1 on brand-hover. */
  --line:#ddd6cc; /* Hairline rules, card borders, table rows and dividers. Never text. */
  --ink:#22252b; /* Graphite. All running text, headings, record titles, tables and navigation, on paper (14.0:1), surface (15.1:1) and callout (11.5:1). */
  --muted:#5b5f66; /* Slate. Labels, dates, metadata, captions and notes only, never paragraphs. On paper (5.8:1), surface (6.3:1) and callout (4.8:1). */
  --brand:#2a1a13; /* Dark chocolate. The wordmark, the mark and primary button fills. Text on it is surface. */
  --brand-hover:#47291c; /* Hover and pressed state of brand fills. Nothing else. */
  --link:#6b4029; /* Milk chocolate. Text links, source pointers and the status dot, on paper (8.0:1), surface (8.6:1) and callout (6.6:1). */
  --callout:#eedcc8; /* Cocoa milk. The scope note inside a record card. Never behind a headline, never a section background. */
  --focus:var(--ink); /* Keyboard focus ring: a 3px solid outline offset 6px, landing on paper or surface (14:1 or more). */
  /* Type families. --font-* are the names the design system's component CSS uses. */
  --sans:"DM Sans", Arial, sans-serif;
  --serif:"Source Serif", Georgia, serif;
  --font-sans:var(--sans);
  --font-serif:var(--serif);
  /* Spacing */
  --container-max:1200px; /* Maximum content width. */
  --gutter:56px; /* Side gutter on desktop (containers are 100% minus 112px wide); 36px at 1100px and below, 24px at 860px, 20px at 760px. */
  --section-space:104px; /* Vertical padding of a page section on desktop; 76px at 860px and below, 62px at 760px. */
  --header-height:88px; /* Sticky header height on desktop; 75px at 860px and below, 70px at 760px. */
  /* Radius */
  --radius-0:0px; /* Cards, buttons, callouts, fields and photos. */
  --radius-focus:2px; /* The corner of an element while it shows the focus ring. */
  --radius-icon:20%; /* The app icon and favicon tile (6.4px at 32px). The Apple touch icon ships square: iOS rounds it. */
  /* Shadow */
  --shadow-card:0 15px 35px rgba(34, 37, 43, 0.05); /* The record card. */
  --shadow-menu:0 15px 25px rgba(34, 37, 43, 0.03); /* The open mobile menu under the header. */
}