/* ============================================================
   PIXELBUZZ — Design System
   Premium Wedding Photography & Cinematography
   ============================================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* --- CSS Custom Properties (Light Mode Default) --- */
:root {
  /* Colors */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8F8F8;
  --bg-tertiary: #F0F0F0;
  --bg-hero-overlay: rgba(0, 0, 0, 0.45);
  --text-primary: #111111;
  --text-secondary: #555555;
  --text-muted: #888888;
  --text-inverse: #FFFFFF;
  --orange: #FF5C00;
  --orange-hover: #E55300;
  --orange-light: rgba(255, 92, 0, 0.1);
  --orange-border: rgba(255, 92, 0, 0.3);
  --card-bg: #FFFFFF;
  --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --card-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.1);
  --border-color: rgba(0, 0, 0, 0.06);
  --nav-bg: rgba(255, 255, 255, 0.85);
  --nav-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
  --input-bg: #FFFFFF;
  --input-border: #E0E0E0;
  --input-focus: #FF5C00;
  --overlay: rgba(0, 0, 0, 0.6);
  --logo-primary: #111111;
  --logo-orange: #FF5C00;
  --scrollbar-track: #F0F0F0;
  --scrollbar-thumb: #CCCCCC;

  /* Typography */
  --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-hero: clamp(2.5rem, 5vw, 4rem);
  --fs-h1: clamp(2rem, 4vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 3.5vw, 2.625rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.75rem);
  --fs-h4: 1.375rem;
  --fs-body: 1rem;
  --fs-body-lg: 1.125rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.8125rem;
  --fs-btn: 0.9375rem;
  --fw-extrabold: 800;
  --fw-bold: 700;
  --fw-semibold: 600;
  --fw-medium: 500;
  --fw-regular: 400;
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.6;
  --lh-relaxed: 1.8;
  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.05em;
  --ls-wider: 0.1em;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;
  --section-padding: clamp(4rem, 8vw, 7rem);
  --container-max: 1200px;
  --container-narrow: 800px;
  --container-wide: 1400px;

  /* Borders & Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-Index Scale */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* --- Dark Mode --- */
[data-theme="dark"] {
  --bg-primary: #0B0B0B;
  --bg-secondary: #141414;
  --bg-tertiary: #1A1A1A;
  --bg-hero-overlay: rgba(0, 0, 0, 0.6);
  --text-primary: #F5F5F5;
  --text-secondary: #A0A0A0;
  --text-muted: #666666;
  --orange-hover: #FF7518;
  --orange-light: rgba(255, 92, 0, 0.08);
  --card-bg: #151515;
  --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  --card-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.5);
  --border-color: rgba(255, 255, 255, 0.06);
  --nav-bg: rgba(11, 11, 11, 0.88);
  --nav-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
  --input-bg: #1A1A1A;
  --input-border: #333333;
  --logo-primary: #FFFFFF;
  --scrollbar-track: #1A1A1A;
  --scrollbar-thumb: #333333;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 80px;
}

body {
  font-family: var(--font-family);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color var(--transition-base), color var(--transition-base);
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); }

::selection { background: var(--orange); color: #111111; }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

h1, h2, h3, h4, h5, h6 {
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
  font-weight: var(--fw-bold);
}

h1 { font-size: var(--fs-h1); font-weight: var(--fw-extrabold); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }

p { color: var(--text-secondary); line-height: var(--lh-relaxed); }
a { color: inherit; text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--orange); }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: var(--font-family); cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: var(--font-family); font-size: var(--fs-body); }

.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-xl); }
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }
.section { padding: var(--section-padding) 0; }
.section--alt { background-color: var(--bg-secondary); }
.section--dark { background-color: #111111; color: #F5F5F5; }
.section--dark p { color: #A0A0A0; }
.text-center { text-align: center; }
.text-orange { color: var(--orange); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.fw-extrabold { font-weight: var(--fw-extrabold); }
.fw-bold { font-weight: var(--fw-bold); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-medium { font-weight: var(--fw-medium); }
.uppercase { text-transform: uppercase; letter-spacing: var(--ls-wider); }

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

.section-header { text-align: center; margin-bottom: var(--space-3xl); max-width: 680px; margin-left: auto; margin-right: auto; }
.section-label { display: inline-block; font-size: var(--fs-caption); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-wider); color: var(--orange); margin-bottom: var(--space-md); }
.section-header h2 { margin-bottom: var(--space-lg); }
.section-header p { font-size: var(--fs-body-lg); max-width: 560px; margin: 0 auto; }

.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.revealed { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }