@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:wght@300;400;500&display=swap');
@import 'tokens.css';

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-weight: var(--weight-light);
  color: var(--text-primary);
  background: var(--bg-primary);
  line-height: var(--leading-normal);
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul, ol { list-style: none; }

/* TYPOGRAPHY */
.t-display {
  font-family: var(--font-serif);
  font-size: clamp(var(--size-3xl), 7vw, var(--size-5xl));
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}
.t-h1 {
  font-family: var(--font-serif);
  font-size: clamp(var(--size-2xl), 5vw, var(--size-4xl));
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
}
.t-h2 {
  font-family: var(--font-serif);
  font-size: clamp(var(--size-xl), 3vw, var(--size-3xl));
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
}
.t-h3 {
  font-family: var(--font-serif);
  font-size: clamp(var(--size-lg), 2vw, var(--size-2xl));
  font-weight: var(--weight-regular);
}
.t-label {
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}
.t-body {
  font-size: var(--size-base);
  line-height: var(--leading-loose);
  color: var(--text-secondary);
}
.t-gold { color: var(--gold); }
.t-emerald { color: var(--emerald); }
.t-muted { color: var(--silver); }

/* LAYOUT */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-8);
}
@media (max-width: 768px) {
  .container { padding: 0 var(--space-6); }
}

.section { padding: var(--space-24) 0; }
.section--sm { padding: var(--space-16) 0; }
.section--lg { padding: var(--space-32) 0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* DIVIDER */
.divider {
  width: 60px; height: 1px;
  background: var(--gold);
  margin: var(--space-6) auto;
}
.divider--left { margin-left: 0; }

/* SECTION HEADER */
.section-header { margin-bottom: var(--space-12); }
.section-header--center { text-align: center; }
.section-header--center .divider { margin: var(--space-6) auto; }

/* SCROLLBAR */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--charcoal); }
::-webkit-scrollbar-thumb { background: var(--emerald); border-radius: 2px; }