/* ==========================================================================
   BASE — base.css
   Reset, global styles, background effects, focus states
   ========================================================================== */

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

/* ── Root & Body ──────────────────────────────────────────────────────────── */
html {
  font-size: 16px;
  scroll-behavior: smooth;
  background-color: var(--c-bg);
  transition: var(--theme-transition);
}

body {
  font-family: var(--f-sans);
  background-color: var(--c-bg);
  color: var(--c-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: var(--theme-transition);
}

/* ── Selection ────────────────────────────────────────────────────────────── */
::selection {
  background: var(--c-text);
  color: var(--c-bg);
}

/* ── Base Elements ────────────────────────────────────────────────────────── */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast);
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}

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

/* ── Focus States (Accessibility) ─────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.3);
  outline-offset: 2px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

/* ==========================================================================
   BACKGROUND EFFECTS
   Grain noise, vignette, ambient glow for depth
   ========================================================================== */

/* ── Noise Texture Overlay ────────────────────────────────────────────────── */
.bg-noise {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: var(--z-overlay);
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
}

/* ── Vignette Effect ──────────────────────────────────────────────────────── */
.bg-vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: var(--z-overlay);
  pointer-events: none;
  box-shadow:
    inset 0 0 120px 60px rgba(0, 0, 0, 0.4),
    inset 0 0 300px 100px rgba(0, 0, 0, 0.2);
}

/* ── Ambient Glow ─────────────────────────────────────────────────────────── */
.bg-glow {
  position: fixed;
  top: -20vh;
  left: 50%;
  transform: translateX(-50%);
  width: 80vw;
  height: 80vh;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.025) 0%,
    transparent 60%
  );
  z-index: var(--z-bg);
  pointer-events: none;
}

/* ==========================================================================
   LIGHT THEME — Background Effect Overrides
   ========================================================================== */
[data-theme="light"] .bg-noise {
  opacity: 0.02;
}

[data-theme="light"] .bg-vignette {
  box-shadow:
    inset 0 0 120px 60px rgba(0, 0, 0, 0.04),
    inset 0 0 300px 100px rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .bg-glow {
  background: radial-gradient(
    ellipse at center,
    rgba(200, 169, 110, 0.04) 0%,
    transparent 60%
  );
}