// ----------------- CONFIG ------------------- //

// Screen sizes (up to) - used in mediaqueries

$mobile-screen: 43em;
$tablet-screen: 62em;
$laptop-screen: 82em;

// Local fonts
@font-face {
  font-family: 'Atkinson-Hyperlegible';
  src: url('font/Atkinson-Hyperlegible-Regular-102a.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson-Hyperlegible';
  src: url('font/Atkinson-Hyperlegible-Bold-102a.woff2') format('woff2');
  font-weight: bold;
}
@font-face {
  font-family: 'Atkinson-Hyperlegible';
  src: url('font/Atkinson-Hyperlegible-Italic-102a.woff2') format('woff2');
  font-style: italic;
}
@font-face {
  font-family: 'Atkinson-Hyperlegible';
  src: url('font/Atkinson-Hyperlegible-BoldItalic-102a.woff2') format('woff2');
  font-weight: bold;
  font-style: italic;
}
// CSS custom properties - variables

:root {
  --dc-font: 'Atkinson-Hyperlegible';

  --sans-serif: var(--dc-font), system-ui, sans-serif;

  --sans-serif-input: inherit; // Use OS default font for input fields

  --monospace: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;

  // May be superseed by user pref (typically from 50% to 75%, default 62.5%)
  --html-font-size: 62.5%; // Basically 10px (16px ⁄x 0.625) — Must be in %

  --body-font-size: 1.4rem;

  // collapser widths
  --collapser-width: 5px;
  --collapser-width-focus: calc(var(--collapser-width) * 3);
}
