/* Make padding and border part of an element's declared width/height rather than
   additive. Without this, width: 100% + any padding overflows the parent. */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Reserve scrollbar gutter space even when no scrollbar is visible, preventing
   layout shift when content height changes between pages. */
html {
  scrollbar-gutter: stable;
}

:root {
  --color-primary: #04254c;
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-surface: #f9fafb;
  --color-border: #e5e7eb;
  --color-nav-active: #009999;

  /* Page-level x-axis alignment unit. Used by nav link padding and main content
     padding so both stay in sync. Change here and everything aligns automatically. */
  --spacing-page-x: 0.85rem;
}

[data-theme="dark"] {
  --color-primary: #cccccc;
  --color-bg: #111827;
  --color-text: #e5e7eb;
  --color-surface: #1f2937;
  --color-border: #374151;
}

/* https://fonts.google.com/specimen/Oleo+Script */
/* Also liked: https://fonts.google.com/specimen/Playball */
@font-face {
  font-family: 'Oleo Script';
  src: url('/static/fonts/oleo-script-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.font-default { font-family: -apple-system, BlinkMacSystemFont, Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif; }
.font-article { font-family: Georgia, "Times New Roman", Times, serif; }

.color-primary { color: var(--color-primary); }

body {
  margin: 2rem auto;
  max-width: 1300px;
  padding: 0;
  color: var(--color-text);
  background: var(--color-bg);
}

main {
  padding: 0 var(--spacing-page-x);
}

main h1 {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 2rem;
}

header {
  margin: -2rem 0 2rem;
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------
   Messages
   Used for inline feedback anywhere in the UI — empty states, form errors,
   confirmations, warnings, etc. Apply a modifier class for each type:

     .message              — base class (required)
     .message--empty       — neutral, e.g. "No data found" (white bg, gray text)
     .message--info        — informational, non-urgent
     .message--success     — confirmation of a completed action
     .message--warning     — something to be aware of, not yet an error
     .message--error       — something went wrong / validation failed
   ------------------------------------------------------------------------- */

.message {
  padding: 0.65rem 1rem;
  border-radius: 4px;
  font-size: 0.9rem;
  border: 1px solid transparent;
}

.message--empty {
  background: var(--color-bg);
  color: #6b7280;
  border-color: transparent;
}

.message--info {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

.message--success {
  background: #f0fdf4;
  color: #15803d;
  border-color: #bbf7d0;
}

.message--warning {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}

.message--error {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}

[data-theme="dark"] .message--empty {
  background: var(--color-surface);
  color: #9ca3af;
  border-color: var(--color-border);
}

[data-theme="dark"] .message--info {
  background: #1e3a5f;
  color: #93c5fd;
  border-color: #1d4ed8;
}

[data-theme="dark"] .message--success {
  background: #14532d;
  color: #86efac;
  border-color: #15803d;
}

[data-theme="dark"] .message--warning {
  background: #451a03;
  color: #fcd34d;
  border-color: #b45309;
}

[data-theme="dark"] .message--error {
  background: #450a0a;
  color: #fca5a5;
  border-color: #b91c1c;
}