/* What every page of the dashboard is measured in and coloured with: the
   font, the type scale, the spacing, and the colours of «هادئ», the look the
   owner chose, in light and in dark. Sizes are in rem, so the browser's own
   text size and zoom carry through. (designs/ keeps the other looks as
   samples; its own stylesheet overrides these there.) */

@font-face {
  font-family: 'Cairo';
  src: url('../fonts/cairo.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --font: 'Cairo', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  /* Taqqa's green, for marks only: as text or under white text it is too
     light to read (3.4:1); each look has a darker --accent for those. */
  --brand: #0f9d7a;

  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;

  /* The smallest thing a finger presses. */
  --tap: 2.75rem;
  /* Below this the page is a phone's: one column, the menu at the bottom. */
  --phone: 44rem;

  color-scheme: light;
  --fs: 0.9375rem;
  --fs-s: 0.8125rem;
  --r: 0.625rem;
  --r-lg: 0.875rem;
  --shadow: none;
  --nav-w: 16rem;

  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f1f3f6;
  --hover: #f4f6f8;
  --border: #e3e7ec;
  --border-strong: #cfd6de;
  --field: #8792a0;
  --text: #18212b;
  --text-2: #5b6673;
  --accent: #0b7a5e;
  --on-accent: #ffffff;
  --accent-soft: #e4f4ef;
  --accent-ink: #0a6e55;
  --focus: #0b7a5e;
  --nav-bg: #ffffff;
  --nav-text: #4a5563;
  --nav-on: var(--accent-ink);

  --ok-bg: #e3f4ee;
  --ok-ink: #0b6b4f;
  --warn-bg: #fdf0d5;
  --warn-ink: #8a5300;
  --bad-bg: #fce8e6;
  --bad-ink: #b3261e;
  --bad-on: #ffffff;
  --info-bg: #e4eefa;
  --info-ink: #1d5fa8;
  --neutral-bg: #eef0f3;
  --neutral-ink: #4a5563;
}

/* js/boot.js puts the theme on the page before it is drawn: the one chosen
   in this browser, else the system's. */
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #1e232a;
  --surface: #252b33;
  --surface-2: #2c333c;
  --hover: #2a313a;
  --border: #353d48;
  --border-strong: #46505c;
  --field: #7d8896;
  --text: #e2e6eb;
  --text-2: #aab4bf;
  --accent: #35c29d;
  --on-accent: #06241c;
  --accent-soft: #1c3a33;
  --accent-ink: #5fd6b5;
  --focus: #5fd6b5;
  --nav-bg: #22272e;
  --nav-text: #aab4bf;

  --ok-bg: #173a31;
  --ok-ink: #6fddbb;
  --warn-bg: #3d3118;
  --warn-ink: #f2c36b;
  --bad-bg: #46211f;
  --bad-ink: #ff9a91;
  --bad-on: #2a0f0d;
  --info-bg: #1d3350;
  --info-ink: #8dbbf2;
  --neutral-bg: #323a44;
  --neutral-ink: #c2cad3;
}

/* The text size button: three steps. Everything is in rem, so the whole
   page grows with it, as it does with the browser's zoom. */
:root[data-size='2'] {
  font-size: 112.5%;
}

:root[data-size='3'] {
  font-size: 125%;
}

/* Asked for more contrast: lines and second-rank text come forward. */
@media (prefers-contrast: more) {
  :root:not([data-look]) {
    --border: #8792a0;
    --border-strong: #4a5563;
    --field: #4a5563;
    --text-2: #303a46;
  }

  :root:not([data-look])[data-theme='dark'] {
    --border: #7d8896;
    --border-strong: #aab4bf;
    --field: #aab4bf;
    --text-2: #d5dbe2;
  }
}