/*
 * Eneco brand theme: the Etelka @font-face rules and the brand tokens.
 *
 * Served as a static asset and linked straight from `index.html`, so it is not
 * processed by the bundler -- keep every url() rooted at /brand/.
 */

@font-face {
  font-family: 'Etelka';
  src:
    url('/brand/fonts/Etelka-Light.woff2') format('woff2'),
    url('/brand/fonts/Etelka-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Etelka';
  src:
    url('/brand/fonts/Etelka-Text.woff2') format('woff2'),
    url('/brand/fonts/Etelka-Text.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Etelka';
  src:
    url('/brand/fonts/Etelka-TextItalic.woff2') format('woff2'),
    url('/brand/fonts/Etelka-TextItalic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Medium doubles as the semibold step -- Etelka has no 600 cut. */
@font-face {
  font-family: 'Etelka';
  src:
    url('/brand/fonts/Etelka-Medium.woff2') format('woff2'),
    url('/brand/fonts/Etelka-Medium.woff') format('woff');
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Etelka';
  src:
    url('/brand/fonts/Etelka-Bold.woff2') format('woff2'),
    url('/brand/fonts/Etelka-Bold.woff') format('woff');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Etelka';
  src:
    url('/brand/fonts/Etelka-BoldItalic.woff2') format('woff2'),
    url('/brand/fonts/Etelka-BoldItalic.woff') format('woff');
  font-weight: 700 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --eneco-red: #d21242;
  --eneco-rood-600: #e5384c;
  --eneco-oranje-500: #ea714f;
  --eneco-deep-dark: #2f2d2d;
  --eneco-ink: #1a171b;
  --eneco-green: #007250;
  --eneco-grey: #6b6767;
  --eneco-gradient: linear-gradient(90deg, var(--eneco-rood-600) 0%, var(--eneco-oranje-500) 100%);

  --eneco-font-family:
    'Etelka', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

html {
  font-family: var(--eneco-font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  color: var(--eneco-ink);
}

/* Eneco sets headings in Etelka Bold, noticeably tighter than the body copy. */
h1,
h2,
h3,
h4 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

::selection {
  background-color: var(--eneco-red);
  color: #fff;
}