/* Shared styles for Picnic Table Finder */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&display=swap');

:root {
  --grass: #3E6B3A;
  --grass-dark: #2B4B28;
  --bark: #6B4428;
  --gingham: #C8453B;
  --meadow: #EEF4EA;
  --ink: #1F2A1E;
  --white: #FFFFFF;
  --font: 'Bricolage Grotesque', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); color: var(--ink); background: var(--meadow); }

/* Red-and-white picnic blanket stripe */
.gingham {
  height: 14px;
  background-color: var(--white);
  background-image:
    linear-gradient(90deg, rgba(200,69,59,.55) 50%, transparent 50%),
    linear-gradient(rgba(200,69,59,.55) 50%, transparent 50%);
  background-size: 14px 14px;
}

a { color: var(--grass-dark); }

button, .btn {
  font: 600 1rem var(--font);
  border: 0;
  border-radius: 8px;
  padding: .7rem 1.1rem;
  background: var(--grass);
  color: var(--white);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, .btn:hover { background: var(--grass-dark); }
button:focus-visible, .btn:focus-visible, input:focus-visible, a:focus-visible {
  outline: 3px solid var(--gingham);
  outline-offset: 2px;
}
button:disabled { opacity: .6; cursor: wait; }