/* =========================
   ROOT
========================= */

:root {

  /* BACKGROUNDS */

  --bg-primary: #0d1117;
  --bg-secondary: #131922;

  /* SURFACES */

  --surface-soft:
    rgba(255,255,255,0.022);

  --surface-hover:
    rgba(255,255,255,0.04);

  /* TEXT */

  --text-primary:
    rgba(245,245,245,0.94);

  --text-secondary:
    rgba(220,224,230,0.74);

  --text-dim:
    rgba(220,224,230,0.58);

  --text-faint:
    rgba(255,255,255,0.38);

  --text-meta:
    rgba(255,255,255,0.24);

  /* BORDERS */

  --border-soft:
    rgba(255,255,255,0.09);

  --border-strong:
    rgba(255,255,255,0.16);

  /* TYPOGRAPHY */

  --font-primary:
    "IBM Plex Sans",
    sans-serif;

  --font-mono:
    "IBM Plex Mono",
    monospace;

  /* SPACING */

  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 7rem;
  --space-3xl: 10rem;

  /* LAYOUT */

  --container-width: 1440px;

  --navbar-height: 88px;

  /* MOTION */

  --motion-soft:
    0.8s cubic-bezier(.16,.84,.44,1);

  --motion-atmospheric:
    1.4s cubic-bezier(.16,.84,.44,1);
}

/* =========================
   RESET
========================= */

* {

  margin: 0;
  padding: 0;

  box-sizing: border-box;
}

html {

  scroll-behavior: smooth;
}

body {

  background:
    var(--bg-primary);

  color:
    var(--text-primary);

  font-family:
    var(--font-primary);

  overflow-x: hidden;

  transition:
    background 0.8s ease,
    color 0.8s ease;
}

/* =========================
   PAGE TRANSITIONS
========================= */

body {

  opacity: 0;

  filter: blur(2px);

  transition:
    opacity 1.2s cubic-bezier(.16,.84,.44,1),
    filter 1.2s cubic-bezier(.16,.84,.44,1);
}

body.page-ready {

  opacity: 1;

  filter: blur(0);
}

body.page-leaving {

  opacity: 0;

  filter: blur(4px);
}

/* =========================
   TYPOGRAPHY
========================= */

h1,
h2,
h3,
h4,
h5,
h6 {

  font-weight: 400;

  color:
    var(--text-primary);
}

p {

  color:
    var(--text-secondary);
}

a {

  text-decoration: none;

  color: inherit;
}

img {

  max-width: 100%;

  display: block;
}

/* =========================
   LAYOUT
========================= */

.container {

  width: 100%;

  max-width:
    var(--container-width);

  margin: 0 auto;

  padding:
    0 2rem;
}

/* =========================
   SELECTION
========================= */

::selection {

  background:
    rgba(255,255,255,0.14);

  color:
    var(--text-primary);
}