/* ==========================================================================
   Warm off-white background — matches dany.works light mode palette.
   ========================================================================== */

:root {
  --bg: #f2efe9;
  --bg-alt: #ebe8e1;
  --header-bg: rgba(242, 239, 233, 0.92);
  --footer-bg: #ebe8e1;
  --card-bg: #f8f5ef;
  --border: #1a1a1a;
  --text-primary: #1a1a1a;
  --text-secondary: #4a4a4a;
  --text-light: #888888;
  /* Klein Blue (IKB) — Yves Klein's iconic ultramarine on warm cream. */
  --accent: #002FA7;
  --accent-hover: #1A4ED8;
  --heading-bg: #002FA7;
}

body.dark-mode {
  --bg: #0a0a0a;
  --bg-alt: #141414;
  --header-bg: #0a0a0a;
  --footer-bg: #0a0a0a;
  --card-bg: #0a0a0a;
  --border: #333333;
  --text-primary: #f2efe9;
  --text-secondary: #b4b4b4;
  --text-light: #888888;
  /* Lifted Klein for dark bg — stays in family, readable on black. */
  --accent: #8AA3F0;
  --accent-hover: #A9BCF8;
  --heading-bg: #4A6FE3;
}

body {
  background-color: var(--bg);
  /* Very subtle fibre noise so the surface isn't flat — barely perceptible. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  background-attachment: fixed;
}

body.dark-mode {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.93  0 0 0 0 0.9  0 0 0 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---- Apron card: sharp wordmark instead of low-res raster logo ---- */
.project-image-wrap.apron-wordmark {
  aspect-ratio: 3 / 2;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a1a;
  color: var(--bg);
}
.apron-word {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(48px, 10vw, 104px);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--bg);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
  padding: 0 0.15em;
  user-select: none;
}
body.dark-mode .project-image-wrap.apron-wordmark {
  background: #f2efe9;
  color: #0a0a0a;
}
body.dark-mode .apron-word {
  color: #0a0a0a;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.2);
}


/* ---- Klein Blue accents — kept intentional and minimal ---- */
/* Hero name anchors the page in Klein. */
.hero-title {
  color: var(--accent);
}

/* @handle link feels like signed ink. */
.hero-link a {
  color: var(--accent);
}

/* Project badges — solid Klein pills for instant recognition. */
.badge {
  background: var(--accent) !important;
  color: #f2efe9 !important;
}
body.dark-mode .badge {
  background: var(--accent) !important;
  color: #0a0a0a !important;
}