/* css/theme.css (FULL FILE)
   Global colors, sizing, and surface texture
   SAFE to paste over existing file
*/

/* ===============================
   ROOT VARIABLES
   =============================== */
:root{
  /* colors */
  --header-bg: #15171c;
  --footer-bg: #15171c;
  --body-bg: #0f1115;

  --text: #e9ecf1;
  --muted: #aeb6c3;

  --line: rgba(255,255,255,.10);

  /* sizing */
  --header-h: 72px;
  --footer-h: 72px;

  --divider: 2px;

  --pad: 18px;
  --max: 1200px;

  /* motion / feel */
  --hover-scale: 1.03;
  --hover-dur: 160ms;
}

/* ===============================
   BASE BACKGROUND
   =============================== */
html, body{
  background-color: var(--body-bg);
  color: var(--text);
}

/* Main app wrapper */
.app{
  position: relative;
  background-color: var(--body-bg);
  color: var(--text);
}

/* ===============================
   GLOBAL CHALKBOARD TEXTURE
   Applied ABOVE all content
   =============================== */
.app::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999; /* above all tiles */

  background-image:
    radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,0.55) 1px, transparent 1px),
    radial-gradient(1000px 700px at 15% 12%, rgba(255,255,255,0.07), transparent 60%),
    radial-gradient(1200px 900px at 85% 28%, rgba(0,0,0,0.38), transparent 65%);

  background-size:
    3px 3px,
    4px 4px,
    100% 100%,
    100% 100%;

  opacity: 0.26;                 /* MAIN CONTROL */
  mix-blend-mode: soft-light;    /* reliable + chalky */
}