/* MDconcierge — global brand tokens & components. Single source of truth (see BRAND.md).
   Reference these variables; do not hardcode hex values in pages. */
:root {
  --brand-navy: #08214C;
  --brand-navy-hover: #0E2E63;
  --brand-blue: #6B95D4;
  --brand-blue-link: #2F5EA8;
  --brand-blue-50: #EEF4FC;
  --brand-blue-100: #DCE8F7;
  --brand-ink: #14213D;
  --brand-muted: #5C6B85;
  --brand-border: #DCE6F2;
  --brand-surface: #F6F9FD;
  --brand-white: #FFFFFF;

  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --radius: 8px;
}

body {
  font-family: var(--font-sans);
  color: var(--brand-ink);
  background: var(--brand-surface);
}

h1, h2, h3, h4 { color: var(--brand-navy); }

a { color: var(--brand-blue-link); text-decoration: none; }
a:hover { text-decoration: underline; }

.btn-primary {
  background: var(--brand-navy);
  color: var(--brand-white);
  border: none;
  border-radius: var(--radius);
  padding: 10px 18px;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary:hover { background: var(--brand-navy-hover); }

.btn-secondary {
  background: var(--brand-white);
  color: var(--brand-navy);
  border: 1.5px solid var(--brand-blue);
  border-radius: var(--radius);
  padding: 10px 18px;
  font-weight: 600;
  cursor: pointer;
}
.btn-secondary:hover { background: var(--brand-blue-50); }

.navbar {
  background: var(--brand-navy);
  color: var(--brand-white);
  padding: 12px 24px;
  display: flex;
  align-items: center;
}
.navbar a { color: var(--brand-white); }

.card {
  background: var(--brand-white);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  padding: 20px;
}

input, select, textarea {
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  padding: 8px 10px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px var(--brand-blue-50);
}

table.brand th { background: var(--brand-navy); color: var(--brand-white); text-align: left; padding: 10px; }
table.brand td { padding: 10px; border-bottom: 1px solid var(--brand-border); }
table.brand tr:hover td { background: var(--brand-blue-50); }