/*
 * The design system — shared tokens and base styles (each language pack adds its theme).
 *
 * Stylesheets are loaded in alphabetical path order:
 *   application.css → components.css → layouts.css → screens/*.css → utilities.css
 * so later files can build on (and override) earlier ones.
 */

:root {
  /* Colors, fonts and shadows come from the site's language pack
     (Language::Pack#theme, written into each page by the layout). */

  /* Shape */
  --radius-sm: 6px;
  --radius-input: 10px;
  --radius-md: 14px;
  --radius-card: 18px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --gutter: clamp(20px, 5vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--clay); text-decoration: none; }
a:hover { color: var(--clay-deep); text-decoration: underline; }

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

img, svg, canvas { max-width: 100%; }

h1, h2, h3, h4, p { margin: 0; }

:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

[hidden] { display: none !important; }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(168, 72, 42, .45); }
  100% { box-shadow: 0 0 0 22px rgba(168, 72, 42, 0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}