/*
Theme Name: Owais Yaqoob
Theme URI: https://owaisyaqoob.com
Description: Premium cinematic digital documentary theme for professional MMA fighter Owais Yaqoob.
Version: 1.0.0
Author: Creative Agency
Author URI: https://agency.com
Text Domain: owais-yaqoob
Tags: custom-background, custom-logo, featured-images, full-width-template, theme-options
*/

/* Design System */
:root {
  /* Color Palette */
  --color-black: #050505;
  --color-deep-black: #090909;
  --color-charcoal: #121212;
  --color-dark-grey: #1B1B1B;
  --color-crimson: #8B0000;
  --color-deep-red: #A00000;
  --color-white: #F5F5F5;
  --color-muted-white: #A7A7A7;
  --color-gold: #D4AF37;

  /* Typography */
  --font-display: 'Bebas Neue', 'Oswald', 'Anton', sans-serif;
  --font-body: 'Inter', 'Manrope', 'Helvetica Neue', sans-serif;

  /* Spacing */
  --space-4xs: 0.25rem;
  --space-3xs: 0.5rem;
  --space-2xs: 0.75rem;
  --space-xs: 1rem;
  --space-sm: 1.5rem;
  --space-md: 2rem;
  --space-lg: 3rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;
  --space-4xl: 12rem;

  /* Motion */
  --duration-slow: 1.2s;
  --duration-medium: 0.8s;
  --duration-fast: 0.3s;
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
}

/* Reset & Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  padding: 0;
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

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

a {
  color: inherit;
  text-decoration: none;
}

/* Utility Classes */
.u-container {
  width: min(90%, 1400px);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.u-section {
  padding-block: var(--space-3xl) var(--space-4xl);
  position: relative;
}

.u-section--tight {
  padding-block: var(--space-xl) var(--space-2xl);
}

.u-text-center { text-align: center; }
.u-text-uppercase { text-transform: uppercase; }

.u-chapter-label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.6;
  display: block;
  margin-bottom: var(--space-sm);
}

.u-headline {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 6rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 var(--space-lg);
}

.u-subheadline {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 var(--space-md);
}

.u-body {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.7;
  max-width: 45rem;
}

.u-meta {
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.5;
}

.u-accent {
  color: var(--color-crimson);
}

.u-divider {
  width: 1px;
  height: 2rem;
  background: var(--color-muted-white);
  opacity: 0.2;
  margin: var(--space-lg) 0;
}

.u-divider--center {
  margin-left: auto;
  margin-right: auto;
}