/*
 * Colours and base typography shared by the site layout and the embed layout. In a layer, so any
 * unlayered rule wins over it regardless of the order of stylesheets.
 */

/*
 * Fallback faces sized to match the web fonts, so text keeps its place when they arrive
 * (Lighthouse caught a layout shift of 0.3 with a wide system fallback). Arial and its metric
 * twins Liberation Sans and Arimo are on almost every system. size-adjust is the measured width
 * of a Russian or English UI sentence in the web font over Arial at weight 400; the overrides are
 * the font's ascent and descent divided by it. Cyrillic letters are narrower relative to Arial than
 * Latin ones, so they get their own face; the later face wins for the characters in its range.
 */
@font-face {
  font-family: 'Onest Fallback';
  src: local('Arial'), local('Liberation Sans'), local('Arimo');
  size-adjust: 106.1%;
  ascent-override: 91.4%;
  descent-override: 28.7%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Onest Fallback';
  src: local('Arial'), local('Liberation Sans'), local('Arimo');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  size-adjust: 103.5%;
  ascent-override: 93.7%;
  descent-override: 29.5%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Manrope Fallback';
  src: local('Arial'), local('Liberation Sans'), local('Arimo');
  size-adjust: 102.8%;
  ascent-override: 103.7%;
  descent-override: 29.2%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Manrope Fallback';
  src: local('Arial'), local('Liberation Sans'), local('Arimo');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  size-adjust: 101.6%;
  ascent-override: 104.9%;
  descent-override: 29.5%;
  line-gap-override: 0%;
}

@layer base {
  :root {
    color-scheme: light dark;

    /* Palette of the home page redesign, docs/plans/2026-10-12-home-redesign.md. */
    --color-bg: #f3f7fc;
    --color-bg-2: #e6effa;
    --color-text: #10213f;
    --color-muted: #5a6b86;
    --color-blue: #1f5fd1;
    --color-accent: #c2332e;
    --color-on-accent: #fff;
    --color-vessel-a: #ef4b4b;
    --color-vessel-v: #3b78e7;
    --color-border: #d3deed;
    --color-notice-bg: #fff4e5;
    --glass: rgb(255 255 255 / 62%);
    --glass-line: rgb(255 255 255 / 95%);
    --shadow: 0 10px 30px -12px rgb(31 95 209 / 28%);
    --font-body: 'Onest Variable', 'Onest Fallback', system-ui, sans-serif;
    --font-display: 'Manrope Variable', 'Manrope Fallback', system-ui, sans-serif;

    font-family: var(--font-body);
    line-height: 1.5;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --color-bg: #070d1c;
      --color-bg-2: #0d1932;
      --color-text: #e8eefc;
      --color-muted: #9fb0d4;
      --color-blue: #7aa7ff;
      --color-accent: #ff6b70;
      --color-on-accent: #070d1c;
      --color-vessel-a: #ff4d5e;
      --color-vessel-v: #4c7dff;
      --color-border: #22314f;
      --glass: rgb(16 28 56 / 62%);
      --glass-line: rgb(140 175 255 / 22%);
      --shadow: 0 10px 30px -12px rgb(0 0 0 / 60%);
      --color-notice-bg: #2a2117;
    }
  }

  body {
    margin: 0;

    /* A long word (a heading like "Электрокардиограмма" on a 320 px screen) breaks instead of
       widening the page. */
    overflow-wrap: break-word;
    background: var(--color-bg);
    color: var(--color-text);
  }

  h1,
  h2,
  h3 {
    font-family: var(--font-display);
    text-wrap: balance;
  }

  a {
    color: var(--color-accent);
  }

  /* Tables in article text: rows read as rows, and a cell starts at the top of its row. */
  table {
    border-collapse: collapse;
  }

  th,
  td {
    padding-block: 0.4rem;
    padding-inline: 0.5rem;
    border-block-end: 1px solid var(--color-border);
    overflow-wrap: anywhere;
    text-align: start;
    vertical-align: top;
  }

  .disclaimer {
    padding: 0.75rem 1rem;
    border-inline-start: 4px solid var(--color-accent);
    background: var(--color-notice-bg);
    color: var(--color-text);
  }
}