/* Design tokens.
 *
 * The ONLY place colours, fonts and spacing values are defined (spec 31.3).
 *
 * **The palette is no longer derived from the logo, and that is a decision** (spec 31.16).
 * It was: the AVYENO master file used exactly #eee2d4 and #111111, and everything here was
 * mixed from those two so it could not drift. The Sidospår logo is monochrome ink on paper,
 * so there is no beige in it to derive from — the beige is kept deliberately, because it is
 * the warmth spec 23 asks for and it is what stops a minimal black-and-white shop looking
 * like every other one. A monochrome wordmark takes the colour of whatever it sits on.
 *
 * Everything except the beige and the black is still mixed from those two.
 */

:root {
  /* Colour — warm beige, black, white (spec 23) */
  --avyeno-beige: #eee2d4; /* kept from the previous identity, by decision */
  --avyeno-beige-deep: #e1d5c8; /* beige + 6% black */
  /* Beige + 50% white. For a surface that should read as a tint rather than as a panel —
     the size tiles, where full beige competed with the page (spec 31.26). */
  --avyeno-beige-light: #f7f1ea;
  --avyeno-black: #111111; /* the logo's ink */
  --avyeno-white: #ffffff;

  /* Muted text: beige + 62% black. Contrast 6.2:1 on white and 4.9:1 on beige, so it
   * stays readable at small sizes on both grounds. */
  --avyeno-ink-muted: #65605b;

  /* Beige + 25% black. Deliberately below any contrast minimum: it is only for the text of
   * a *disabled* control — a size that cannot be chosen — where the point is that it recedes
   * far enough to be told apart at a glance from one that can (spec 31.26). Disabled controls
   * are exempt from the contrast rules, and the same information is in the label a screen
   * reader reads. Never use it for text a customer has to read. */
  --avyeno-ink-faint: #b7aea3;

  --avyeno-line: rgba(17, 17, 17, 0.14);
  --avyeno-error: #b3261e; /* 6.5:1 on white, 5.1:1 on beige */

  /* Typography — modern, Scandinavian.
   * The logo is set in a light geometric face; no webfont is licensed yet, so headings
   * use a neutral grotesque with wide tracking to sit quietly beside the logo artwork.
   * Swapping in a real display face is a change to these two lines. */
  --avyeno-font-body: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --avyeno-font-display: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Small labels and buttons: enough tracking to read as deliberate, not enough to loosen
   * short words into separate letters. */
  --avyeno-tracking-wide: 0.18em;

  /* Section headings, which sit closest to the logo and should echo it. The Sidospår
   * wordmark is set far wider and far lighter than 0.18em at normal weight, and a heading
   * that does not match it reads as a different brand on the same page (spec 31.16).
   * Deliberately a separate token: raising the one above would loosen every button. */
  --avyeno-tracking-display: 0.3em;
  --avyeno-weight-display: 300;

  /* Space — generous whitespace is part of the brand, not padding to trim */
  --avyeno-space-sm: 0.75rem;
  --avyeno-space-md: 1.5rem;
  --avyeno-space-lg: 3rem;
  --avyeno-space-xl: 6rem;

  --avyeno-radius: 2px;
}