@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Oswald:wght@300;400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Bebas+Neue&display=swap');

body {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--white);
  background-color: var(--black);
}

/* Display */
.text-display {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

/* Titles */
.text-title {
  font-family: var(--font-title);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Numbers */
.text-number {
  font-family: var(--font-number);
  line-height: 1;
  letter-spacing: 0.02em;
}

/* Body */
.text-body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
}

/* Sizes */
.text-hero   { font-size: clamp(60px, 9vw, 130px); }
.text-huge   { font-size: clamp(48px, 6vw, 96px); }
.text-xxl    { font-size: clamp(36px, 4vw, 72px); }
.text-xl     { font-size: clamp(28px, 3vw, 48px); }
.text-lg     { font-size: clamp(20px, 2vw, 32px); }
.text-md     { font-size: 18px; }
.text-sm     { font-size: 14px; }
.text-xs     { font-size: 12px; }
.text-micro  { font-size: 10px; }

/* Colors */
.text-gold      { color: var(--gold); }
.text-gold-shine{ color: var(--gold-shine); }
.text-dim       { color: var(--white-dim); }
.text-danger    { color: var(--danger); }

/* Special */
.text-outline-gold {
  color: transparent;
  -webkit-text-stroke: 2px var(--gold);
  text-stroke: 2px var(--gold);
}

.text-tracked { letter-spacing: 0.2em; }
.text-wide    { letter-spacing: 0.15em; }
.text-upper   { text-transform: uppercase; }
.text-italic  { font-style: italic; }

/* Price */
.price-tag {
  font-family: var(--font-number);
  color: var(--gold);
  line-height: 1;
}

.price-currency {
  font-family: var(--font-body);
  font-size: 0.4em;
  font-weight: 600;
  vertical-align: super;
  color: var(--gold-light);
}

.price-old {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--white-dim);
  text-decoration: line-through;
}

/* Badge */
.badge {
  display: inline-block;
  font-family: var(--font-title);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.badge-gold   { background: var(--gold);   color: var(--black); }
.badge-danger { background: var(--danger); color: var(--white); }
.badge-orange { background: var(--orange); color: var(--black); }

/* Gradient text */
.text-gradient-gold {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
