/* application.css */

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

:root {
  --color-bg:      #ffffff;
  --color-fg:      #111827;
  --color-muted:   #6b7280;
  --color-accent:  #4f46e5;
  --font-sans:     system-ui, -apple-system, sans-serif;
  --font-mono:     ui-monospace, "Cascadia Mono", monospace;
  --max-width:     72rem;
  --radius:        0.375rem;
}

html { font-family: var(--font-sans); color: var(--color-fg); background: var(--color-bg); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }

/* Layout */
header, main, footer {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 1.5rem;
}
main { flex: 1; }

/* Nav */
header nav a { font-weight: 600; text-decoration: none; color: var(--color-accent); }

/* Footer */
footer { color: var(--color-muted); font-size: 0.875rem; }

/* Headings */
h1 { font-size: 2rem; margin: 0 0 0.5rem; }
p  { line-height: 1.6; color: var(--color-muted); }

/* Buttons */
button, .btn {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  border: none;
  border-radius: var(--radius);
  background: var(--color-accent);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
}
button:hover, .btn:hover { opacity: 0.9; }

/* Turbo progress bar colour */
.turbo-progress-bar { background: var(--color-accent); }