/* ==========================================================
   SYSTEM
   Shared by every page: theme tokens, accent split, texture layers,
   and global cleanups. Loaded after the live styles and before any
   page stylesheet (home.css for home, case.css for project pages).
   Values mirror ds-kit/tokens.ts; keep them in sync.
========================================================== */

/* ----------------------------------------------------------
   TOKENS
---------------------------------------------------------- */

/* Light theme: soft grey text a shade darker (was #66635f). The accent
   matches the orange on the portrait (#fc6400) for fills and the offset
   motif; text and links use a darker step of the same hue that passes
   4.5:1 on both the cream and the menu band. */
html:not([data-theme="dark"]) {
  --muted: #55524e;
  --accent: #fc6400;
  --accent-text: #ad4500;
}

html[data-theme="dark"] {
  /* Text on accent fills is near-black, never white. */
  --accent-contrast: #141414;
  --button-text: #141414;

  /* The teal is light enough to serve as text as-is. */
  --accent-text: var(--accent);

  /* Darker, cooler ground (live site was #413f41 warm grey). */
  --background: #2a2d30;
  --surface: #323538;
  --surface-secondary: #3b3e42;

  /* Body text a touch cooler; pure white is reserved for headlines. */
  --text: #eceeee;
  --muted: #c2c6c8;
  --headline: #ffffff;
}

/* ----------------------------------------------------------
   TEXTURE
   Two fixed layers between the background and the content, both
   soft-light. Each file is grayscale and re-centred on 50% grey, and
   soft-light leaves 50% grey unchanged, so the background colour stays
   exactly on its token and only the grain shows. Content sits above
   (animations.css lifts body children to z-index 1).
---------------------------------------------------------- */

/* Crumpled paper, full window. */
body::before {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: url("../images/textures/texture-overlay-softlight.jpg") center / cover no-repeat;
  mix-blend-mode: soft-light;
  opacity: 0.9;
  pointer-events: none;
  content: "";
}

html[data-theme="dark"] body::before {
  opacity: 0.2;
}

/* Paper tooth: a seamless 256px grain tile at true pixel size. */
body::after {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: url("../images/textures/paper-tooth.png") 0 0 / 256px 256px repeat;
  mix-blend-mode: soft-light;
  opacity: 0.35;
  pointer-events: none;
  content: "";
}

html[data-theme="dark"] body::after {
  opacity: 0.3;
}

/* ----------------------------------------------------------
   GLOBAL
---------------------------------------------------------- */

/* No glow following the cursor. The element stays because
   cursor.js needs it to run the dot cursor. */
.glow {
  display: none;
}