:root {
  /* Backgrounds and text */
  --color-bg: #f5f7ff;
  --color-surface: #e4e8ff;
  --color-text: #2e2e3d;

  /* Accent colours */
  --color-accent: #6f86ff;
  --color-accent-hover: #5f76ee;
  --color-secondary-accent: #ffffff;
  --color-secondary-accent-hover: #f7f7f7;
  --color-header: #5b6ee6;
  --color-panel: #d6dcff;
  --btn-text-on-accent: #ffffff;
  --color-alert: #e45b78;

  /* Spacing options (to keep styling consistent) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;

  /* Other */
  --radius: 0.5rem;
  --shadow-1: 0 0.125rem 0.3125rem rgba(0,0,0,0.08);
  --transition-style: cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  font: 1rem/1.5 system-ui, sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
}

a { color: var(--color-accent); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

main {
  flex: 1;
  width: min(90vw, 62.5rem);
  margin: 0 auto;
  padding: var(--space-3);
}

/* ===== Header ===== */
.site-header {
  background: var(--color-header);
  padding: var(--space-3) 0;
  box-shadow: var(--shadow-1);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2);
}
.site-header .title-logo {
  grid-column: 2;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.site-header .title-logo .material-icons { color: #fff; font-size: 1.5rem; vertical-align: middle; }
.site-header #title { color: #fff; font-weight: 700; display: block; text-decoration: none; }
.site-header a:hover, .site-header a:focus { text-decoration: underline; }

.site-header .auth-nav {
  grid-column: 3;
  justify-self: end;
  display: flex;
  gap: var(--space-2);
  margin-right: var(--space-3);
}

/* ===== Footer ===== */
.site-footer {
  background: var(--color-panel);
  padding: var(--space-3) 0;
  box-shadow: var(--shadow-1);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
}
.site-footer a { color: var(--color-text); font-weight: 600; text-decoration: none; }
.site-footer a:hover, .site-footer a:focus { text-decoration: underline; }
.site-footer .material-icons { font-size: 1.25rem; vertical-align: middle; }

/* ===== Buttons ===== */
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  transition: background 0.2s var(--transition-style), color 0.2s var(--transition-style);
}
.btn.primary-btn { background: var(--color-accent); color: var(--btn-text-on-accent); }
.btn.primary-btn:hover, .btn.primary-btn:focus { background: var(--color-accent-hover); }
.btn.alert-btn { background: var(--color-alert); color: #fff; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.hidden { display: none !important; }

.collapsible {
  max-height: 75rem;
  opacity: 1;
  transform: none;
  transform-origin: top;
  transition:
    max-height 280ms var(--transition-style),
    opacity 180ms var(--transition-style),
    transform 180ms var(--transition-style),
    padding 180ms var(--transition-style);
  will-change: max-height, opacity, transform, padding;
}
.collapsible.is-collapsed {
  max-height: 0;
  opacity: 0;
  transform: scaleY(0.98);
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
}