/* base.css — design tokens, reset, page background, page frame. */

:root {
  --cloth: #0e4d38;
  --cloth-deep: #08301f;
  --cloth-lite: #16654a;
  --rail: #2b1a10;
  --brass: #d9b25f;
  --brass-dim: #8f7440;
  --ivory: #f4efe3;
  --muted: #a9c7b7;
  --line: rgba(244, 239, 227, .1);
  --glass: rgba(4, 22, 15, .38);
  --glass-2: rgba(244, 239, 227, .07);
  --chalk: #57a8e8;
  --good: #5fd38d;
  --bad: #ff6b5b;
  --warn: #ffb547;
  --font: "Vazirmatn", "Vazir", Tahoma, system-ui, sans-serif;
  --r-lg: 24px;
  --r-md: 16px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font);
  color: var(--ivory);
  background: var(--cloth-deep);
  -webkit-user-select: none; user-select: none;
  overscroll-behavior-y: none;
}
/* the cloth: a lamp-lit pool of green with a whisper of nap texture */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(255, 236, 190, .14), transparent 70%),
    radial-gradient(140% 90% at 50% 30%, var(--cloth-lite), var(--cloth) 45%, var(--cloth-deep));
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.012) 0 2px, transparent 2px 5px);
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
:focus-visible { outline: 3px solid var(--chalk); outline-offset: 3px; border-radius: 12px; }
input { -webkit-user-select: text; user-select: text; }

#app {
  max-width: 540px; margin: 0 auto; min-height: 100dvh;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 28px) max(16px, env(safe-area-inset-left, 0px));
  display: flex; flex-direction: column; gap: 14px;
}
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }