:root {
  /* ================================
     TYPOGRAPHY SYSTEM
     ================================ */

  /* Base */
  --fs-base: 1rem;
  --fs-ratio: 1.25;

  /* Font sizes (downscale) */
  --fs-xsmall: calc(var(--fs-base) / var(--fs-ratio));
  --fs-small: calc(var(--fs-xsmall) * var(--fs-ratio));

  /* Font sizes (body + headings) */
  --fs-p: var(--fs-base);

  --fs-h6: calc(var(--fs-p) * var(--fs-ratio));
  --fs-h5: calc(var(--fs-h6) * var(--fs-ratio));
  --fs-h4: calc(var(--fs-h5) * var(--fs-ratio));
  --fs-h3: calc(var(--fs-h4) * var(--fs-ratio));
  --fs-h2: calc(var(--fs-h3) * var(--fs-ratio));
  --fs-h1: calc(var(--fs-h2) * var(--fs-ratio));

  /* Line heights */
  --lh-xsmall: 1.4;
  --lh-small: 1.45;
  --lh-p: 1.5;

  --lh-h6: 1.4;
  --lh-h5: 1.35;
  --lh-h4: 1.3;
  --lh-h3: 1.2;
  --lh-h2: 1.1;
  --lh-h1: 1;

  /* Letter spacing */
  --ls-xsmall: 0.01em;
  --ls-small: 0.005em;
  --ls-p: normal;

  --ls-h6: -0.005em;
  --ls-h5: -0.0075em;
  --ls-h4: -0.01em;
  --ls-h3: -0.0125em;
  --ls-h2: -0.015em;
  --ls-h1: -0.02em;

  /* ================================
     TILES
     ================================ */

  --tiles-gap: 1.5rem;
  --tiles-radius: 10px;

  --tiles-bg: #ffffff;
  --tiles-text: #111111;
  --tiles-muted: rgba(0, 0, 0, 0.65);

  --tiles-overlay-gradient: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.65) 100%
  );

  --tiles-hover-scale: 1.03;

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

  --transition-fast: .25s ease;
  --transition-normal: .425s ease;
  --transition-slow: .6s ease;
  --translateY0: translateY(0);
  --translateY-1: translateY(-1px);
  --translateY-2: translateY(-2px);
  --translateY-3: translateY(-3px);
  --translateY-4: translateY(-4px);

  /* ================================
     UI COLORS
     ================================ */

  --ui-bg: #0f0f0f;
  --ui-fg: #ffffff;
  --ui-tg: #ececec;
  --ui-g: #4b5563;
  --ui-r: #ff6d6d;
  --ui-muted: rgba(255, 255, 255, 0.55);
  --ui-accent: rgba(255, 255, 255, 0.9);
  --ui-vi: #FCD12A;
  --ui-vi-muted: rgb(248, 222, 126);
  --ui-cb:#fcedd9;

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

  --sidebar-width-desktop: 320px;
  --sidebar-width-tablet: 280px;
}

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

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

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  background-color: var(--ui-fg);
  color: var(--ui-bg);
  overflow-x: hidden;
  scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ================================
   TEXT ELEMENTS
   ================================ */

p {
  font-size: var(--fs-p);
  line-height: var(--lh-p);
  letter-spacing: var(--ls-p);
  color: #555;
}

small,
.small {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-small);
}

.xsmall {
  font-size: var(--fs-xsmall);
  line-height: var(--lh-xsmall);
  letter-spacing: var(--ls-xsmall);
}

/* Headings */

h1,h2,h3,h4,h5,h6 {
  margin: 0;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
}

h5 {
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  letter-spacing: var(--ls-h5);
}

h6 {
  font-size: var(--fs-h6);
  line-height: var(--lh-h6);
  letter-spacing: var(--ls-h6);
}

/* ================================
   LISTS & LINKS
   ================================ */

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none !important;
}

a:hover {
  color: inherit;
  text-decoration: none;
}

button:focus,
a:focus {
  outline: 1px solid var(--ui-vi-muted);
  border-radius: 6px;
}

button:focus-visible,
a:focus-visible {
  box-shadow: 0 0 0 1px rgba(252, 210, 42, 1);
}

/* ================================
   SPECIAL
   ================================ */

.id-vi {
  font-style: normal;
  color: var(--ui-vi);
  white-space: nowrap;
}

@media (max-width: 250px) {
  .id-vi {
    white-space: normal;
  }
}