/* Design tokens (ROADMAP row 17a): the current look as CSS custom properties. foundation.css
   uses these instead of literal values, so the approved Figma design (row 17) is mostly a
   change of the values here. Names are by role, not by colour: --ek-color-brand stays the
   brand colour whatever it becomes. Loaded before foundation.css (root.jsx).

   Breakpoints cannot be custom properties in media queries; foundation.css uses
   small <= 40em (640 px), medium 40.063em-64em, large >= 64.063em (1025 px). */
:root {
  /* Colours */
  --ek-color-brand: #2C5697;          /* top bar, buttons, links, info box, phone menu */
  --ek-color-brand-hover: #517DB9;    /* button hover and focus, button and info box border */
  --ek-color-on-brand: #FFFFFF;       /* text and icons on the brand colour */
  --ek-color-text: #222222;           /* body text and headings */
  --ek-color-text-panel: #333333;     /* text in a panel */
  --ek-color-surface: #FFFFFF;        /* page and panel background */
  --ek-color-border: #d8d8d8;         /* panel border */
  --ek-color-backdrop: rgba(0, 0, 0, 0.45); /* behind the open phone menu */

  /* Type */
  --ek-font-family: 'Rubik', Arial, sans-serif;
  --ek-font-size-text: 1rem;          /* paragraphs */
  --ek-font-size-button: 0.9rem;
  --ek-line-height: 1.5;              /* body */
  --ek-line-height-text: 1.6;         /* paragraphs */
  --ek-line-height-heading: 1.4;

  /* Space and layout */
  --ek-space-panel: 1.25rem;          /* panel padding, paragraph and panel bottom margin */
  --ek-content-max: 62.5em;           /* .row, 1000 px */
  --ek-topbar-height: 2.8125rem;      /* 45 px */
  --ek-radius: 0;                     /* buttons and panels are square */

  /* Motion */
  --ek-duration: 250ms;               /* phone menu */
}