/* =====================================================
   Design Tokens — colors, fonts, glass, shadows
   (from "Second set of instructions" PDF)
   ===================================================== */

/* Savor display font (bundled in assets/fonts/) */
@font-face {
  font-family: 'Savor';
  src: url('../assets/fonts/Savor.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colors */
  --color-bg: #000000;
  --color-bg-desktop: #212121;
  --color-yellow: #BA8D42;
  --color-yellow-light: #CEA155;
  --color-offwhite: #E8E0CC;
  --color-white: #FFFFFF;
  --color-red: #E32629;
  --color-grey: #555555;

  /* Glass */
  --glass-fill: rgba(255, 255, 255, 0.12);
  --glass-fill-strong: rgba(255, 255, 255, 0.24);
  --glass-border: rgba(255, 255, 255, 0.24);

  /* Shadows (spec: -2px -2px #FFF 16% 8px AND -2px -2px #000 40% 8px) */
  --shadow-inner-light: inset -2px -2px 8px rgba(255, 255, 255, 0.16);
  --shadow-inner-dark:  inset -2px -2px 8px rgba(0, 0, 0, 0.40);

  /* Fonts */
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Savor', 'Montserrat', serif;
}

/* =====================================================
   Reset
   ===================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-body);
  color: var(--color-white);
  background: var(--color-bg-desktop);
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

button {
  font-family: inherit;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

img, svg { display: block; }

.crafted-line {
  text-align: center;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: #888888;
  letter-spacing: 0.6px;
  padding: 0 0 8px;
}

.crafted-line span {
  text-decoration: underline dashed;
  text-decoration-color: #555555;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

/* =====================================================
   Glass utility classes
   ===================================================== */
.glass {
  background: var(--glass-fill-strong);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
          backdrop-filter: blur(12px) saturate(140%);
  border: 0.64px solid var(--glass-border);
  box-shadow: var(--shadow-inner-light), var(--shadow-inner-dark);
}

.glass-soft {
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
          backdrop-filter: blur(12px) saturate(140%);
  border: 0.64px solid var(--glass-border);
  box-shadow: var(--shadow-inner-light), var(--shadow-inner-dark);
}

/* Disable body scroll when a modal/bottomsheet is open */
body.no-scroll { overflow: hidden; }