/* Custom utilities for the WatchRust design system (see DESIGN.md). Token hexes are
   inlined here so this works independent of the Tailwind config. */
body { background-color: #0E0E10; }
.material-symbols-outlined { font-variation-settings: "FILL" 0, "wght" 500; }

/* subtle film grain over the page */
.noise::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.04;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
}

/* solid beveled metal panel - default surface */
.metal {
  background: linear-gradient(180deg, #24232A 0%, #1A191E 100%);
  border: 1px solid #3A2E29;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -2px 0 rgba(0,0,0,0.5);
}
/* frosted glass - hero / overlays only */
.glass {
  background: rgba(22,21,25,0.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.07);
}
.glow-rust { box-shadow: 0 0 16px rgba(225,85,30,0.30); }
.hover-rust { transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.hover-rust:hover { box-shadow: 0 0 22px rgba(242,107,42,0.45); border-color: #E1551E; }
.glow-amber { box-shadow: 0 0 14px rgba(246,190,61,0.25); }
.hero-fade { background: linear-gradient(180deg, rgba(14,14,16,0) 0%, rgba(28,16,9,0.55) 55%, rgba(14,14,16,0.94) 100%); }
.press { border-bottom: 2px solid rgba(0,0,0,0.45); }
.press:active { border-bottom-width: 0; transform: translateY(2px); }