/* ====================================================================
   BASE.CSS — Reset, Custom Properties, Typography, Utilities
   ==================================================================== */

/* --- Modern CSS Reset -------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; text-size-adjust: 100%; }
body { min-height: 100vh; }
img, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
p, h1, h2, h3, h4 { overflow-wrap: break-word; }
table { border-collapse: collapse; }

/* --- Custom Properties ------------------------------------------- */
:root {

  /* Core palette — desert dark mode */
  --clr-bg:         #0A0704;
  --clr-bg-2:       #0E0A05;
  --clr-surface:    #1A1208;
  --clr-surface-2:  #261A09;
  --clr-surface-3:  #33220C;

  /* Brand accents */
  --clr-orange:       #E8641A;
  --clr-orange-light: #F2894D;
  --clr-orange-dark:  #B84E12;

  --clr-red:      #C13A1A;
  --clr-red-dark: #8B2510;

  --clr-gold:       #D4A540;
  --clr-gold-light: #E8C468;

  --clr-olive:       #6B7A2A;
  --clr-olive-light: #8A9B3C;

  --clr-sand:       #C4A478;
  --clr-sand-light: #D8BC98;

  /* Text */
  --clr-text:       #F0E4CC;
  --clr-text-dim:   #B8A888;
  --clr-text-muted: #7A6848;

  /* Semantic */
  --clr-error:   #E85555;
  --clr-success: #5BAD72;

  /* Border */
  --clr-border:       rgba(255,255,255,0.06);
  --clr-border-hover: rgba(232,100,26,0.35);

  /* --- Typography --- */
  --font-display: 'Bebas Neue', 'Impact', 'Arial Black', sans-serif;
  --font-heading: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  /* Fluid type scale */
  --fs-xs:   clamp(0.70rem, 1.8vw, 0.80rem);
  --fs-sm:   clamp(0.85rem, 2.2vw, 0.95rem);
  --fs-base: clamp(1rem,    2.8vw, 1.10rem);
  --fs-lg:   clamp(1.10rem, 3.2vw, 1.25rem);
  --fs-xl:   clamp(1.25rem, 4vw,   1.50rem);
  --fs-2xl:  clamp(1.50rem, 5vw,   2.00rem);
  --fs-3xl:  clamp(2.00rem, 6vw,   3.00rem);
  --fs-4xl:  clamp(2.50rem, 8vw,   4.00rem);
  --fs-5xl:  clamp(3.50rem, 12vw,  7.00rem);
  --fs-hero: clamp(4.50rem, 18vw, 11.00rem);

  /* --- Spacing (4px base) --- */
  --sp-1:  0.25rem;
  --sp-2:  0.50rem;
  --sp-3:  0.75rem;
  --sp-4:  1.00rem;
  --sp-5:  1.25rem;
  --sp-6:  1.50rem;
  --sp-8:  2.00rem;
  --sp-10: 2.50rem;
  --sp-12: 3.00rem;
  --sp-16: 4.00rem;
  --sp-20: 5.00rem;
  --sp-24: 6.00rem;
  --sp-32: 8.00rem;

  /* --- Border radius --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.40);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.55);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.70);
  --shadow-glow-orange: 0 0 40px rgba(232,100,26,0.25);
  --shadow-glow-gold:   0 0 30px rgba(212,165,64,0.20);

  /* --- Easing --- */
  --ease-out:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1.00);
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1.000);

  /* Transitions */
  --t-fast: 150ms var(--ease-out);
  --t-base: 300ms var(--ease-out);
  --t-slow: 500ms var(--ease-out);

  /* --- Layout --- */
  --container-max: 1180px;
  --container-pad: clamp(1rem, 5vw, 2.5rem);
  --header-h:      70px;

  /* --- Z-index layers --- */
  --z-below:   -1;
  --z-base:     1;
  --z-above:   10;
  --z-header: 100;
  --z-modal:  500;
  --z-toast:  900;
  --z-top:   9999;
}

/* --- Base HTML / Body -------------------------------------------- */
html {
  scroll-padding-top: var(--header-h);
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--clr-text);
  background-color: var(--clr-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Grain / worn-paper texture overlay applied to the entire page */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: 0.038;
  pointer-events: none;
  z-index: var(--z-top);
}

/* --- Heading defaults -------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--clr-text);
}

strong, b { font-weight: 600; }

/* --- Utility classes --------------------------------------------- */

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

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

/* Eyebrow label (section intro text) */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-orange-light);
  margin-bottom: var(--sp-4);
}
.eyebrow__line {
  flex: 1;
  height: 1px;
  max-width: 40px;
  background: linear-gradient(90deg, transparent, var(--clr-orange-light));
}
.eyebrow__line:first-child {
  background: linear-gradient(270deg, transparent, var(--clr-orange-light));
}

/* Section header block */
.section-header {
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: var(--sp-16);
}
.section-header .eyebrow { justify-content: center; }

.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  letter-spacing: 0.03em;
  line-height: 0.95;
  color: var(--clr-text);
  margin-bottom: var(--sp-5);
}

.section-sub {
  font-size: var(--fs-lg);
  color: var(--clr-text-dim);
  font-weight: 300;
}

/* Focus styles */
:focus-visible {
  outline: 2px solid var(--clr-orange);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Confetti canvas */
#confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-top);
  display: none;
}

/* --- Reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1    !important;
    transition-duration:      0.01ms !important;
    scroll-behavior:          auto  !important;
  }
}