:root {
  /* Fonts */
  --font-sans: 'Public Sans', -apple-system, BlinkMacSystemFont, Segoe UI,
    Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
    sans-serif;
  --font-serif: 'Playfair Display', serif;

  /* Theme Colors */
  --white: #ffffff;
  --gray-05: #f3f3f3;
  --gray-10: #e7e7e7;
  --gray-20: #d0d0d0;
  --gray-40: #a0a0a0;
  --gray-60: #717171;
  --gray-80: #414141;
  --gray-90: #2a2a2a;
  --gray-95: #1e1e1e;
  --black: #121212;
  --black-a-30: rgba(0, 0, 0, 0.3);
  --pink: #ce3260;
  --pink-light: #fc7fa9;

  /* Theme Colors */
  --primary-a-30: var(--black-a-30);
  --primary: var(--black);
  --primary-95: var(--gray-95);
  --primary-90: var(--gray-90);
  --primary-80: var(--gray-80);
  --primary-60: var(--gray-60);
  --primary-40: var(--gray-40);
  --primary-20: var(--gray-20);
  --primary-10: var(--gray-10);
  --primary-05: var(--gray-05);
  --secondary: var(--white);
  --accent: var(--pink);
}

[data-theme='dark'] {
  /* Theme Colors */
  --primary: var(--white);
  --primary-95: var(--gray-05);
  --primary-90: var(--gray-10);
  --primary-80: var(--gray-20);
  --primary-60: var(--gray-40);
  --primary-40: var(--gray-60);
  --primary-20: var(--gray-80);
  --primary-10: var(--gray-90);
  --primary-05: var(--gray-95);
  --secondary: var(--black);
  --accent: var(--pink-light);
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  height: 100%;
  box-sizing: border-box;
  touch-action: manipulation;
  font-feature-settings: 'case' 1, 'rlig' 1, 'calt' 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--secondary);
  color: var(--primary);
}

body {
  position: relative;
  min-height: 100%;
  margin: 0;
}

@media screen and (max-width: 991px) {
  a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    user-select: none;
  }
}
