/* ============================================================
   BASE.CSS — Dhwani Entertainment
   Typography, body, links, containers, section wrappers,
   and global utility classes
   ============================================================ */

/* ----------------------------------------------------------
   GOOGLE FONTS IMPORT
   ---------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Source+Sans+3:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ----------------------------------------------------------
   BODY
   ---------------------------------------------------------- */

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-body);
  background-color: var(--color-white);
  overflow-x: hidden;
}

/* ----------------------------------------------------------
   HEADINGS
   ---------------------------------------------------------- */

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--font-size-hero);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-regular);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}

h3, .h3 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
}

h4, .h4 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  color: var(--color-text-primary);
}

h5, .h5 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  color: var(--color-text-primary);
}

/* ----------------------------------------------------------
   PARAGRAPHS
   ---------------------------------------------------------- */

p {
  margin-bottom: var(--space-md);
  color: var(--color-text-body);
}

p:last-child {
  margin-bottom: 0;
}

p.lead {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

/* ----------------------------------------------------------
   LINKS
   ---------------------------------------------------------- */

a {
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent);
}

/* ----------------------------------------------------------
   LABEL CLASSES
   Small, uppercase, tracked — used for section eyebrows
   ---------------------------------------------------------- */

.label {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  line-height: 1;
}

.label--accent {
  color: var(--color-accent);
}

.label--white {
  color: rgba(255, 255, 255, 0.7);
}

/* ----------------------------------------------------------
   CONTAINERS
   ---------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-xl);
}

.container--narrow {
  width: 100%;
  max-width: var(--max-width-narrow);
  margin-inline: auto;
  padding-inline: var(--space-xl);
}

@media (max-width: 768px) {
  .container,
  .container--narrow {
    padding-inline: var(--space-lg);
  }
}

@media (max-width: 480px) {
  .container,
  .container--narrow {
    padding-inline: var(--space-md);
  }
}

/* ----------------------------------------------------------
   SECTION WRAPPERS
   ---------------------------------------------------------- */

.section {
  padding-block: var(--space-section);
  background-color: var(--color-white);
}

.section--grey {
  background-color: var(--color-grey-light);
}

.section--dark {
  background-color: var(--color-black);
  color: var(--color-white);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark p {
  color: inherit;
}

.section__header {
  margin-bottom: var(--space-3xl);
}

.section__header--centered {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--space-3xl);
}

.section__eyebrow {
  margin-bottom: var(--space-sm);
}

.section__title {
  margin-bottom: var(--space-md);
}

.section__subtitle {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  max-width: 560px;
}

.section--dark .section__subtitle {
  color: rgba(255, 255, 255, 0.65);
}

/* ----------------------------------------------------------
   TEXT UTILITIES
   ---------------------------------------------------------- */

/* Alignment */
.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }

/* Weight */
.font-light    { font-weight: var(--font-weight-light); }
.font-regular  { font-weight: var(--font-weight-regular); }
.font-medium   { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold     { font-weight: var(--font-weight-bold); }

/* Color */
.text-primary   { color: var(--color-text-primary); }
.text-body      { color: var(--color-text-body); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted     { color: var(--color-text-muted); }
.text-accent    { color: var(--color-accent); }
.text-white     { color: var(--color-white); }

/* Size shortcuts */
.text-xs   { font-size: var(--font-size-xs); }
.text-sm   { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-md   { font-size: var(--font-size-md); }
.text-lg   { font-size: var(--font-size-lg); }
.text-xl   { font-size: var(--font-size-xl); }

/* Transform */
.uppercase { text-transform: uppercase; }
.lowercase  { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

/* Letter spacing */
.tracking-wide    { letter-spacing: var(--letter-spacing-wide); }
.tracking-wider   { letter-spacing: var(--letter-spacing-wider); }
.tracking-widest  { letter-spacing: var(--letter-spacing-widest); }
.tracking-tight   { letter-spacing: var(--letter-spacing-tight); }

/* ----------------------------------------------------------
   DISPLAY UTILITIES
   ---------------------------------------------------------- */

.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.gap-sm   { gap: var(--space-sm); }
.gap-md   { gap: var(--space-md); }
.gap-lg   { gap: var(--space-lg); }
.gap-xl   { gap: var(--space-xl); }

/* ----------------------------------------------------------
   SPACING UTILITIES
   ---------------------------------------------------------- */

.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mt-xl  { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mb-sm  { margin-bottom: var(--space-sm); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }
.mb-xl  { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }

/* ----------------------------------------------------------
   VISUAL UTILITIES
   ---------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.overflow-hidden { overflow: hidden; }
.relative        { position: relative; }
.w-full          { width: 100%; }

/* Aspect ratios */
.aspect-1-1    { aspect-ratio: 1 / 1; }
.aspect-16-9   { aspect-ratio: 16 / 9; }
.aspect-21-9   { aspect-ratio: 21 / 9; }
.aspect-16-10  { aspect-ratio: 16 / 10; }

/* Object fit */
.object-cover  { object-fit: cover; object-position: center; }

/* Divider */
.divider {
  width: 48px;
  height: 2px;
  background-color: var(--color-accent);
  margin-block: var(--space-lg);
}

.divider--center {
  margin-inline: auto;
}