/* Abstrekkt effects — shadow, texture, motion.
   Restrained. No neon, no gradient-tech glow. */

:root {
  /* --- Elevation --- shadows are deep and soft, never colorful */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-3: 0 16px 48px rgba(0,0,0,0.6);

  /* inset used on wells / inputs to feel pressed into the page */
  --inset-well: inset 0 1px 2px rgba(0,0,0,0.5);

  /* --- Brass ambient (single radial at top of page) --- */
  --ambient-brass: radial-gradient(120% 80% at 50% -10%,
                     rgba(200,168,106,0.10) 0%,
                     rgba(200,168,106,0.03) 30%,
                     transparent 60%); /* @kind other */

  /* --- Paper grain overlay (subtle, ~35% opacity noise) --- */
  --grain-opacity: 0.35; /* @kind other */

  /* --- Motion --- slow, considered; fades over bounces --- */
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-med:    260ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */

  /* --- Focus --- */
  --focus-width: 2px;
}

/* Paper-grain overlay utility — layer this fixed above the page background.
   Uses an inline SVG turbulence so no asset is required. */
.abs-grain::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}