/* ==========================================================================
   HMS Theme — Global Styles
   ========================================================================== */

:root {
  /* Colors — swap these for your actual brand palette */
  --hms-color-primary: #2c5f2d;      /* main brand color (nav, buttons, links) */
  --hms-color-primary-dark: #1e4220; /* hover/active state of primary */
  --hms-color-accent: #c9a227;       /* secondary/accent color for highlights */
  --hms-color-text: #222222;         /* main body text */
  --hms-color-text-muted: #5a5a5a;   /* secondary text, captions */
  --hms-color-background: #ffffff;   /* page background */
  --hms-color-surface: #f7f6f3;      /* cards, panels, alternate sections */
  --hms-color-border: #e0ddd6;       /* subtle borders/dividers */

  /* Typography */
  --hms-font-body: 'Georgia', serif;             /* body text font */
  --hms-font-heading: 'Helvetica Neue', sans-serif; /* heading font */
  --hms-font-size-base: 1rem;
  --hms-line-height-base: 1.6;

  /* Spacing scale — use these instead of one-off px values where you can */
  --hms-space-xs: 0.5rem;
  --hms-space-sm: 1rem;
  --hms-space-md: 1.5rem;
  --hms-space-lg: 2.5rem;
  --hms-space-xl: 4rem;

  /* Misc */
  --hms-radius: 4px;
  --hms-transition: 0.15s ease-in-out;
}

/* ==========================================================================
   Base Elements
   ========================================================================== */

body {
  font-family: var(--hms-font-body);
  font-size: var(--hms-font-size-base);
  line-height: var(--hms-line-height-base);
  color: var(--hms-color-text);
  background-color: var(--hms-color-background);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--hms-font-heading);
  color: var(--hms-color-text);
  line-height: 1.25;
  margin-top: var(--hms-space-lg);
  margin-bottom: var(--hms-space-sm);
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.375rem; }

p {
  margin-bottom: var(--hms-space-sm);
}

a {
  color: var(--hms-color-primary);
  text-decoration: underline;
  transition: color var(--hms-transition);
}

a:hover,
a:focus {
  color: var(--hms-color-primary-dark);
}

/* ==========================================================================
   Buttons & Form Inputs
   ========================================================================== */

button,
.button,
input[type="submit"] {
  display: inline-block;
  font-family: var(--hms-font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.6rem 1.25rem;
  border: none;
  border-radius: var(--hms-radius);
  background-color: var(--hms-color-primary);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--hms-transition);
}

button:hover,
.button:hover,
input[type="submit"]:hover {
  background-color: var(--hms-color-primary-dark);
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
textarea,
select {
  font-family: var(--hms-font-body);
  font-size: var(--hms-font-size-base);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--hms-color-border);
  border-radius: var(--hms-radius);
  background-color: #fff;
  color: var(--hms-color-text);
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--hms-color-accent);
  outline-offset: 1px;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.hms-surface {
  background-color: var(--hms-color-surface);
  border: 1px solid var(--hms-color-border);
  border-radius: var(--hms-radius);
  padding: var(--hms-space-md);
}