/* ==========================================================================
   Alex Kamburakis — Design tokens & fonts
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colors */
  --color-text: #2a394e;
  --color-text-heading: #14243c;
  --color-purple: #4700D8;
  --color-purple-light: #874BF7;
  --color-yellow: #FFDC00;
  --color-yellow-bright: #ffe66e;
  --color-green: #9FE6A0;
  --color-green-dark: #066607;
  --color-green-darker: #071907;
  --color-pink: #F6C6EA;
  --color-pink-dark: #a3007b;
  --color-pink-darker: #4b0c3b;
  --color-purple-nav: #C285FF;
  --color-purple-nav-dark: #36006b;
  --color-purple-nav-darker: #0f001f;
  --color-nav-yellow-text: #3b3100;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-selection: var(--color-yellow-bright);

  /* Typography */
  --font-body: 'Roboto', sans-serif;
  --font-display: 'Poetsen One', sans-serif;
  --font-size-base: 15px;
  --font-size-body: 17px;
  --font-size-lead: 20px;
  --font-size-lead-lrg: 22px;
  --font-size-hero: 52px;
  --font-size-hero-mobile: 32px;
  --font-size-footer: 14px;
  --font-size-footer-heading: 13px;
  --font-size-nav: 64px;
  --font-size-nav-tablet: 40px;
  --font-size-nav-emoji: 40px;
  --font-size-button: 16px;
  --line-height-base: 28px;
  --line-height-body: 34px;
  --line-height-lead: 40px;
  --line-height-lead-lrg: 46px;
  --line-height-hero: 60px;
  --line-height-hero-mobile: 40px;
  --line-height-footer: 24px;

  /* Layout */
  --width-content: 800px;
  --width-text: 650px;
  --width-text-gutter: 150px;
  --width-figure: 850px;
  --width-figure-lowkey: 60%;
  --width-figure-lowkey-max: 1205px;
  --width-figure-lowkey-min: 800px;
  --width-nav-list: 80%;
  --width-mobile: 80%;

  /* Spacing */
  --space-text-block: 80px 0 50px;
  --space-text-flush-top: 40px;
  --space-text-flush-top-mobile: -20px;
  --space-header-top: 120px;
  --space-header-top-mobile: 60px;
  --space-footer-block: 100px 0;
  --space-footer-block-tablet: 50px 0;
  --space-down-xs: 10px;
  --space-up-s: 25px;
  --space-nav-item: 5px 0;
  --space-figure-bottom: 60px;
  --space-figure-bottom-tablet: 40px;

  /* Radii */
  --radius-media: 4px;
  --radius-media-round: 20px;
  --radius-pill: 100px;
  --radius-button: 30px;

  /* Effects */
  --nav-overlay-bg: rgba(255, 255, 255, 0.7);
  --ease-nav: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-pill: cubic-bezier(0.68, -0.6, 0.32, 1.6);

  /* Z-index */
  --z-menu: 20;
  --z-nav: 15;
}

/* --------------------------------------------------------------------------
   2. Web fonts
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Poetsen One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/poetsen-one.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poetsen One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/poetsen-one-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/roboto-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/roboto-latin-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/raleway-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}