/* ==========================================================================
   BASE STYLES
   Foundational element styles applied via design tokens.
   ========================================================================== */

/* -- Body ---------------------------------------------------------------- */
body {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--c-text);
  background-color: var(--c-bg);
  overflow-x: hidden;
  transition: background-color var(--duration-slow) var(--ease-out), color var(--duration-slow) var(--ease-out);
}

/* -- Noise Grain Overlay ------------------------------------------------- */
.noise {
  position: fixed;
  inset: 0;
  z-index: var(--z-max);
  pointer-events: none;
  opacity: 0.02;
  filter: invert(1);
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  transition: filter var(--duration-slow) var(--ease-out), opacity var(--duration-slow) var(--ease-out);
}

/* Dark mode noise adjustments */
:root[data-theme="dark"] .noise {
  filter: none;
  opacity: 0.035;
}

/* -- Ambient Background Wash (both themes) --------------------------------
   #app is the positioned container so this absolute layer stretches
   across the full document height (not just one viewport) and scrolls
   naturally with the page content. Sections with their own flat
   background (reels, portfolio, analytics, etc.) paint over it, which is
   why those sections carry their own local glow — see each section's
   CSS file for a matching radial-gradient layered on its background. -- */
#app {
  position: relative;
}

.bg-wash {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-behind);
  pointer-events: none;
  display: block;
  background-repeat: no-repeat;
}

:root:not([data-theme="dark"]) .bg-wash {
  background-image:
    radial-gradient(circle 650px at 15% 3%,  rgba(200, 16, 46, 0.088) 0%, transparent 72%),
    radial-gradient(circle 750px at 92% 6%,  rgba(122, 14, 34, 0.079) 0%, transparent 72%),
    radial-gradient(circle 700px at 6% 28%,  rgba(200, 16, 46, 0.070) 0%, transparent 72%),
    radial-gradient(circle 750px at 96% 42%, rgba(122, 14, 34, 0.079) 0%, transparent 72%),
    radial-gradient(circle 700px at 4% 62%,  rgba(200, 16, 46, 0.070) 0%, transparent 72%),
    radial-gradient(circle 750px at 94% 80%, rgba(122, 14, 34, 0.079) 0%, transparent 72%),
    radial-gradient(circle 650px at 20% 95%, rgba(200, 16, 46, 0.070) 0%, transparent 72%);
}

:root[data-theme="dark"] .bg-wash {
  background-image:
    radial-gradient(circle 700px at 15% 3%,  rgba(224, 21, 53, 0.140) 0%, transparent 72%),
    radial-gradient(circle 800px at 92% 6%,  rgba(122, 14, 34, 0.175) 0%, transparent 72%),
    radial-gradient(circle 750px at 6% 28%,  rgba(200, 16, 46, 0.123) 0%, transparent 72%),
    radial-gradient(circle 800px at 96% 42%, rgba(122, 14, 34, 0.158) 0%, transparent 72%),
    radial-gradient(circle 750px at 4% 62%,  rgba(200, 16, 46, 0.123) 0%, transparent 72%),
    radial-gradient(circle 800px at 94% 80%, rgba(122, 14, 34, 0.158) 0%, transparent 72%),
    radial-gradient(circle 700px at 20% 95%, rgba(200, 16, 46, 0.123) 0%, transparent 72%);
}

/* -- Headings ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
  transition: color var(--duration-slow) var(--ease-out);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

/* -- Paragraphs ---------------------------------------------------------- */
p {
  color: var(--c-text-2);
  max-width: 68ch;
  transition: color var(--duration-slow) var(--ease-out);
}

p + p {
  margin-top: var(--sp-md);
}

/* -- Links --------------------------------------------------------------- */
a {
  transition: color var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}

a:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* -- Strong / Bold ------------------------------------------------------- */
strong, b {
  font-weight: var(--fw-semibold);
  color: var(--c-text);
}

/* -- Small --------------------------------------------------------------- */
small {
  font-size: var(--fs-small);
  color: var(--c-text-3);
  transition: color var(--duration-slow) var(--ease-out);
}

/* -- Selection ----------------------------------------------------------- */
::selection {
  background-color: var(--c-primary);
  color: #ffffff;
}

/* -- Scrollbar ----------------------------------------------------------- */
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-h);
}

/* Firefox scrollbar */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* -- Focus Styles (Global) ----------------------------------------------- */
:focus {
  outline: none;
}

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

/* -- Section Labels / Eyebrows ------------------------------------------- */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: var(--sp-lg);
}

/* Small red dot that precedes every section eyebrow label */
.section-label::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-primary);
}

/* -- Section Headlines --------------------------------------------------- */
.section-headline {
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-lg);
  max-width: 18ch;
  text-transform: uppercase;
}

/* -- Section Subtext ----------------------------------------------------- */
.section-subtext {
  font-size: var(--fs-body);
  color: var(--c-text-2);
  line-height: var(--lh-relaxed);
  max-width: 60ch;
}