:root {
  --brand-color-navy: var(--dark);
  --brand-color-navy-700: color-mix(in srgb, var(--secondary) 65%, var(--dark));
  --brand-color-navy-800: var(--dark);
  --brand-color-navy-900: var(--dark);

  --brand-color-gold: var(--accent);
  --brand-color-gold-light: color-mix(in srgb, var(--accent) 65%, var(--white));

  --brand-color-slate-light: color-mix(in srgb, var(--light) 35%, var(--white));
  --brand-color-slate: color-mix(in srgb, var(--secondary) 60%, var(--light));
  --brand-color-slate-300: color-mix(in srgb, var(--light) 75%, var(--white));
  --brand-color-slate-500: color-mix(in srgb, var(--secondary) 60%, var(--light));

  --brand-color-gray-100: color-mix(in srgb, var(--light) 20%, var(--white));
  --brand-color-gray-200: color-mix(in srgb, var(--light) 45%, var(--white));
  --brand-color-gray-300: color-mix(in srgb, var(--light) 75%, var(--white));
  --brand-color-gray-400: color-mix(in srgb, var(--light) 82%, var(--dark));
  --brand-color-gray-500: color-mix(in srgb, var(--light) 64%, var(--dark));
  --brand-color-gray-600: color-mix(in srgb, var(--light) 46%, var(--dark));
  --brand-color-gray-700: color-mix(in srgb, var(--light) 34%, var(--dark));
  --brand-color-gray-800: color-mix(in srgb, var(--light) 18%, var(--dark));

  --brand-color-red-50: color-mix(in srgb, var(--primary) 18%, var(--white));
  --brand-color-red-200: color-mix(in srgb, var(--primary) 35%, var(--white));
  --brand-color-red-400: color-mix(in srgb, var(--primary) 70%, var(--white));
  --brand-color-red-500: var(--primary);
  --brand-color-red-600: var(--primary);
  --brand-color-red-700: var(--primary);

  --brand-color-green-50: color-mix(in srgb, var(--accent) 20%, var(--white));
  --brand-color-green-200: color-mix(in srgb, var(--accent) 40%, var(--white));

  --brand-color-white: var(--white);

  --brand-text-body: color-mix(in srgb, var(--dark) 92%, var(--light));
  --brand-surface-default: var(--white);
  --brand-text-on-dark: var(--white);
  --brand-text-on-dark-muted: color-mix(in srgb, var(--light) 75%, var(--white));

  /* Typography */
  --brand-font-sans: "Inter";
  --brand-font-display: "TASA Explorer", Georgia, serif;
}

html,
body {
  font-family: var(--brand-font-sans), system-ui, sans-serif;
  color: var(--brand-text-body);
  background-color: var(--brand-surface-default);
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-display {
  font-family: var(--brand-font-display), Georgia, serif;
}

/* Global contact-form field skin */
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea,
#contact select {
  display: block;
  /* width: 100%; */
  padding: 0.625rem 0.875rem;
  background: color-mix(in srgb, var(--brand-text-on-dark) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-text-on-dark) 15%, transparent);
  border-radius: 0.5rem;
  color: var(--brand-text-on-dark);
  font-size: 0.9375rem;
}

#contact input::placeholder,
#contact textarea::placeholder {
  color: color-mix(in srgb, var(--brand-text-on-dark) 30%, transparent);
}

#contact select option {
  background: var(--dark);
  color: var(--brand-text-on-dark);
}

#contact input:focus,
#contact textarea:focus,
#contact select:focus {
  outline: none;
  border-color: var(--accent);
}