/* vars.css */

/* Font sizes */
:root {
  
  --base-font-size: clamp(12px, 1.8vw, 28px);


  --fs-sm: calc(var(--base-font-size) * 0.75);  /* 15px */
  --fs-md: calc(var(--base-font-size) * 1.2);   /* 24px */
  --fs-lg: calc(var(--base-font-size) * 1.4);   /* 28px */
  --fs-xl: calc(var(--base-font-size) * 2);     /* 40px */
  --fs-xxl: calc(var(--base-font-size) * 4);
  --fs-xxxl: calc(var(--base-font-size) * 5);
  --fs-logo: clamp(0.2rem, 14vw, 14rem);
  --fs-btn: clamp(0.5rem, 3vw, 5rem);

  /* Colors */
  --bg-color: #171717;
  --card-color: #1E1E1E;
  --text-color: #d1d5db;
  --highlight-color: #627f68;
  --btn-color: #627f68;
  --btn-text-color: #d0d0d0;
  --btn-hover-color: #4d6351;
  --inp-color: #242424;
  --inp-bg-color: #535353;

  /* Spacing */
  --gap: 1rem;
  --pd-base: 1rem;
  --pd-card: 1rem;
  --mg-tile: 1.5rem;
}
}

html {
  font-size: var(--base-font-size);
}