/* Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@300;400;500;600;700&display=swap');

body{

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

}
/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Base */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-md);
  color: var(--color-text);
  background-color: var(--color-white);
  line-height: 1.6;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  color: var(--color-black);
  line-height: 1.2;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

ul,
ol {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* Reusable Container */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding-inline: 20px;
}

/* Utility */
.section {
  padding: 80px 0;
}

.btn,
button{

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

    letter-spacing:1px;

    font-weight:600;

}





/* ===========================
   THEME SWITCH
=========================== */

:root{

    --bg:#111111;
    --card:#1b1b1b;
    --text:#ffffff;
    --secondary:#cfcfcf;
    --primary:#d8a94b;

}

body{

    background:var(--bg);
    color:var(--text);
    transition:.35s;

}

.light-theme{

    --bg:#f7f7f7;
    --card:#ffffff;
    --text:#111111;
    --secondary:#555;
    --primary:#d89b2b;

}

body{

    background:var(--bg);
    color:var(--text);

}

.product-card,
.category-card,
.promo-banner,
.site-feature,
.testimonial-card,
.newsletter{

    background:var(--card);
    color:var(--text);

}

.product-title,
.section-title,
h1,h2,h3,h4,h5{

    color:var(--text);

}

p{

    color:var(--secondary);

}

a{

    color:var(--text);

}

.theme-switcher{

    display:flex;
    align-items:center;
    margin-left:25px;

}

.theme-toggle{

    width:42px;
    height:42px;
    border-radius:50%;
    border:2px solid var(--primary);
    background:transparent;
    color:var(--primary);
    cursor:pointer;
    font-size:18px;
    transition:.3s;

}

.theme-toggle:hover{

    background:var(--primary);
    color:#fff;
    transform:rotate(180deg);

}