/* Base CSS - Variables, Reset, Typography, Global Styles for Alnitak Construction */

/* CSS Variables */
:root {
    /* Brand Colors - Zinc Monochrome Palette */
    --primary-blue: #3F3F46;        /* Zinc 700 — primary buttons, links */
    --primary-zinc: #3F3F46;
    --blue-dark: #52525B;           /* Zinc 600 — hover states */
    --blue-light: rgba(63, 63, 70, 0.06); /* Zinc tint for subtle backgrounds */
    --bg-dark: #3F3F46;             /* Zinc 700 — dark section backgrounds */
    --bg-darker: #2D2D30;           /* Zinc 750ish — footer, deep sections */
    --text-white: #FFFFFF;
    --text-light: #E4E4E7;
    --text-muted: #71717A;
    --charcoal: #3F3F46;
    --light-bg: #F4F4F5;
    --border-color: #E4E4E7;
    --accent-gold: #71717A;
    --accent-silver: #A1A1AA;
    
    /* Typography */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Jost', sans-serif;
    --font-weight-heading: 700;
    --font-weight-body: 400;
    
    /* Spacing - Generous spacing for premium feel */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2.5rem;
    --spacing-xl: 3.5rem;
    --spacing-3xl: 6rem; /* generosity */
    
    /* Transitions */
    --transition-fast: 0.2s;
    --transition-normal: 0.35s;
    --transition-slow: 0.6s;
    
    /* Shadows */
    --shadow-sm: 0 2px 5px rgba(13, 17, 23, 0.05);
    --shadow-md: 0 12px 28px rgba(13, 17, 23, 0.08);
    --shadow-lg: 0 24px 48px rgba(13, 17, 23, 0.12);
    
    /* Border Radius - Premium sharp corners (2px max) */
    --radius-sm: 2px;
    --radius-md: 2px;
    --radius-lg: 2px;
    
    /* Z-indices */
    --z-dropdown: 1000;
    --z-sticky: 100;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* Container Widths */
    --container-max: 1200px;
}

/* CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: auto; /* Handled by Lenis */
    box-sizing: border-box;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

html.lenis, html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--charcoal);
    background-color: var(--text-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    position: relative;
    min-height: 100vh;
}

/* Typography Hierarchy - Bold, Industrial, High Contrast */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    line-height: 1.15;
    color: var(--bg-darker);
    letter-spacing: 0;
    text-transform: none;
}

h1 {
    font-size: clamp(1.65rem, 3.2vw, 2.5rem);
}

h2 {
    font-size: clamp(1.4rem, 2.6vw, 2.05rem);
}

h3 {
    font-size: clamp(1.18rem, 2vw, 1.6rem);
}

h4 {
    font-size: 1.2rem;
}

h5 {
    font-size: 1.05rem;
}

h6 {
    font-size: 0.92rem;
}

p {
    font-family: var(--font-body);
    color: #3F3F46;
    margin-bottom: 1.25rem;
    font-size: 1rem;
    font-weight: 300;
}

a {
    color: var(--primary-blue);
    text-decoration: none;
    transition: all var(--transition-fast) ease-in-out;
}

a:hover {
    color: var(--secondary-blue);
}

/* Base Container */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

/* ==========================================
   GLOBAL SECTION COMMONS
   ========================================== */
.section {
    padding: var(--spacing-3xl) 0;
    position: relative;
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary-blue);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.section-label::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 1.5px;
    background-color: var(--primary-blue);
}

.section-title-wrapper {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.section-title-wrapper::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 2px;
    background-color: var(--primary-blue);
}

.section-title {
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 2.4vw, 1.95rem);
    font-weight: 700;
    color: var(--bg-darker);
    line-height: 1.2;
    margin-bottom: 1.25rem;
}

.section-subtitle {
    font-family: var(--font-body);
    font-size: 1.125rem;
    color: #71717A;
    max-width: 600px;
    margin-bottom: var(--spacing-lg);
    font-weight: 300;
}

/* Grid & Layout Utilities */
.grid {
    display: grid;
    gap: var(--spacing-sm);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

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

.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.pt-xl { padding-top: var(--spacing-xl); }
.pb-xl { padding-bottom: var(--spacing-xl); }

/* Flexbox Utilities */
.flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }

.gap-sm { gap: var(--spacing-xs); }
.gap-md { gap: var(--spacing-sm); }
.gap-lg { gap: var(--spacing-md); }

/* Images and Icons */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

.icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    stroke: currentColor;
    fill: none;
}

/* Reset Lists */
ul {
    list-style: none;
}

.hidden {
    display: none !important;
}